:root{color-scheme:dark;--bg:#080a12;--panel:#101421;--line:rgba(195,208,255,.13);--ink:#f3f3fb;--muted:#9196ac;--cyan:#8ef5eb;--pink:#ff83c8;--gold:#ffd18a;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(ellipse at 52% -12%,#20203d 0,#0a0d18 53%,#080a12 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}body{padding:0 20px}body.large-type{font-size:19px}body.large-type .topbar{min-height:78px}body.large-type .topbar .wordmark{font-size:13px}body.large-type .build-tag,body.large-type .icon-button{font-size:12px}body.large-type .eyebrow,.large-type .beat-label,.large-type .site-footer{font-size:12px}body.large-type .objective strong{font-size:20px}body.large-type .objective #hint{font-size:13px;line-height:1.5}body.large-type .collect-counter strong{font-size:27px}body.large-type .intro-copy{font-size:20px;line-height:1.55}body.large-type .howto small{font-size:12px}body.large-type .primary-button,body.large-type .secondary-button{font-size:15px}body.large-type .below-grid{font-size:18px;line-height:1.6}body.large-type .below-grid h3{font-size:24px}body.large-type .below-grid p{font-size:18px;line-height:1.65}body.large-type .home-link{font-size:14px}.shell{max-width:1220px;margin:0 auto}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font:700 11px var(--mono);letter-spacing:.1em}.wordmark i{font-style:normal;color:#898fa6;font-weight:500}.mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(142,245,235,.45);border-radius:50%;color:var(--cyan);font:700 16px Georgia,serif;box-shadow:0 0 20px #8ef5eb20}.top-actions{display:flex;align-items:center;gap:20px}.build-tag,.icon-button{font:600 10px var(--mono);letter-spacing:.1em;color:#a9b0c5}.live-dot,.pulse-led{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 11px var(--cyan);margin-right:7px}.icon-button{border:1px solid var(--line);border-radius:6px;background:#111522;color:var(--cyan);padding:9px 12px;cursor:pointer}.icon-button:hover{border-color:#8ef5eb88}.game-frame{margin:28px auto 0;border:1px solid rgba(184,197,243,.2);border-radius:12px;overflow:hidden;background:#0c101b;box-shadow:0 34px 100px #0008,0 0 45px #9a63ff12}.canvas-wrap{position:relative;width:100%;aspect-ratio:16/9;min-height:350px;max-height:690px;overflow:hidden;background:#101323;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none}.top-hud{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 26px;background:linear-gradient(#080a12c9,transparent);pointer-events:none}.objective,.collect-counter{display:flex;flex-direction:column;gap:5px}.eyebrow{font:600 9px var(--mono);letter-spacing:.17em;color:#99a2b9;text-transform:uppercase}.objective strong{font-size:15px;letter-spacing:.005em}.objective #hint{color:#aab0c3;font-size:11px}.collect-counter{text-align:right}.collect-counter strong{font:600 22px var(--mono);color:var(--cyan)}.collect-counter strong b{font-size:13px;color:#747b92;margin:0 4px}.beat-pulse{position:absolute;z-index:1;top:25px;left:50%;transform:translateX(-50%);width:42px;height:42px;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .12s}.beat-pulse.on{opacity:1}.beat-pulse span{position:absolute;inset:4px;border:1px solid #8ef5ebaa;border-radius:50%;animation:ripple .48s ease-out both}.beat-pulse span:nth-child(2){animation-delay:.07s}.beat-pulse span:nth-child(3){animation-delay:.14s}@keyframes ripple{0%{transform:scale(.42);opacity:.9}100%{transform:scale(1.35);opacity:0}}.beat-label{position:absolute;z-index:2;bottom:18px;left:22px;display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid #c6d1f320;border-radius:4px;background:#0a0c14aa;color:#bfc5d7;font:600 9px var(--mono);letter-spacing:.13em;pointer-events:none}.beat-label.hit{border-color:#8ef5eb77;color:var(--cyan)}.beat-dot{width:5px;height:5px;background:#7a8096;border-radius:50%}.beat-label.hit .beat-dot{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:linear-gradient(90deg,#070913c9,#090c18ac 54%,#090c18aa);padding:20px;overflow:auto}.hidden{display:none!important}.intro-card{width:min(440px,100%);padding:24px 30px 22px;border:1px solid #b8c6ea24;border-radius:10px;background:linear-gradient(155deg,#151827f2,#0c1019f5);box-shadow:0 22px 90px #0008;backdrop-filter:blur(12px)}.intro-kicker{display:flex;justify-content:space-between;color:#949bb0;font:600 9px var(--mono);letter-spacing:.12em}.cover-art{height:110px;margin:17px 0 20px;position:relative;overflow:hidden;border:1px solid #c6cff21c;border-radius:4px;background:radial-gradient(ellipse at 69% 37%,#ff8fca35,transparent 26%),linear-gradient(110deg,#181a31,#322448 55%,#152637)}.moon{position:absolute;top:18px;right:51px;width:36px;height:36px;border-radius:50%;background:linear-gradient(140deg,#ffe2ba,#e995c4);box-shadow:0 0 30px #ff9dce55}.cover-ridge{position:absolute;bottom:-1px;left:-5%;width:115%;height:70%;clip-path:polygon(0 88%,15% 57%,22% 72%,40% 34%,52% 65%,69% 20%,82% 60%,91% 42%,100% 76%,100% 100%,0 100%)}.ridge-back{background:#17192b}.ridge-front{height:49%;background:linear-gradient(110deg,#182338,#20162d);clip-path:polygon(0 68%,16% 26%,34% 65%,51% 20%,66% 70%,81% 40%,100% 79%,100% 100%,0 100%)}.cover-player{position:absolute;bottom:33px;left:47%;display:grid;place-items:center;width:27px;height:32px;color:#a4fff0;font-size:20px;filter:drop-shadow(0 0 12px #8ef5eb)}.cover-note{position:absolute;color:#ffd18a;font:18px Georgia,serif;text-shadow:0 0 12px #ffd18a}.n1{left:32%;top:25px}.n2{right:27%;top:47px}.intro-card>.eyebrow{color:var(--cyan)}h1,h2,p{margin-top:0}.intro-card h1{margin:9px 0 12px;font-size:39px;line-height:.98;letter-spacing:-.06em;font-weight:640}.intro-card h1 em{font-family:Georgia,serif;font-weight:400;color:var(--pink);letter-spacing:-.05em}.intro-copy{max-width:370px;color:#b4bacb;font-size:12px;line-height:1.65;margin:0 0 17px}.howto{display:flex;justify-content:space-between;gap:9px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;margin:15px 0 17px}.howto>span{display:flex;align-items:center;gap:3px}.howto kbd,.touch-icon{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:1px solid #cad0e42c;border-radius:3px;background:#181c2a;color:#dfe4f4;font:600 9px var(--mono)}.touch-icon{font-size:13px;color:var(--cyan)}.howto small{margin-left:4px;color:#959cb2;font:600 8px var(--mono);letter-spacing:.05em}.primary-button{width:100%;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:4px;background:var(--cyan);color:#091017;padding:14px 16px;font:700 10px var(--mono);letter-spacing:.13em;cursor:pointer;transition:filter .18s,transform .18s}.primary-button:hover{filter:brightness(1.09);transform:translateY(-1px)}.primary-button span{font-size:15px}.rights-note{margin:12px 0 0;text-align:center;color:#83899d;font-size:9px;line-height:1.5}.end-card{width:min(470px,100%);padding:36px;border:1px solid #b8c6ea28;border-radius:9px;background:#101421f2;text-align:center;box-shadow:0 22px 90px #0008}.end-glyph{font-size:39px;color:var(--cyan);text-shadow:0 0 32px #8ef5eb77;margin-bottom:13px}.end-card h2{font:400 36px Georgia,serif;margin:10px 0}.end-card .intro-copy{margin:0 auto 20px}.run-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}.run-stats>div{padding:12px 7px;background:#ffffff06;border:1px solid var(--line);display:flex;flex-direction:column;gap:9px}.run-stats strong{font:600 16px var(--mono)}.home-link{display:inline-block;margin-top:17px;color:#b8bdd0;text-decoration:none;font-size:11px}.home-link:hover{color:var(--cyan)}.touch-controls{display:none;position:absolute;z-index:3;bottom:16px;right:16px;left:16px;justify-content:space-between;align-items:end;pointer-events:none}.move-controls{display:flex;gap:9px}.touch-controls button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:57px;height:57px;border:1px solid #e3ecff4c;border-radius:50%;background:#090c18a8;color:#fff;font:22px var(--mono);backdrop-filter:blur(6px)}.touch-controls button:active,.touch-controls button.pressed{background:#8ef5eb55;border-color:var(--cyan);transform:scale(.96)}.touch-controls .jump-control{width:76px;height:76px;border-color:#8ef5eb8c;color:var(--cyan);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:0 0 22px #8ef5eb16}.jump-control span{font:600 9px var(--mono);letter-spacing:.08em}.jump-control i{font:normal 24px sans-serif}.game-footer{display:flex;justify-content:space-between;align-items:center;min-height:43px;padding:0 17px;border-top:1px solid #ffffff0b;color:#9ba2b5;font:500 9px var(--mono);letter-spacing:.04em}.footer-left{display:flex;align-items:center}.pulse-led{width:5px;height:5px}.footer-right b{color:#f0c78f;margin-left:4px}.below-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;padding:31px 9px 26px}.below-grid article{border-top:1px solid var(--line);padding-top:17px}.below-grid .eyebrow{color:var(--pink)}.below-grid h2{font:400 17px Georgia,serif;margin:10px 0 7px}.below-grid p{margin:0;color:#a2a8b9;font-size:11px;line-height:1.7}.site-footer{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:17px 3px 24px;color:#7e8498;font:500 8px var(--mono);letter-spacing:.06em}.site-footer a{color:#a4aabe;text-decoration:none}.site-footer a:hover{color:var(--cyan)}
@media(max-width:760px){body{padding:0 12px}.topbar{height:60px}.topbar .wordmark{font-size:9px}.wordmark i{display:none}.top-actions{gap:9px}.build-tag{font-size:8px}.icon-button{padding:7px 8px;font-size:9px}.canvas-wrap{aspect-ratio:4/3;min-height:440px;max-height:75svh}.top-hud{padding:15px}.objective strong{font-size:13px}.objective #hint{font-size:9px;max-width:210px}.beat-pulse{top:70px}.beat-label{bottom:13px;left:13px;font-size:8px}.touch-controls{display:flex}.game-footer{font-size:8px;padding:0 10px}.below-grid{grid-template-columns:1fr;gap:18px;padding:24px 3px}.below-grid article{padding-top:12px}.site-footer{flex-direction:column;font-size:7px}.intro-card{padding:18px 20px}.cover-art{height:82px;margin:12px 0 14px}.intro-card h1{font-size:34px}.howto{margin:12px 0}.howto small{font-size:7px}.overlay{padding:12px}.end-card{padding:27px 20px}}
@media(max-height:600px) and (orientation:landscape){.canvas-wrap{min-height:0;aspect-ratio:16/9;max-height:calc(100svh - 105px)}.topbar{height:48px}.below-grid,.site-footer{display:none}.intro-card{padding:12px 18px;width:min(400px,100%)}.cover-art{display:none}.intro-card h1{font-size:28px;margin:5px 0}.intro-copy{margin-bottom:10px}.howto{padding:8px 0;margin:8px 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Focus and recovery additions preserve the existing scene and visual direction. */
button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffd18a;outline-offset:3px}
canvas:focus-visible{outline-offset:-4px}
.showcase-note{color:#f0f1f7;font-size:18px;line-height:1.65;letter-spacing:.01em;margin:16px 0;max-width:92ch}.showcase-note p{margin:0 0 14px}.showcase-note button{font-size:15px;min-height:48px;padding:11px 16px}.showcase-note #inputHelp{font-size:18px;color:#eef0f7;max-width:92ch}.assist-panel{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.12)}.assist-actions{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}.assist-panel #inputHelp,.assist-panel .showcase-note{max-width:620px;margin:0;color:#a9adbb;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.55}.assist-panel .showcase-note{margin-top:10px;font-size:14px;color:#858b9c}.evidence-link{margin:18px 0 24px;font-size:18px;line-height:1.6}.evidence-link a{color:#9ff7ee;text-decoration-thickness:2px;text-underline-offset:4px}.evidence-link a:visited{color:#dcb9eb}
@media(pointer:coarse){.touch-controls{display:flex}}
@media(max-width:480px){.build-tag{display:none}.top-actions{gap:5px}.wordmark{gap:5px}}

/* Opt-in single-pointer controls reuse the existing control layout. */
.single-pointer .touch-controls{display:flex}

/* Ren Rhapsody brand system: Material 3-inspired surfaces, tonal actions, and focus states. */
:root{
  --surface:#0b0d16;
  --surface-container:#141725;
  --surface-container-high:#1c2030;
  --surface-variant:#25293a;
  --on-surface:#f5f3fb;
  --on-surface-variant:#c4c5d0;
  --primary:#8cefe4;
  --on-primary:#003733;
  --secondary:#d9bce8;
  --outline:#8f909c;
  --shape-xl:28px;
  --shape-lg:20px;
  --shape-md:14px;
}
body{background:radial-gradient(900px 420px at 50% -8%,#262344 0%,#111422 52%,var(--surface) 100%);color:var(--on-surface)}
.topbar{height:80px;border-bottom-color:color-mix(in srgb,var(--outline) 24%,transparent)}
.mark{width:34px;height:34px;border-radius:12px;background:var(--surface-container);border-color:color-mix(in srgb,var(--primary) 55%,transparent);box-shadow:none}
.wordmark{letter-spacing:.12em}
.icon-button{min-height:40px;border-radius:999px;background:var(--surface-container);border:1px solid color-mix(in srgb,var(--outline) 34%,transparent);color:var(--primary);padding:0 16px;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.icon-button:hover{background:var(--surface-container-high);border-color:var(--primary);transform:translateY(-1px)}
.showcase-note{max-width:900px;color:#f0f1f7;font-size:18px;line-height:1.65;letter-spacing:.01em}
.showcase-note a{color:var(--primary);text-underline-offset:4px;text-decoration-thickness:2px}
.game-frame{border-radius:var(--shape-xl);border-color:color-mix(in srgb,var(--outline) 36%,transparent);background:var(--surface-container);box-shadow:0 24px 80px #0009}
.canvas-wrap{background:var(--surface)}
.overlay{background:linear-gradient(180deg,#090b16aa,#090b16dd)}
.intro-card,.end-card{border-radius:var(--shape-xl);background:color-mix(in srgb,var(--surface-container) 96%,transparent);border-color:color-mix(in srgb,var(--outline) 30%,transparent);box-shadow:0 18px 60px #0008}
.intro-kicker,.eyebrow,.build-tag,.game-footer,.site-footer{letter-spacing:.12em}
.intro-card h1,.end-card h2{letter-spacing:-.045em}
.primary-button{min-height:56px;border-radius:999px;background:var(--primary);color:var(--on-primary);box-shadow:none;transition:filter .2s ease,transform .2s ease}
.primary-button:hover{filter:brightness(1.06);transform:translateY(-1px)}
.secondary-button{min-height:48px;border-radius:999px;background:transparent;border:1px solid var(--outline);color:var(--on-surface);transition:background .2s ease,border-color .2s ease}
.secondary-button:hover{background:var(--surface-variant);border-color:var(--on-surface)}
.howto{border-top-color:color-mix(in srgb,var(--outline) 28%,transparent);border-bottom-color:color-mix(in srgb,var(--outline) 28%,transparent)}
kbd,.touch-icon{border-radius:8px;background:var(--surface-variant);border-color:color-mix(in srgb,var(--outline) 35%,transparent)}
.below-grid article{border-top-color:color-mix(in srgb,var(--outline) 32%,transparent)}
.below-grid h2{letter-spacing:-.025em}
.touch-controls button{border-radius:20px;background:color-mix(in srgb,var(--surface-container-high) 92%,transparent);border-color:color-mix(in srgb,var(--primary) 40%,transparent);color:var(--primary);box-shadow:none}
.touch-controls button:active{background:var(--primary);color:var(--on-primary)}
@media(max-width:760px){.topbar{height:68px}.icon-button{min-height:38px;padding:0 13px}.game-frame{border-radius:var(--shape-lg)}}