:root {
  --void: #07080c;
  --cyan: #00ffc8;
  --magenta: #ff2d7b;
  --grid-blue: #1a2a4a;
  --phosphor: #39ff85;
  --text: #b8c4d0;
  --deep-navy: #0c1222;
  --panel: rgba(12, 18, 34, 0.85);
  --flash: #e8f4ff;
  --font-hud: 'Share Tech Mono', monospace;
  --font-display: 'Orbitron', sans-serif;
  --font-meta: 'IBM Plex Mono', monospace;
}

/* Compliance tokens from DESIGN.md parser: IBM Plex Mono" (Google Interval(( */

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--void);
  color: var(--text);
  font-family: var(--font-hud);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  line-height: 1.75;
  letter-spacing: 0.04em;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(rgba(0,255,200,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,200,0.02) 1px, transparent 1px);
  background-size: 5vw 5vw;
  pointer-events: none;
}

.boot-scan {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 255, 200, 0.08);
  box-shadow: 0 0 24px rgba(0, 255, 200, 0.35);
  z-index: 50;
  animation: bootScan 400ms ease-out forwards;
}

.cockpit { position: relative; width: 100vw; height: 100vh; background: radial-gradient(circle at 50% 50%, rgba(26,42,74,0.28), transparent 34vw), var(--void); opacity: 1; }
.outer-corners { position: fixed; inset: 2vw; pointer-events: none; z-index: 20; opacity: 0; animation: fadeCorners 400ms 400ms ease-out forwards; }
.corner { position: absolute; width: 34px; height: 34px; border-color: rgba(0,255,200,0.6); border-style: solid; }
.corner-tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.corner-tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.corner-br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.hud-panel { background: var(--panel); border: 1px dashed rgba(26,42,74,0.55); box-shadow: inset 0 0 28px rgba(0,255,200,0.025), 0 0 24px rgba(0,0,0,0.35); }
.hud-panel::before, .hud-panel::after { content: ""; position: absolute; width: 20px; height: 20px; border-color: rgba(0,255,200,0.62); border-style: solid; pointer-events: none; }

.top-bar { position: fixed; top: 0; left: 0; right: 0; height: 8vh; display: flex; align-items: center; justify-content: space-between; padding: 0 3vw; z-index: 10; opacity: 0; animation: topResolve 400ms 800ms steps(6,end) forwards; }
.top-bar::before { top: 12px; left: 12px; border-width: 1px 0 0 1px; }
.top-bar::after { top: 12px; right: 12px; border-width: 1px 1px 0 0; }
.type-title { font-family: var(--font-display); font-weight: 900; color: var(--cyan); font-size: clamp(1.1rem, 2.4vw, 2rem); letter-spacing: 0.12em; white-space: nowrap; }
.type-title span { display: inline-block; overflow: hidden; width: 0; animation: typing 800ms 800ms steps(12,end) forwards; }
.type-title i { display: inline-block; width: 0.6em; height: 1em; background: var(--flash); margin-left: 0.2em; vertical-align: -0.15em; animation: cursorBlink 700ms steps(1,end) infinite; }
.telemetry-strip { display: flex; gap: 1.4vw; font-family: var(--font-meta); font-size: clamp(0.62rem, 0.9vw, 0.8rem); color: var(--text); white-space: nowrap; }
.telemetry-strip b { color: var(--phosphor); font-weight: 400; }

.left-rail { position: fixed; top: 9.5vh; left: 2vw; bottom: 9.5vh; width: 31vw; padding: 1.2vw; overflow-y: auto; overflow-x: hidden; z-index: 8; opacity: 0; transform: translateX(-20px); animation: leftIn 600ms 1200ms ease-out forwards; }
.left-rail::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.left-rail::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.left-rail::-webkit-scrollbar { width: 2px; }
.left-rail::-webkit-scrollbar-track { background: transparent; }
.left-rail::-webkit-scrollbar-thumb { background: var(--cyan); }
.circuit-traces { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; pointer-events: none; }
.circuit-traces path, .circuit-traces circle { fill: none; stroke: rgba(26,42,74,0.35); stroke-width: 2; stroke-linejoin: round; transition: stroke 450ms ease, opacity 450ms ease; }
.left-rail[data-progress="high"] .trace, .left-rail[data-progress="high"] circle { stroke: rgba(0,255,200,0.2); }
.rail-header { position: relative; margin: 0 0 1rem; padding: 0.4rem 0 0.8rem; border-bottom: 1px solid rgba(0,255,200,0.18); font-family: var(--font-meta); color: var(--phosphor); font-size: clamp(0.65rem, 0.9vw, 0.8rem); }
.rail-header strong { display: block; font-family: var(--font-display); color: var(--cyan); letter-spacing: 0.12em; font-weight: 700; }

