/* fonts: self hosted, OFL licensed (Anybody, Space Grotesk, Inter, JetBrains Mono) */
@font-face{font-family:Anybody;font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(/assets/fonts/anybody-var-latin-v1.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/space-grotesk-600-latin-v1.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin-v1.woff2) format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin-v1.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-500-latin-v1.woff2) format('woff2')}
/* Layout: one full bleed stage. The film runs on a canvas; the type and the page chrome float above it in fixed bands. */
:root{
  --carbon:#05090F; --hair:#1C2633; --indigo:#4F5BD5; --indigo-soft:#B4BAF5;
  --face:#EEF2F7; --body:#9AA8B8; --label:#7D8DA1; --slate:#8A9BB0;
  --f-d:Anybody,"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-h:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-b:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-m:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --extrude:.0035em .0055em #76839A,.007em .011em #5A6679,.0105em .0165em #465163,.014em .022em #36404F,.0175em .0275em #29323F,.021em .033em #1E2633;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--carbon);overflow:hidden;overscroll-behavior:none}
body{color:var(--body);font:400 16px/1.6 var(--f-b);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--f-m);font-weight:500;font-size:11px;line-height:1.6;letter-spacing:.3em;text-transform:uppercase}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block}
.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(130% 95% at 50% 48%,rgba(5,9,15,0) 52%,rgba(2,4,8,.62) 100%)}
#type{position:fixed;inset:0;pointer-events:none;overflow:hidden}

/* the rolling words: one glimpse at a time, never a sentence */
#roll{position:absolute;left:0;right:0;top:0;height:0}
.rw{position:absolute;left:50%;top:0;transform-origin:50% 80%;white-space:nowrap;font-family:var(--f-d);line-height:1;visibility:hidden;text-shadow:var(--extrude)}
.rl{display:inline-block;will-change:transform,opacity}
.rw-s .rl{margin:0 .03em}
.rsp{display:inline-block;width:.75em}

/* the lockup: laid out in world units at 112px, then mapped onto the film camera */
#title{position:absolute;left:0;top:0;transform-origin:0 0;font:800 112px/1 var(--f-d);font-stretch:125%;color:var(--face);white-space:nowrap;visibility:hidden}
.portrait #title{font-stretch:90%}
.w{position:absolute;left:0;top:0;text-shadow:var(--extrude)}
.l{display:inline-block;transform-origin:50% 60%}
.li{position:relative}
.idot{position:absolute;left:50%;width:.215em;height:.14em;margin-left:-.1075em;border-radius:.03em;background:var(--face);box-shadow:var(--extrude);transform-origin:50% 50%}
.bl{display:inline-block;width:0;height:0}

#hint{position:absolute;left:0;right:0;margin:0;text-align:center;font:500 13px/1 var(--f-b);letter-spacing:.04em;color:var(--label);opacity:0}

.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;padding:calc(max(22px,3.2vh) + env(safe-area-inset-top,0px)) 16px 0;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;margin:0;font:600 20px/1 var(--f-h);letter-spacing:-.02em;color:#fff}
.brand svg{width:32px;height:24px;flex:none}
.brand .wmk span{color:var(--slate)}
.bottom{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:0 16px calc(max(22px,3.2vh) + env(safe-area-inset-bottom,0px))}
.cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 20px;border:1px solid rgba(124,134,238,.55);border-radius:10px;background:rgba(79,91,213,.16);color:var(--face);font:500 15px/1 var(--f-b);text-decoration:none;transition:background .25s ease,border-color .25s ease}
.cta::before{content:"";width:8px;height:8px;background:var(--indigo);transform:rotate(45deg);flex:none}
.cta:hover{background:rgba(79,91,213,.3);border-color:rgba(180,186,245,.8)}
a:focus-visible,button:focus-visible{outline:2px solid var(--indigo-soft);outline-offset:4px;border-radius:4px}
.foot{display:flex;align-items:center;gap:18px;color:var(--label)}
.foot p{margin:0}
.replay{display:none;background:none;border:0;padding:14px 6px;color:var(--label);cursor:pointer}
.motion .replay{display:inline-block}
.replay:hover{color:var(--face)}
.skip{position:fixed;right:max(16px,3vw);bottom:calc(max(16px,3vh) + env(safe-area-inset-bottom,0px));min-height:44px;padding:10px 16px;background:rgba(5,9,15,.5);border:1px solid var(--hair);border-radius:8px;color:var(--label);cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s ease}
.skip.show{opacity:1;pointer-events:auto}
.skip:hover{color:var(--face);border-color:#2C3A4D}
.render .skip,.render .replay,.render #hint,.render .sound{display:none!important}
.js .top,.js .bottom{opacity:0}
@media (max-height:560px) and (orientation:landscape){.cta{padding:9px 16px;font-size:14px}.bottom{gap:10px}}
.nojs{position:fixed;inset:0;display:grid;place-items:center;margin:0;text-align:center;font:800 clamp(40px,8vw,120px)/1 var(--f-d);color:var(--face)}

/* play with sound: a playback control, so it stays put while the page chrome loops */
.sound{position:fixed;top:calc(max(14px,2.2vh) + env(safe-area-inset-top,0px));right:max(16px,3vw);display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;background:rgba(5,9,15,.55);border:1px solid var(--hair);border-radius:10px;color:var(--label);cursor:pointer;transition:color .25s ease,border-color .25s ease}
.sound:hover{color:var(--face);border-color:#2C3A4D}
.sound svg{width:16px;height:16px;flex:none}
.sound[hidden],.sound .i-on,.sound.on .i-off{display:none}
.sound.on .i-on{display:block}
.sound.on{color:var(--face);border-color:rgba(124,134,238,.55)}
@media (max-width:620px){.sound{width:44px;padding:0;justify-content:center}.sound .sl{display:none}}
/* 404 */
.nf{position:fixed;inset:0;display:grid;place-items:center;padding:0 16px;text-align:center}
.nf h1{margin:18px 0 8px;font:600 clamp(28px,5vw,44px)/1.1 var(--f-h);letter-spacing:-.02em;color:var(--face)}
.nf p{margin:0 0 26px;color:var(--body)}
.nf svg{width:120px;height:auto}