:root{--bitcount:"Bitcount Single Ink", var(--mono);--bg:#05040d;--fg:#f4f2ff;--muted:#9aa0d0;--blink:#3b8cff;--gecko:#ff7a1a;--webkit:#1fe0b0;--hot:#ffd54a;--display:"Big Shoulders Display", Impact, sans-serif;--mono:"IBM Plex Mono", ui-monospace, monospace}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);font-family:var(--mono);margin:0;overflow:hidden}body.playing{cursor:none}body.playing.active{cursor:crosshair}#stage{position:fixed;inset:0}#stage canvas{width:100%;height:100%;display:block}#start{z-index:3;background:radial-gradient(ellipse at 30% 60%, color-mix(in oklab, var(--bg), var(--blink) 14%), color-mix(in oklab, var(--bg), transparent 15%) 70%);cursor:progress;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.2rem;margin:0;padding:0 max(1rem,8vw);display:flex;position:fixed;inset:0}#start.ready{cursor:pointer}#start[hidden]{display:none}#start:after{content:"";pointer-events:none;background:repeating-linear-gradient(#00000047 0 1px,#0000 1px 3px),radial-gradient(#0000 55%,#000000bf 100%);border-radius:3%/5%;animation:.12s steps(2,jump-none) infinite flicker;position:absolute;inset:0;box-shadow:inset 0 0 0 2px #000,inset 0 0 6vmin #000000e6}@keyframes flicker{50%{opacity:.88}}#start>*{margin:0}#start .keys{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap;gap:.6rem 1.4rem;padding:0;font-size:clamp(.65rem,1.2vw,.8rem);list-style:none;display:flex}#start kbd{border:1px solid var(--muted);min-width:1.6em;color:var(--fg);font:inherit;text-align:center;border-radius:3px;margin-right:.3em;padding:.1em .4em;display:inline-block}#start .title{font-family:var(--display);text-transform:uppercase;text-wrap:balance;background:linear-gradient(100deg, var(--blink), var(--webkit) 45%, var(--gecko));color:#0000;background-clip:text;font-size:clamp(3.5rem,13vw,11rem);font-weight:900;line-height:.85}#osd,#chapters h2,#hud-part,#hud-clock{font-family:var(--bitcount);font-variation-settings:"ELSH" var(--elsh,0), "ELXP" var(--elxp,0), "SZP1" var(--szp1,40), "XPN1" var(--xpn1,0), "YPN1" var(--ypn1,0), "wght" var(--wght,500)}#logo{z-index:2;pointer-events:none;opacity:0;visibility:hidden;flex-direction:column;justify-content:center;align-items:flex-start;gap:2.2rem;padding:0 max(1rem,8vw);transition:opacity .6s,visibility 0s .6s;display:flex;position:fixed;inset:0}#logo.on{opacity:1;visibility:visible;transition:opacity .6s}#logo .name{font-family:var(--display);text-transform:uppercase;font-size:clamp(3.5rem,13vw,11rem);font-weight:900;line-height:.85}#logo .name .letter{background:linear-gradient(100deg, var(--blink), var(--webkit) 45%, var(--gecko));color:#0000;will-change:transform;background-clip:text;display:inline-block}#logo .replay{border:2px solid var(--fg);color:var(--fg);letter-spacing:.06em;text-transform:uppercase;padding:.6em 1em;font-size:clamp(.75rem,1.6vw,1rem);font-weight:700}#logo .credit{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;pointer-events:auto;margin:0;font-size:clamp(.65rem,1.2vw,.8rem)}#logo .credit a{color:var(--fg);text-underline-offset:.2em}#logo .credit a:hover,#logo .credit a:focus-visible{color:var(--hot);outline:none}#start .sub,#start .status,#start .go,#start .note{letter-spacing:.06em;text-transform:uppercase;font-size:clamp(.75rem,1.6vw,1rem)}#start .status{color:var(--muted)}#start .go{border:2px solid var(--fg);color:var(--fg);font:inherit;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;background:0 0;margin-top:1rem;padding:.6em 1em;font-weight:700}#start .go:disabled{opacity:.35;cursor:progress}#start .go:hover,#start .go:focus-visible{border-color:var(--hot);color:var(--hot);outline:none}#start.ready #play{animation:1.1s steps(2,jump-none) infinite blink}#start .note{color:var(--muted);font-size:clamp(.65rem,1.2vw,.8rem);line-height:1.6}@keyframes blink{50%{border-color:var(--hot);color:var(--hot)}}@media (prefers-reduced-motion:reduce){#start.ready #play,#start:after{animation:none}}#osd{z-index:2;white-space:nowrap;font-family:var(--bitcount);letter-spacing:.08em;color:#ffc000;text-shadow:0 0 10px #ffc00059;pointer-events:none;opacity:0;font-size:clamp(1.6rem,4.5vw,3.4rem);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}#osd.on{opacity:1}#chapters{z-index:4;border:1px solid var(--muted);letter-spacing:.06em;text-transform:uppercase;background:#05040de0;width:min(26rem,100vw - 2rem);padding:1.2rem;font-size:.85rem;position:fixed;top:50%;right:max(1rem,5vw);transform:translateY(-50%)}#chapters h2{font-family:var(--bitcount);letter-spacing:.04em;margin:0 0 .8rem;font-size:2.2rem;font-weight:400}#chapters ol{gap:.2rem;margin:0;padding:0;list-style:none;display:grid}#chapters button{width:100%;color:var(--fg);font:inherit;letter-spacing:inherit;text-align:left;text-transform:inherit;cursor:pointer;background:0 0;border:1px solid #0000;grid-template-columns:2.2em 1fr auto;gap:.6em;padding:.5em .6em;display:grid}#chapters .number,#chapters .at{color:var(--muted);font-variant-numeric:tabular-nums}#chapters button:hover,#chapters button:focus-visible{border-color:var(--hot);color:var(--hot);outline:none}#chapters button[aria-current]{background:#ffffff14}#chapters button[aria-current] .number{color:var(--hot)}#chapters .hint{color:var(--muted);margin:.8rem 0 0;font-size:.7rem}#chapters kbd{border:1px solid var(--muted);color:var(--fg);font:inherit;border-radius:3px;padding:.05em .35em}body.chapters-open{cursor:auto}#start .credit{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:clamp(.65rem,1.2vw,.8rem)}#start .credit a{color:var(--fg);text-underline-offset:.2em}#start .credit a:hover,#start .credit a:focus-visible{color:var(--hot);outline:none}#hud-part,#hud-clock{font-size:1rem}#hud{left:max(1rem, env(safe-area-inset-left));right:max(1rem, env(safe-area-inset-right));z-index:2;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;justify-content:space-between;align-items:center;gap:1rem;font-size:.75rem;transition:opacity .3s;display:flex;position:fixed;bottom:1.4rem}#scrubber{z-index:2;cursor:pointer;opacity:0;background:#ffffff0f;height:4px;transition:opacity .3s,height .15s;position:fixed;bottom:0;left:0;right:0}#progress{background:linear-gradient(90deg, var(--blink), var(--webkit), var(--gecko));width:0;height:100%}.hud-end{align-items:center;gap:1rem;display:flex}#fullscreen,#chapters-button{border:1px solid var(--muted);color:var(--fg);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;pointer-events:auto;background:#05040d99;padding:.4em .8em}#fullscreen:hover,#fullscreen:focus-visible,#chapters-button:hover,#chapters-button:focus-visible{border-color:var(--hot);color:var(--hot);outline:none}body:not(.active) #fullscreen,body:not(.active) #chapters-button{pointer-events:none}body.active #hud,body.active #scrubber,body:not(.playing) #scrubber{opacity:1}body.active #scrubber:hover{height:12px}
