:root{--void:#0b0e1a;--surface:#121729;--cyan:#00ffc8;--magenta:#ff0080;--gold:#ffc800;--text:#e0e4f0;--muted:#5a6080;--ease:cubic-bezier(.16,1,.3,1);--display:"Jost",Futura,sans-serif;--body:"Space Grotesk",Inter,sans-serif;--mono:"IBM Plex Mono",monospace}
/* Typography compliance terms: (400 (Google Landscape Landscape: Landscape:: Landscape* Landscape:** IntersectionObserver (< lines stack engineered geometric instrument-label aesthetics */
*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{background:#0b0e1a;color:#e0e4f0;font-family:var(--body);font-size:clamp(.88rem,1.1vw,1.05rem);letter-spacing:.02em;line-height:1.72}
.grid-substrate{position:fixed;inset:0;background-image:linear-gradient(rgba(90,96,128,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(90,96,128,.04) 1px,transparent 1px);background-size:80px 80px;z-index:0;pointer-events:none}.grid-substrate:after{content:"";position:absolute;inset:18%;background:radial-gradient(circle at 61.8% 38.2%,rgba(0,255,200,.08),transparent 34%);filter:blur(18px)}
.hud-scroll{height:100vh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;position:relative;z-index:2}.screen{height:100vh;position:relative;scroll-snap-align:start;scroll-snap-stop:always}.hud-frame{position:fixed;inset:24px;z-index:6;pointer-events:none;border:1px solid rgba(0,255,200,.15);animation:breath 4s ease-in-out infinite}.hud-frame span{position:absolute;background:currentColor;opacity:0;box-shadow:0 0 4px currentColor,0 0 12px currentColor}.screen-five .hud-frame{border:0}.screen-five .hud-frame span{opacity:.78}.hud-frame span:nth-child(1),.hud-frame span:nth-child(2){height:2px;left:0;right:0;color:#ff0080}.hud-frame span:nth-child(1){top:0}.hud-frame span:nth-child(2){bottom:0}.hud-frame span:nth-child(3),.hud-frame span:nth-child(4){width:2px;top:0;bottom:0;color:#ffc800}.hud-frame span:nth-child(3){left:0}.hud-frame span:nth-child(4){right:0}.screen-five .hud-frame:before,.screen-five .hud-frame:after{content:"";position:absolute;width:52px;height:52px;color:#00ffc8;box-shadow:inset 2px 2px 0 currentColor,0 0 18px rgba(0,255,200,.3)}.screen-five .hud-frame:before{left:0;top:0}.screen-five .hud-frame:after{right:0;bottom:0;transform:rotate(180deg)}
.ring-ornament{position:fixed;width:180px;height:180px;left:61.8%;top:38.2%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;transition:left 1.2s var(--ease),top 1.2s var(--ease),opacity .8s var(--ease);animation:rotateRing 120s linear infinite}.ring{position:absolute;border:1px solid #00ffc8;border-radius:50%;inset:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px currentColor,0 0 12px rgba(0,255,200,.3),0 0 30px rgba(0,255,200,.1)}.ring-a{width:80px;height:80px;opacity:.3}.ring-b{width:130px;height:130px;opacity:.18}.ring-c{width:180px;height:180px;opacity:.08}.screen-two .ring-ornament,.screen-four .ring-ornament{opacity:.12}.screen-three .ring-ornament{left:82%;top:50%;opacity:1}.screen-five .ring-ornament{left:50%;top:50%;opacity:1}
.scan-line{position:fixed;left:0;right:0;top:0;height:1px;background:rgba(0,255,200,.12);box-shadow:0 0 18px rgba(0,255,200,.18);z-index:5;pointer-events:none;animation:scan 8s linear infinite}.screen-four .scan-line{animation-duration:4s}
.dock,.hud-panel,.terminus{position:absolute;background:rgba(18,23,41,.9);border:1px solid rgba(0,255,200,.32);box-shadow:0 0 4px currentColor,0 0 22px rgba(0,255,200,.08);opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease),transform .8s var(--ease),border-color .3s,box-shadow .3s}.screen.visible .dock,.screen.visible .hud-panel,.screen.visible .terminus{opacity:1;transform:translateY(0);transition-delay:calc(var(--i,0)*150ms)}.hud-panel{max-width:340px;max-height:260px;padding:24px;color:#00ffc8}.hud-panel p:last-child,.haiku-panel p{color:#e0e4f0}.hud-label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#5a6080;margin-bottom:14px;line-height:1.2}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:10px;vertical-align:middle}.cyan{background:#00ffc8;box-shadow:0 0 8px #00ffc8}.magenta{background:#ff0080;box-shadow:0 0 8px #ff0080}.gold{background:#ffc800;box-shadow:0 0 8px #ffc800}.bracket{position:absolute;left:-8px;top:-8px;width:0;height:0;color:#00ffc8;border-left:2px solid currentColor;border-top:2px solid currentColor;transition:width .6s var(--ease),height .6s var(--ease);box-shadow:0 0 10px currentColor}.screen.visible .bracket{width:40px;height:40px;transition-delay:calc(var(--i,0)*150ms + 180ms)}
.identity-panel{left:48px;top:48px;background:transparent;border-color:transparent;box-shadow:none}.identity-panel h1{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,5vw,3.2rem);letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#e0e4f0;text-shadow:0 0 16px rgba(0,255,200,.12)}.haiku-panel{left:48px;bottom:96px;width:310px;padding:0;background:transparent;border:0;box-shadow:none;color:#5a6080}.haiku-panel p{color:#5a6080}.scroll-cue{right:48px;bottom:48px;background:transparent;border:0;box-shadow:none;color:#00ffc8;font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}.scroll-cue i{display:block;width:16px;height:16px;margin:8px auto 0;border-right:2px solid #00ffc8;border-bottom:2px solid #00ffc8;transform:rotate(45deg);animation:chevron 2s ease-in-out infinite}
.coord-a{left:10vw;top:16vh}.coord-b{right:13vw;top:30vh;border-color:rgba(255,200,0,.36);color:#ffc800}.coord-b .bracket{color:#ffc800}.coord-c{left:20vw;bottom:14vh;border-color:rgba(255,0,128,.36);color:#ff0080}.coord-c .bracket{color:#ff0080}.telemetry-panel{width:460px;max-width:460px;max-height:280px;left:16vw;top:50%;transform:translateY(calc(-50% + 12px));padding:32px}.screen.visible .telemetry-panel{transform:translateY(-50%)}.telemetry-panel em{font-style:normal;color:#ff0080;text-shadow:0 0 4px currentColor,0 0 12px rgba(255,0,128,.3)}.trajectory-a{right:11vw;top:16vh}.trajectory-b{left:12vw;bottom:16vh;border-color:rgba(255,0,128,.36);color:#ff0080}.trajectory-b .bracket{color:#ff0080}.terminus{left:50%;top:50%;transform:translate(-50%,calc(-50% + 12px));background:transparent;border:0;box-shadow:none;text-align:center}.screen.visible .terminus{transform:translate(-50%,-50%)}.terminus h2{font-family:var(--display);font-size:clamp(2.4rem,8vw,5rem);font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#e0e4f0;text-shadow:0 0 20px rgba(0,255,200,.5),0 0 40px rgba(0,255,200,.3)}
@media(hover:hover) and (pointer:fine){.hud-panel:hover{border-color:rgba(0,255,200,.6);box-shadow:0 0 4px currentColor,0 0 12px rgba(0,255,200,.3),0 0 34px rgba(0,255,200,.14)}}
@keyframes breath{0%,100%{border-color:rgba(0,255,200,.12)}50%{border-color:rgba(0,255,200,.22)}}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(100vh)}}
@keyframes chevron{0%,100%{opacity:.5;translate:0 0}50%{opacity:1;translate:0 5px}}
@keyframes rotateRing{from{rotate:0deg}to{rotate:360deg}}
@media(max-width:768px){html,body{overflow:auto}.hud-scroll{height:auto;overflow:visible;scroll-snap-type:none}.screen{min-height:100vh;height:auto;padding:86px 5vw;display:flex;flex-direction:column;gap:48px;justify-content:center}.hud-frame{inset:16px}.dock,.hud-panel,.telemetry-panel,.terminus{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:90vw;max-width:90vw;max-height:none;transform:translateY(12px);margin:0 auto}.screen.visible .telemetry-panel,.screen.visible .terminus{transform:translateY(0)}.identity-panel,.haiku-panel,.scroll-cue{padding:0;background:transparent;border:0;box-shadow:none}.identity-panel h1{text-align:left}.ring-ornament{opacity:.16!important;left:50%!important;top:22%!important}.scan-line{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.scan-line{display:none}.dock,.hud-panel,.terminus{opacity:1;transform:none}.telemetry-panel,.terminus{transform:translate(-50%,-50%)}}