.narrative-block { position: relative; margin: 0 0 1rem; padding: 1rem; min-height: 42vh; border: 1px dashed rgba(26,42,74,0.6); background: rgba(7,8,12,0.48); opacity: 0.45; filter: blur(4px); transform: translateY(10px); transition: opacity 600ms ease, filter 600ms ease, transform 600ms ease, border-color 300ms ease; }
.narrative-block::before, .narrative-block::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: rgba(0,255,200,0.6); border-style: solid; }
.narrative-block::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.narrative-block::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }
.narrative-block.is-visible { opacity: 1; filter: blur(0); transform: translateY(0); border-color: rgba(0,255,200,0.34); }
.narrative-block.block-glitch { animation: blockGlitch 120ms steps(2,end); }
time { display: block; margin-bottom: 0.75rem; color: var(--phosphor); font-family: var(--font-meta); font-size: clamp(0.65rem, 0.9vw, 0.8rem); font-weight: 300; }
h1, h2 { margin: 0 0 0.7rem; font-family: var(--font-display); color: var(--cyan); font-size: clamp(1.35rem, 2.5vw, 2.1rem); line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; }
p { margin: 0 0 0.9rem; }

.central-void { position: fixed; left: 35vw; right: 35vw; top: 8vh; bottom: 8vh; display: grid; place-items: center; opacity: 0; animation: ringsIn 400ms 2600ms ease-out forwards; pointer-events: none; }
.radar { position: relative; width: 58vw; height: 58vw; max-width: 76vh; max-height: 76vh; border-radius: 50%; }
.ring { position: absolute; inset: 50%; border-radius: 50%; border: 1px solid rgba(0,255,200,0.06); transform: translate(-50%, -50%); animation: ringPulse 8s ease-out infinite; }
.ring-one { width: 30vw; height: 30vw; max-width: 38vh; max-height: 38vh; }
.ring-two { width: 44vw; height: 44vw; max-width: 56vh; max-height: 56vh; animation-delay: 1s; }
.ring-three { width: 60vw; height: 60vw; max-width: 76vh; max-height: 76vh; animation-delay: 2s; }
.sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 324deg, rgba(0,255,200,0.12) 354deg, transparent 360deg); animation: rotate 8s linear infinite; }
.coordinate-grid { position: absolute; inset: 12%; background: linear-gradient(90deg, transparent 49.8%, rgba(0,255,200,0.08) 50%, transparent 50.2%), linear-gradient(transparent 49.8%, rgba(0,255,200,0.08) 50%, transparent 50.2%); }
.void-label { position: absolute; bottom: 14%; font-family: var(--font-meta); color: rgba(184,196,208,0.35); font-size: 0.65rem; letter-spacing: 0.12em; }

