:root{--bg:#030407;--fg:#f4f1e9;--muted:#9ca2ad;--accent:#8de8d1}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:Arial,Helvetica,sans-serif;overscroll-behavior:none}body{overflow-x:hidden}#webgl{position:fixed;inset:0;z-index:0}canvas{display:block;width:100%;height:100%}
main{position:relative;z-index:2}.chapter{height:180vh;position:relative;pointer-events:none}.hero{height:200vh}.finale{height:170vh}.copy{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:8vw;mix-blend-mode:screen;will-change:transform,opacity,filter}.eyebrow{font-size:10px;letter-spacing:.34em;color:var(--accent);margin:0 0 24px}.copy h1,.copy h2{font-weight:700;letter-spacing:-.075em;line-height:.78;margin:0;text-transform:uppercase}.copy h1{font-size:clamp(72px,15vw,240px)}.copy h1 span{display:block}.copy h2{font-size:clamp(64px,11vw,190px)}.copy em{font-style:normal;-webkit-text-stroke:1px rgba(244,241,233,.55);color:transparent}.copy p:not(.eyebrow){font-size:clamp(12px,1.2vw,17px);letter-spacing:.13em;line-height:1.6;color:#c9cbd0;max-width:520px}.hero-copy .sub{margin-top:28px}.portal-copy{align-items:flex-end;text-align:right}.portal-copy p{margin-left:auto}.side-copy{width:62vw}.center-copy{text-align:center;align-items:center}.center-copy p{margin-inline:auto}.finale-copy{text-align:center;align-items:center}.finale-copy h2{font-size:clamp(100px,24vw,430px);letter-spacing:-.11em}.finale-copy p{text-align:center}
.hud{position:fixed;z-index:8;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:24px 28px;font-size:10px;letter-spacing:.22em;text-transform:uppercase}.brand span{color:#686d77}.status{display:flex;align-items:center;gap:9px;color:#9aa0aa}.status i{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.scroll-cue,.hint,.chapter-no{position:fixed;z-index:8;font-size:9px;letter-spacing:.24em;color:#8d939d}.scroll-cue{bottom:30px;left:28px}.scroll-cue b{font-size:18px;margin-left:8px;color:var(--fg)}.hint{bottom:30px;right:28px}.chapter-no{right:28px;top:50%;font-size:34px;font-weight:700;letter-spacing:-.05em;color:rgba(255,255,255,.18)}
.progress{position:fixed;z-index:9;left:0;top:0;width:2px;height:100vh;background:rgba(255,255,255,.05)}.progress span{display:block;width:100%;height:0;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.noise,.vignette,.flash,.letterbox{position:fixed;pointer-events:none}.noise{z-index:5;inset:-60%;width:220%;height:220%;opacity:.055;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='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");animation:grain .18s steps(2) infinite}.vignette{z-index:4;inset:0;background:radial-gradient(circle at 50% 45%,transparent 25%,rgba(0,0,0,.2) 60%,rgba(0,0,0,.82) 120%)}.flash{z-index:7;inset:0;background:white;opacity:0}.letterbox{z-index:6;left:0;right:0;height:7vh;background:#000}.letterbox.top{top:0}.letterbox.bottom{bottom:0}
.project-labels{position:sticky;top:0;height:100vh;display:grid;place-items:center;opacity:.28}.project-labels span{position:absolute;font-size:9px;letter-spacing:.25em}.project-labels span:nth-child(1){left:18%;top:35%}.project-labels span:nth-child(2){right:18%;top:26%}.project-labels span:nth-child(3){left:26%;bottom:23%}.project-labels span:nth-child(4){right:26%;bottom:34%}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(2%,-3%)}50%{transform:translate(-4%,2%)}75%{transform:translate(3%,4%)}100%{transform:translate(-2%,-1%)}}
@media (max-width:700px){.chapter{height:150vh}.hero{height:175vh}.copy{padding:9vw}.portal-copy{align-items:flex-start;text-align:left}.portal-copy p{margin-left:0}.side-copy{width:100%}.hud{padding:20px 18px}.status{display:none}.scroll-cue{left:18px;bottom:20px}.hint{right:18px;bottom:20px}.chapter-no{right:18px}.letterbox{height:4vh}.copy h1{font-size:23vw}.copy h2{font-size:18vw}.finale-copy h2{font-size:28vw}.noise{opacity:.035}}
@media (prefers-reduced-motion:reduce){.noise{animation:none}}