*{box-sizing:border-box}
:root{--gold:#c89a43;--gold2:#f0d38b;--mono:"IBM Plex Mono",monospace;--display:"Outfit",sans-serif}
html,body{margin:0;background:#000;color:#fff;font-family:var(--display);overflow-x:hidden}
body{min-height:600vh}
canvas#scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:#000}
.mobile-gate{display:none}
.intro,.name-sequence,.processor-copy,.final,.micro-ui,.scroll-hint{position:fixed;z-index:10;pointer-events:none}
.intro{inset:0;display:grid;place-items:center;background:#000}
.hello{font:800 clamp(110px,14vw,260px)/.8 var(--display);letter-spacing:-.075em;color:#f2f2ee;will-change:transform,filter,opacity}
.wake{position:absolute;left:50%;bottom:8vh;transform:translateX(-50%);font:500 8px var(--mono);letter-spacing:4px;color:#343434;opacity:0}
.name-sequence{left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;font:800 clamp(85px,11vw,210px)/.74 var(--display);letter-spacing:-.075em;opacity:0;mix-blend-mode:screen}
.name-sequence span:first-child{color:#ecece8}.name-sequence span:last-child{color:transparent;-webkit-text-stroke:1px rgba(240,211,139,.85)}
.processor-copy{left:7vw;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;font:800 clamp(65px,7vw,135px)/.76 var(--display);letter-spacing:-.06em;opacity:0}
.processor-copy span{display:block}.processor-copy span:nth-of-type(2){color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.45)}.processor-copy span:nth-of-type(3){color:#777}.processor-copy span:nth-of-type(4){color:var(--gold2)}.processor-copy i{font:500 16px var(--mono);color:#525252;margin-left:12px}
.final{inset:0;display:flex;flex-direction:column;justify-content:center;padding-left:8vw;background:#000;opacity:0;pointer-events:none}
.final-kicker{font:500 8px var(--mono);letter-spacing:5px;color:var(--gold);margin-bottom:20px}
.final h1{margin:0;font:800 clamp(85px,10vw,185px)/.78 var(--display);letter-spacing:-.07em}
.final h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.34)}
.final a{pointer-events:auto;display:inline-flex;align-items:center;gap:18px;width:max-content;margin-top:42px;padding:16px 20px;border:1px solid rgba(200,154,67,.25);font:600 8px var(--mono);letter-spacing:2px;color:#aaa}.final a span{color:var(--gold2)}
.micro-ui{left:2.5vw;right:2.5vw;top:2.6vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font:500 7px var(--mono);letter-spacing:2px;color:#3d3d3d;opacity:0}
.micro-left{display:flex;align-items:center;gap:12px}.micro-left b{font:800 16px var(--display);letter-spacing:-1px;color:var(--gold2)}.micro-center{color:#555}.micro-right{justify-self:end;display:flex;align-items:center;gap:10px}.micro-right>i{width:90px;height:1px;background:#151515}.micro-right>i b{display:block;width:0;height:1px;background:var(--gold2);box-shadow:0 0 10px rgba(240,211,139,.5)}
.scroll-hint{left:50%;bottom:4vh;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font:500 7px var(--mono);letter-spacing:3px;color:#444;opacity:0}.scroll-hint i{position:relative;width:65px;height:1px;background:#171717;overflow:hidden}.scroll-hint i:after{content:"";position:absolute;left:-100%;width:100%;height:1px;background:var(--gold);animation:scan 2s ease infinite}@keyframes scan{to{left:100%}}
.spacer{position:relative;z-index:-1}.spacer section{height:100vh}
body:after{content:"";position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.035;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='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media(max-width:1023px),(pointer:coarse){
 body{overflow:hidden;min-height:100vh}
 #scene,.intro,.name-sequence,.processor-copy,.final,.micro-ui,.scroll-hint,.spacer{display:none!important}
 .mobile-gate{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;justify-content:center;padding:10vw;background:#030303}
 .gate-mark{font:800 72px var(--display);letter-spacing:-5px;color:var(--gold2)}
 .mobile-gate p{margin:36px 0 14px;font:500 8px var(--mono);letter-spacing:4px;color:var(--gold)}
 .mobile-gate h1{max-width:740px;margin:0 0 22px;font:700 clamp(42px,8vw,78px)/.94 var(--display);letter-spacing:-.05em}
 .mobile-gate small{max-width:520px;color:#666;line-height:1.7}
}