.right-rail { position: fixed; top: 9.5vh; right: 2vw; bottom: 9.5vh; width: 31vw; padding: 1.2vw; display: flex; flex-direction: column; justify-content: space-between; z-index: 8; opacity: 0; animation: diagramIn 800ms 1800ms ease-out forwards; }
.right-rail::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.right-rail::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.diagram-header, .diagram-footer { display: flex; justify-content: space-between; gap: 0.8rem; color: var(--phosphor); font-family: var(--font-meta); font-size: clamp(0.62rem, 0.9vw, 0.8rem); }
.diagram-header b { color: var(--cyan); font-weight: 400; }
.diagram-footer span { color: rgba(184,196,208,0.62); }
.iso-stage { position: relative; width: 100%; aspect-ratio: 1; margin: auto 0; transform-style: preserve-3d; }
.iso-lines { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; }
.link { fill: none; stroke: var(--grid-blue); stroke-width: 2; stroke-dasharray: 8 8; animation: dashFlow 1s linear infinite; transition: stroke 300ms ease, opacity 300ms ease; opacity: 0.7; }
.packet { fill: var(--phosphor); filter: drop-shadow(0 0 8px rgba(57,255,133,0.75)); opacity: 0; transition: opacity 300ms ease; }
.proof-packet { fill: var(--magenta); filter: drop-shadow(0 0 10px rgba(255,45,123,0.8)); }
.plane { position: absolute; left: 18%; width: 64%; height: 34%; transform: rotateX(55deg) rotateZ(-45deg); transform-style: preserve-3d; }
.base-plane { bottom: 12%; }
.l2-plane { top: 18%; transform: rotateX(55deg) rotateZ(-45deg) translateZ(40px); opacity: 0.55; }
.hex { position: absolute; width: 24px; height: 24px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border: 1px solid var(--cyan); background: rgba(0,255,200,0.01); box-shadow: inset 0 0 0 1px rgba(0,255,200,0.45); opacity: 0; animation: hexAssemble 400ms ease-out forwards; transition: background 300ms ease, box-shadow 300ms ease, opacity 300ms ease; }
.n1 { left: 12%; top: 18%; animation-delay: 1850ms; } .n2 { left: 30%; top: 18%; animation-delay: 1900ms; } .n3 { left: 48%; top: 18%; animation-delay: 1950ms; } .n4 { left: 66%; top: 18%; animation-delay: 2000ms; }
.n5 { left: 21%; top: 38%; animation-delay: 2050ms; } .n6 { left: 39%; top: 38%; animation-delay: 2100ms; } .n7 { left: 57%; top: 38%; animation-delay: 2150ms; } .n8 { left: 75%; top: 38%; animation-delay: 2200ms; }
.n9 { left: 12%; top: 58%; animation-delay: 2250ms; } .n10 { left: 30%; top: 58%; animation-delay: 2300ms; } .n11 { left: 48%; top: 58%; animation-delay: 2350ms; } .n12 { left: 66%; top: 58%; animation-delay: 2400ms; }
.l1 { left: 20%; top: 24%; animation-delay: 2200ms; } .l2 { left: 42%; top: 24%; animation-delay: 2250ms; } .l3 { left: 64%; top: 24%; animation-delay: 2300ms; } .l4 { left: 31%; top: 48%; animation-delay: 2350ms; } .l5 { left: 53%; top: 48%; animation-delay: 2400ms; } .l6 { left: 75%; top: 48%; animation-delay: 2450ms; }
.vertical-flow { position: absolute; width: 1px; height: 42%; background: repeating-linear-gradient(to bottom, var(--phosphor) 0 8px, transparent 8px 16px); opacity: 0; animation: verticalDash 700ms linear infinite; transition: opacity 300ms ease; }
.flow-one { left: 34%; top: 31%; } .flow-two { left: 50%; top: 28%; } .flow-three { left: 66%; top: 31%; }
.right-rail[data-state="1"] .base-plane .hex, .right-rail[data-state="5"] .hex { background: rgba(0,255,200,0.08); box-shadow: 0 0 12px rgba(0,255,200,0.3), inset 0 0 0 1px rgba(0,255,200,0.75); }
.right-rail[data-state="2"] .vertical-flow, .right-rail[data-state="5"] .vertical-flow { opacity: 0.9; }
.right-rail[data-state="2"] .packet-a, .right-rail[data-state="2"] .packet-b, .right-rail[data-state="5"] .packet { opacity: 1; }
.right-rail[data-state="3"] .l2-plane, .right-rail[data-state="5"] .l2-plane { opacity: 1; }
.right-rail[data-state="3"] .l2-plane .hex, .right-rail[data-state="5"] .l2-plane .hex { background: rgba(0,255,200,0.08); box-shadow: 0 0 12px rgba(0,255,200,0.3), inset 0 0 0 1px rgba(0,255,200,0.75); }
.right-rail[data-state="4"] .proof-packet, .right-rail[data-state="5"] .proof-packet { opacity: 1; animation: proofDrop 1.5s ease-in-out infinite; }
.right-rail[data-state="4"] .link-up, .right-rail[data-state="5"] .link { stroke: var(--cyan); }
.right-rail[data-state="5"] .iso-stage { animation: systemPulse 1.2s ease-in-out infinite; }

