:root{--cyan:#75efff;--violet:#a77cff;--amber:#ffb45d;--ink:#030207;--glass:rgba(8,7,17,.68);--line:rgba(255,255,255,.17)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:#f7f5ff;font-family:Inter,system-ui,sans-serif}button,a{font:inherit}button{color:inherit}#stage,#stage canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#stage{background:radial-gradient(circle at 50% 42%,#15102c,#030207 65%)}
.grain{position:fixed;z-index:2;inset:-60%;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");animation:grain .25s steps(2) infinite}#fade{position:fixed;z-index:19;inset:0;background:#000;opacity:0;pointer-events:none;will-change:opacity}
.topbar{position:fixed;z-index:8;top:0;left:0;right:0;height:74px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;gap:24px;background:linear-gradient(#030207f2,transparent)}.brand{color:white;text-decoration:none;font:600 11px JetBrains Mono,monospace;letter-spacing:.08em}.brand b{color:var(--cyan)}.quality,.runtime{font:10px JetBrains Mono,monospace;color:#9995aa;letter-spacing:.08em}.quality{margin-left:auto}.runtime{white-space:nowrap}
.chapter{position:fixed;z-index:7;left:clamp(18px,4vw,64px);top:15vh;max-width:min(590px,77vw);text-shadow:0 3px 20px #000,0 1px 4px #000;transition:opacity .4s,transform .4s}.chapter.out{opacity:0;transform:translateY(-12px)}.kicker{font:600 10px JetBrains Mono,monospace;color:var(--cyan);letter-spacing:.18em}.chapter h1{font-size:clamp(34px,5vw,66px);font-weight:500;line-height:.92;letter-spacing:-.058em;margin:13px 0 12px;max-width:750px}.chapter p{font-size:14px;line-height:1.58;color:#d7d4df;max-width:500px;margin:0}
.cue{position:fixed;z-index:8;top:15vh;right:clamp(18px,4vw,64px);max-width:30vw;padding:10px 0 10px 19px;border-left:2px solid var(--amber);font:600 clamp(11px,1.2vw,14px) JetBrains Mono,monospace;letter-spacing:.1em;color:#fff4df;text-shadow:0 2px 9px #000;transition:opacity .3s,transform .3s}.cue.hidden{opacity:0;transform:translateX(12px)}.captions{position:fixed;z-index:9;left:50%;bottom:88px;transform:translateX(-50%);width:min(850px,88vw);min-height:46px;padding:12px 20px;border:1px solid var(--line);border-radius:12px;background:rgba(3,3,9,.75);backdrop-filter:blur(14px);font-size:clamp(13px,1.4vw,16px);line-height:1.5;text-align:center;text-shadow:0 2px 7px #000}
.controls{position:fixed;z-index:11;left:50%;bottom:27px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;white-space:nowrap}.control,.controls #VRButton{position:static!important;width:auto!important;height:auto!important;min-height:36px!important;margin:0!important;padding:10px 13px!important;border:1px solid var(--line)!important;border-radius:6px!important;background:var(--glass)!important;color:#eee!important;font:600 9px JetBrains Mono,monospace!important;letter-spacing:.08em!important;opacity:1!important;backdrop-filter:blur(12px);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}.control:hover,.controls #VRButton:hover{border-color:var(--cyan)!important;background:rgba(20,29,41,.9)!important;transform:translateY(-1px)}.control:focus-visible,.controls #VRButton:focus-visible,#start:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.control.icon{font-size:14px!important;padding-inline:13px!important}.control.next{border-color:rgba(117,239,255,.4)!important;color:#c7faff!important;background:linear-gradient(135deg,rgba(10,49,61,.82),rgba(34,16,64,.82))!important}.timeline{position:fixed;z-index:10;left:0;bottom:0;width:100%;height:4px;background:rgba(255,255,255,.08)}#progress{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--amber));box-shadow:0 0 12px var(--cyan)}#ticks{position:absolute;inset:0;display:grid;grid-template-columns:repeat(16,1fr)}#ticks i{border-right:1px solid rgba(255,255,255,.18)}.counter{position:fixed;z-index:7;right:clamp(18px,4vw,64px);bottom:36px;font:10px JetBrains Mono,monospace;color:#b8b3c5;letter-spacing:.1em}.desktop-hint{position:fixed;z-index:7;left:clamp(18px,4vw,64px);bottom:38px;font:9px JetBrains Mono,monospace;color:#777383;letter-spacing:.08em}
.intro{position:fixed;z-index:30;inset:0;display:grid;grid-template-columns:minmax(240px,.85fr) minmax(420px,1.15fr);background:radial-gradient(circle at 25% 48%,#1f1742 0,#090714 33%,#030207 70%);transition:opacity .8s,visibility .8s}.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}.intro-art{position:relative;overflow:hidden}.intro-art:before,.intro-art:after,.intro-art span{content:"";position:absolute;border:1px solid rgba(117,239,255,.2);border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.intro-art:before{width:12vw;height:12vw;background:radial-gradient(circle,#fff 0 2%,#7df4ff 3%,#7c52ff 11%,transparent 42%);box-shadow:0 0 80px #6e49ff}.intro-art:after{width:34vw;height:34vw;animation:orbit 18s linear infinite}.intro-art span:nth-child(1){width:25vw;height:8vw;transform:translate(-50%,-50%) rotate(22deg)}.intro-art span:nth-child(2){width:31vw;height:13vw;transform:translate(-50%,-50%) rotate(-28deg)}.intro-art span:nth-child(3){width:2px;height:70vh;border:0;background:linear-gradient(transparent,var(--cyan),transparent);opacity:.38}.intro-copy{display:flex;flex-direction:column;justify-content:center;padding:8vw;max-width:760px}.eyebrow{font:600 10px JetBrains Mono,monospace;color:var(--cyan);letter-spacing:.18em}.intro h2{font-size:clamp(74px,13vw,180px);font-weight:500;letter-spacing:-.1em;line-height:.72;margin:50px 0 40px}.intro h2 span{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.65)}.intro p{font-size:clamp(14px,1.4vw,18px);line-height:1.65;color:#c7c2d1;max-width:610px;margin:0 0 32px}.intro #start{align-self:flex-start;border:1px solid rgba(117,239,255,.5);border-radius:5px;background:linear-gradient(135deg,#d8fbff,#a99bff);color:#080610;padding:15px 21px;font:600 11px JetBrains Mono,monospace;letter-spacing:.1em;cursor:pointer}.loading,.intro-meta{font:9px JetBrains Mono,monospace;letter-spacing:.1em;color:#817d8c;margin-top:17px}.intro-meta{margin-top:8px;color:#5f5b69}
.fatal{position:fixed;z-index:50;inset:0;background:#05030a;place-items:center;padding:25px}.fatal:not([hidden]){display:grid}.fatal>div{max-width:560px;border:1px solid #50334e;padding:42px;background:#0d0812}.fatal small{font:10px JetBrains Mono;color:#ff7898;letter-spacing:.15em}.fatal h2{font-size:42px;letter-spacing:-.04em;margin:15px 0}.fatal p{color:#bbb3c3;line-height:1.6}.fatal button,.fatal a{display:inline-block;margin:16px 14px 0 0;padding:12px;border:1px solid #7f637d;background:transparent;color:white;text-decoration:none;font:10px JetBrains Mono;cursor:pointer}
body.xr .chapter,body.xr .cue,body.xr .desktop-hint{opacity:0;pointer-events:none}body.captions-off .captions{display:none}body[data-status="loading"] #stage{cursor:progress}body[data-status="ready"] #stage{cursor:crosshair}
@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes grain{0%{transform:translate(0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}}
@media(max-width:850px){.runtime,.quality,.desktop-hint{display:none}.intro{grid-template-columns:1fr}.intro-art{position:absolute;inset:0;opacity:.5}.intro-copy{position:relative;padding:9vw}.intro h2{margin:42px 0 32px}.chapter p{display:none}.cue{top:auto;right:16px;bottom:142px;max-width:55vw}.counter{display:none}}
@media(max-width:620px){.topbar{height:58px}.chapter{top:11vh}.chapter h1{font-size:36px}.captions{bottom:77px;padding:10px 13px}.controls{bottom:19px;gap:4px}.control,.controls #VRButton{padding:8px!important;font-size:8px!important}.control.icon{display:none}.intro h2{font-size:27vw}.intro p{line-height:1.5}.intro-copy{justify-content:flex-end;padding-bottom:13vh}.cue{display:none}}
@media(prefers-reduced-motion:reduce){.grain,.intro-art:after{animation:none}.chapter,.cue,.intro{transition:none}}