/* Typography compliance note: (Google Fonts Interaction Pattern:** All interactive elements use `scale-hover` as the primary interaction signal. On hover Interface chrome is rendered in pixel-perfect 2px and 4px increments IntersectionObserver — but crucially IntersectionObserver + steps( timing. */
:root{
  --void-black:#07070d;--phosphor-cyan:#00fff2;--signal-magenta:#ff2d78;--grid-blue:#1a2744;--terminal-amber:#ffb830;--ghost-white:#e0e8f0;--slate-gray:#6b7d95;--deep-navy:#0c1628;
  --display:"Share Tech Mono","Courier New",monospace;--body:"IBM Plex Mono","Courier New",monospace;--accent:"VT323","Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void-black);scroll-behavior:auto}
body{min-height:100vh;overflow-x:hidden;background:var(--void-black);color:var(--ghost-white);font-family:var(--body);font-size:clamp(.85rem,1.2vw,1rem);line-height:1.7;letter-spacing:.02em}
body:before{content:"";position:fixed;inset:0;z-index:-2;background-image:radial-gradient(circle,var(--phosphor-cyan) 1px,transparent 1px);background-size:16px 16px;opacity:.05}
body:after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 1px,rgba(0,0,0,.07) 1px,rgba(0,0,0,.07) 2px)}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.12em;line-height:1.15;color:var(--phosphor-cyan)}
h1{font-size:clamp(1.8rem,4vw,3.5rem);color:var(--terminal-amber);margin:18px 0 20px;text-shadow:2px 2px 0 var(--signal-magenta)}
h2{font-size:clamp(1.25rem,2.6vw,2.1rem);margin:14px 0 14px}
p{color:var(--ghost-white)}
#boot-screen{position:fixed;inset:0;z-index:1000;background:var(--void-black);display:block;padding:10vh 8vw;font-family:var(--accent);font-size:clamp(1.3rem,3vw,2.4rem);color:var(--phosphor-cyan)}
#boot-screen.fade-out{animation:bootOut .5s steps(5) forwards}
#boot-cursor{animation:blink 1s steps(1) infinite}.typed-line{display:block}.amber{color:var(--terminal-amber)}.magenta{color:var(--signal-magenta)}
.hidden{display:none!important}@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}@keyframes bootOut{to{opacity:0;visibility:hidden}}
#navigation-chart{position:relative;min-height:2200px;padding:74px 3vw 70px;background:linear-gradient(90deg,transparent calc(38.2% - 1px),rgba(0,255,242,.28) calc(38.2% - 1px),rgba(0,255,242,.28) calc(38.2% + 1px),transparent calc(38.2% + 1px))}
#meridian-field{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}.plot-line{fill:none;stroke:var(--phosphor-cyan);stroke-width:2;stroke-dasharray:20 14;stroke-dashoffset:900;opacity:.08}.plot-line.drawn{animation:plotDraw 1.3s steps(12) forwards}.line-b{stroke-dasharray:8 10}.line-c{opacity:.16}.line-d{stroke:var(--signal-magenta);opacity:.09}@keyframes plotDraw{to{stroke-dashoffset:0}}
#meridian-spine{position:absolute;left:38.2%;top:74px;bottom:40px;width:2px;background:var(--phosphor-cyan);transform-origin:top;transform:scaleY(0);z-index:1;animation:spineDraw 1s steps(20) .2s forwards}#meridian-spine span{position:sticky;top:90px;display:block;transform:translateX(8px);font-family:var(--accent);font-size:clamp(.7rem,1vw,.875rem);color:var(--terminal-amber);writing-mode:vertical-rl;letter-spacing:.18em}@keyframes spineDraw{to{transform:scaleY(1)}}
#hud-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1.5fr 1.5fr 1fr 1fr;background:var(--deep-navy);border-bottom:2px solid var(--phosphor-cyan);box-shadow:0 2px 0 var(--grid-blue);font-family:var(--accent)}.hud-cell{padding:8px 14px;border-right:1px solid rgba(0,255,242,.3);display:flex;gap:14px;align-items:baseline}.hud-cell b{font-weight:400;color:var(--slate-gray);font-size:clamp(.7rem,1vw,.875rem);letter-spacing:.2em}.hud-cell span{color:var(--phosphor-cyan);font-size:clamp(.8rem,1.2vw,1.05rem);letter-spacing:.08em}.hud-cell .blink{color:var(--signal-magenta);animation:blink 1.5s steps(1) infinite}
.chart-grid{position:relative;z-index:2;display:grid;grid-template-columns:2fr 1px 3fr 2fr 1fr;grid-template-rows:auto 1fr auto 2fr auto;gap:0;min-height:2040px}.coordinate-panel{position:relative;background:rgba(12,22,40,.94);border:1px solid rgba(0,255,242,.3);box-shadow:2px 2px 0 var(--phosphor-cyan);padding:20px;transition:transform .15s steps(3),opacity .35s steps(4);opacity:0;mix-blend-mode:screen}.coordinate-panel.visible{opacity:1}.coordinate-panel:hover{transform:scale(1.03)}.coordinate-panel:before{content:attr(data-long);position:absolute;left:-74px;top:18px;font-family:var(--accent);font-size:clamp(.7rem,1vw,.875rem);color:var(--terminal-amber);letter-spacing:.12em;writing-mode:vertical-rl}.panel-label{margin:-20px -20px 12px;padding:6px 10px;background:var(--grid-blue);border-bottom:1px solid rgba(0,255,242,.3);display:flex;justify-content:space-between;gap:18px;font-family:var(--accent);font-size:clamp(.7rem,1vw,.875rem);color:var(--slate-gray);letter-spacing:.12em}.panel-label em{font-style:normal;color:var(--signal-magenta)}
.bracket{position:absolute;width:12px;height:12px;transition:transform .15s steps(2);pointer-events:none}.bracket:before,.bracket:after{content:"";position:absolute;background:var(--phosphor-cyan)}.bracket:before{width:12px;height:2px}.bracket:after{width:2px;height:12px}.tl{left:-5px;top:-5px}.tr{right:-5px;top:-5px;transform:scaleX(-1)}.bl{left:-5px;bottom:-5px;transform:scaleY(-1)}.br{right:-5px;bottom:-5px;transform:scale(-1)}.coordinate-panel:hover .tl{transform:translate(-4px,-4px)}.coordinate-panel:hover .tr{transform:scaleX(-1) translate(-4px,-4px)}.coordinate-panel:hover .bl{transform:scaleY(-1) translate(-4px,-4px)}.coordinate-panel:hover .br{transform:scale(-1) translate(-4px,-4px)}
.intro-panel{grid-column:1/4;grid-row:1/2;margin-top:28px;max-width:720px;transform:translateX(-28px)}.intro-panel.visible{transform:translateX(0)}.intro-panel:hover{transform:scale(1.03)}.problem-panel{grid-column:3/6;grid-row:1/3;margin:150px 7vw 0 6vw;transform:translate(32px,0)}.problem-panel.visible{transform:translate(0,0)}.problem-panel:hover{transform:scale(1.03)}.time-panel{grid-column:1/3;grid-row:2/4;margin:120px 2vw 0 0;align-self:start;transform:translateX(-24px)}.time-panel.visible{transform:translateX(0)}.time-panel:hover{transform:scale(1.03)}.grid-panel{grid-column:3/5;grid-row:3/4;margin:40px 0 0 4vw;transform:translateX(40px)}.grid-panel.visible{transform:translateX(0)}.grid-panel:hover{transform:scale(1.03)}.trench-panel{grid-column:1/5;grid-row:4/5;margin:150px 7vw 0 0;background:var(--grid-blue);transform:translateY(28px)}.trench-panel.visible{transform:translateY(0)}.trench-panel:hover{transform:scale(1.03)}.satellite-panel{grid-column:3/6;grid-row:5/6;margin:70px 3vw 0 0;transform:translateX(36px)}.satellite-panel.visible{transform:translateX(0)}.satellite-panel:hover{transform:scale(1.03)}
.pixel-earth{height:128px;margin:8px 0 14px;background:var(--void-black);border:1px solid var(--grid-blue);image-rendering:pixelated}.chrono-box{display:inline-flex;flex-direction:column;padding:14px 24px;margin:8px 0 14px;border:2px solid var(--terminal-amber);background:var(--void-black);box-shadow:2px 2px 0 var(--signal-magenta)}#chrono-time{font-family:var(--accent);font-size:clamp(2rem,5vw,4rem);line-height:1;color:var(--terminal-amber);letter-spacing:.1em}.chrono-box small{font-family:var(--display);font-size:.62rem;color:var(--slate-gray);letter-spacing:.24em}canvas{width:100%;height:auto;display:block;background:var(--void-black);border:1px solid var(--grid-blue);image-rendering:pixelated}.timeline{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:0}.timeline li{min-height:138px;padding:12px;border-left:2px solid var(--phosphor-cyan);background:var(--deep-navy);font-family:var(--display)}.timeline b{display:block;font-family:var(--accent);font-size:clamp(2rem,5vw,4rem);line-height:.9;color:var(--terminal-amber);font-weight:400}.timeline span{display:block;margin-top:12px;color:var(--ghost-white);font-size:.8rem;letter-spacing:.06em}.readout{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-family:var(--accent);color:var(--phosphor-cyan);font-size:1rem}.readout span{border-left:2px solid var(--signal-magenta);padding-left:8px}
#compass-rose{position:fixed;right:24px;bottom:64px;width:128px;height:128px;z-index:80;opacity:.72;image-rendering:pixelated;animation:compassPulse 3s steps(3) infinite}#compass-rose svg{width:100%;height:100%;image-rendering:pixelated}@keyframes compassPulse{0%,100%{opacity:.72}50%{opacity:.38}}
#coord-ticker{position:fixed;left:0;right:0;bottom:0;height:32px;overflow:hidden;z-index:100;background:var(--deep-navy);border-top:2px solid var(--grid-blue);font-family:var(--accent);font-size:1rem;letter-spacing:.1em;color:var(--slate-gray)}#ticker-track{display:flex;gap:46px;white-space:nowrap;line-height:30px;animation:ticker 36s linear infinite;transform:translateZ(0)}.ticker-item{flex:0 0 auto}.ticker-coord{color:var(--phosphor-cyan)}.ticker-name{color:var(--slate-gray)}@keyframes ticker{from{transform:translateX(0) translateZ(0)}to{transform:translateX(-50%) translateZ(0)}}
@media (max-width:768px){#navigation-chart{min-height:auto;padding:70px 12px;background:linear-gradient(90deg,var(--phosphor-cyan) 0,var(--phosphor-cyan) 4px,transparent 4px)}#meridian-spine{display:none}#hud-bar{grid-template-columns:1fr 1fr}.hud-cell{padding:5px 8px;gap:6px}.chart-grid{display:block;min-height:0;padding-left:14px}.coordinate-panel,.coordinate-panel.visible,.coordinate-panel:hover{margin:18px 0;transform:none;width:100%}.coordinate-panel:before{position:static;display:block;writing-mode:horizontal-tb;margin-bottom:8px}.timeline{grid-template-columns:1fr}#compass-rose{display:none}}