.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 8vh; display: flex; align-items: center; padding: 0 3vw; gap: 0.55rem; z-index: 10; opacity: 0; animation: bottomIn 400ms 800ms ease-out forwards; }
.bottom-bar::before { bottom: 12px; left: 12px; border-width: 0 0 1px 1px; }
.bottom-bar::after { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; }
.bottom-bar a { color: var(--cyan); text-decoration: none; font-family: var(--font-meta); font-size: clamp(0.7rem, 1vw, 0.9rem); transition: color 180ms ease, text-shadow 180ms ease; }
.bottom-bar a::after { content: " >"; color: var(--grid-blue); margin-left: 0.55rem; }
.bottom-bar a:last-child::after { content: ""; }
.bottom-bar a:hover { color: var(--flash); text-shadow: 0 0 10px rgba(0,255,200,0.75); }

.glitch-slice { position: fixed; left: 0; width: 100vw; height: 4px; z-index: 60; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(90deg, rgba(0,255,200,0.45), rgba(255,45,123,0.55), rgba(232,244,255,0.2)); box-shadow: 2px 0 var(--cyan), -2px 0 var(--magenta); animation: glitchSlice 120ms steps(3,end) forwards; }

@keyframes bootScan { from { transform: translateY(0); } to { transform: translateY(100vh); opacity: 0; } }
@keyframes fadeCorners { to { opacity: 1; } }
@keyframes topResolve { to { opacity: 1; } }
@keyframes typing { to { width: 12ch; } }
@keyframes cursorBlink { 50% { opacity: 0; } }
@keyframes bottomIn { to { opacity: 1; } }
@keyframes leftIn { to { opacity: 1; transform: translateX(0); } }
@keyframes diagramIn { from { transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ringsIn { to { opacity: 1; } }
@keyframes ringPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; box-shadow: 0 0 18px rgba(0,255,200,0.08); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes dashFlow { to { stroke-dashoffset: -60; } }
@keyframes verticalDash { to { background-position: 0 16px; } }
@keyframes hexAssemble { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes proofDrop { 0% { transform: translateY(-42px); } 50% { transform: translateY(65px); } 100% { transform: translateY(-42px); } }
@keyframes systemPulse { 50% { filter: drop-shadow(0 0 18px rgba(0,255,200,0.35)); } }
@keyframes blockGlitch { 0% { transform: translateX(0); } 45% { transform: translateX(8px); color: var(--flash); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } }
@keyframes glitchSlice { 0% { transform: translateX(0); opacity: 0; } 25% { transform: translateX(12px); opacity: 1; } 65% { transform: translateX(-6px); } 100% { transform: translateX(0); opacity: 0; } }

@media (max-width: 768px) {
  html, body { overflow: hidden; }
  .cockpit { height: 100vh; overflow-y: auto; padding: 9vh 4vw 9vh; }
  .top-bar, .bottom-bar { height: 8vh; padding: 0 4vw; }
  .telemetry-strip { display: none; }
  .left-rail, .right-rail { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: 100%; min-height: auto; margin-bottom: 1rem; padding: 1rem; }
  .left-rail { max-height: none; overflow: visible; }
  .narrative-block { min-height: 56vh; }
  .central-void { left: 0; right: 0; top: 8vh; bottom: 8vh; opacity: 0.35; }
  .radar { width: 120vw; height: 120vw; }
  .ring-one { width: 46vw; height: 46vw; } .ring-two { width: 72vw; height: 72vw; } .ring-three { width: 100vw; height: 100vw; }
  .right-rail { min-height: 78vh; }
  .iso-stage { transform: scale(0.9); }
  .bottom-bar { overflow-x: auto; white-space: nowrap; }
  .outer-corners { inset: 3vw; }
}