:root {
  --font-source-token: "(Google Fonts)";
  --void: #0a0e1a;
  --panel: #111a2f;
  --frame: #8a9bb5;
  --text: #c4d0e2;
  --cyan: #4aeadc;
  --amber: #f5b74a;
  --green: #4af5a3;
  --red: #e84a5f;
  --slate: #1a2744;
  --scanline-gap: 4px;
  --glitch-offset: 3px;
  --type-speed: 25ms;
  --phase-transition: 600ms;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }

body {
  background: var(--void);
  color: var(--text);
  font-family: "IBM Plex Mono", monospace;
  cursor: crosshair;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(74,234,220,0.08), transparent 34%),
    radial-gradient(circle at 12% 88%, rgba(26,39,68,0.38), transparent 28%),
    linear-gradient(180deg, #0a0e1a 0%, #111a2f 58%, #0a0e1a 100%);
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(transparent 0px, transparent 2px, rgba(10,14,26,0.15) 2px, rgba(10,14,26,0.15) 4px);
  pointer-events: none;
  z-index: 9999;
  animation: scanDrift 100ms steps(2) infinite;
}

.console { position: fixed; inset: 0; z-index: 1; }

.hud-frame {
  position: fixed;
  inset: 2vmin;
  border: 1px solid rgba(138,155,181,0.55);
  z-index: 50;
  pointer-events: none;
  animation: framePulse 4s ease-in-out infinite;
}

.corner { position: absolute; width: 24px; height: 24px; border-color: var(--frame); opacity: 0.9; }
.corner-tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }

.status-bar {
  position: fixed;
  top: 2vmin;
  left: 5vmin;
  right: 5vmin;
  height: 8vh;
  display: grid;
  grid-template-columns: 1fr 2.7fr 0.8fr;
  align-items: center;
  gap: 1.5vw;
  font-family: "Orbitron", monospace;
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--frame);
  border-bottom: 1px solid rgba(138,155,181,0.28);
  z-index: 20;
}

.status-coordinates { color: var(--cyan); white-space: nowrap; text-align: center; }
.status-block { color: rgba(196,208,226,0.78); }
.status-block.warning { color: var(--amber); text-align: right; }

.telemetry {
  position: fixed;
  top: 12vh;
  bottom: 16vh;
  left: 3.4vmin;
  width: min(12vw, 170px);
  border-right: 1px solid rgba(138,155,181,0.22);
  padding: 1.6vh 1vw 1.6vh 0.8vw;
  font-family: "Orbitron", monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 10;
}

.telemetry-title { color: var(--cyan); font-size: 0.66rem; margin-bottom: 2vh; writing-mode: vertical-rl; position: absolute; left: 0; top: 2vh; opacity: 0.7; }
.vertical-progress { position: absolute; right: 0.8vw; top: 2vh; bottom: 2vh; width: 2px; background: rgba(26,39,68,0.75); }
.vertical-progress span { position: absolute; bottom: 0; width: 100%; height: 0%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: height 120ms linear; }

.telemetry-group { margin: 6vh 1.4vw 0 1.2vw; font-size: clamp(0.56rem, 0.75vw, 0.72rem); color: rgba(138,155,181,0.72); }
.telemetry-group strong { display: block; margin-top: 0.7vh; color: var(--green); font-weight: 400; letter-spacing: 0.16em; }

.wave { height: 34px; margin: 4.5vh 1.2vw 0; border: 1px solid rgba(74,234,220,0.2); background: linear-gradient(90deg, transparent 0 12%, rgba(74,234,220,0.55) 12% 15%, transparent 15% 28%, rgba(74,234,220,0.45) 28% 32%, transparent 32% 46%, rgba(74,234,220,0.65) 46% 51%, transparent 51% 70%, rgba(74,234,220,0.35) 70% 76%, transparent 76%); clip-path: polygon(0 60%, 9% 34%, 20% 64%, 29% 28%, 43% 70%, 56% 38%, 67% 68%, 79% 29%, 100% 61%, 100% 100%, 0 100%); animation: waveMorph 2.8s ease-in-out infinite; }
.wave-b { animation-duration: 3.9s; opacity: 0.65; }

.indicator-stack { display: grid; grid-template-columns: repeat(2, 8px); gap: 12px; margin: 5vh 0 0 1.3vw; }
.indicator-stack i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px currentColor; color: var(--green); animation: indicatorCycle 5s infinite; }
.indicator-stack i:nth-child(2), .indicator-stack i:nth-child(3) { animation-delay: 2.5s; }
.telemetry-burst { position: absolute; bottom: 2vh; left: 1.2vw; color: var(--red); font-size: 0.58rem; opacity: 0; }
.telemetry-burst.active { animation: burst 150ms steps(3); }

.primary-display {
  position: fixed;
  left: 50%;
  top: 51%;
  width: 60vw;
  height: 70vh;
  transform: translate(-50%, -50%);
  background: rgba(17,26,47,0.58);
  border: 1px solid rgba(138,155,181,0.28);
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  z-index: 5;
  transition: transform 80ms steps(2), filter 80ms steps(2);
}

.primary-display.glitch { transform: translate(calc(-50% + var(--glitch-offset)), -50%); filter: saturate(1.8); clip-path: inset(2% 0 8% 0); }
.primary-display.glitch h1, .primary-display.glitch .body-copy { text-shadow: 2px 0 var(--red), -2px 0 var(--cyan), 0 2px var(--amber); }

.iso-grid {
  position: absolute;
  inset: -20%;
  opacity: 0.8;
  background-image: linear-gradient(30deg, rgba(26,39,68,0.08) 0 0.5px, transparent 0.5px 40px), linear-gradient(150deg, rgba(26,39,68,0.08) 0 0.5px, transparent 0.5px 40px), linear-gradient(90deg, rgba(26,39,68,0.05) 0 0.5px, transparent 0.5px 40px);
  background-size: 40px 40px;
  transform: scale(1.1);
}
.iso-grid.ripple { animation: gridRipple 600ms ease-out; }

.coordinate-decor { position: absolute; font-family: "Orbitron", monospace; font-size: 9px; color: rgba(26,39,68,0.3); letter-spacing: 0.2em; animation: decorFade 8s ease-in-out infinite; }
.decor-a { top: 15%; left: 8%; }
.decor-b { right: 9%; bottom: 19%; animation-delay: 2.4s; }
.decor-c { left: 37%; bottom: 8%; animation-delay: 5s; }

.phase-icon { position: absolute; top: 7%; right: 7%; width: 116px; height: 116px; opacity: 0.72; transform: rotateX(60deg) rotateZ(45deg); transform-style: preserve-3d; }
.phase-icon svg { width: 100%; height: 100%; overflow: visible; }
.phase-icon path, .phase-icon circle, .phase-icon line, .phase-icon polyline, .phase-icon ellipse { fill: none; stroke: var(--cyan); stroke-width: 1.5; opacity: 0.6; stroke-dasharray: 260; stroke-dashoffset: 260; animation: iconDraw 800ms ease-out forwards; }

.phase-kicker { position: relative; z-index: 2; font-family: "Orbitron", monospace; font-size: clamp(0.65rem, 0.9vw, 0.8rem); letter-spacing: 0.25em; color: var(--amber); text-transform: uppercase; margin-bottom: 3vh; }
h1 { position: relative; z-index: 2; margin: 0 0 3.4vh; font-family: "Share Tech Mono", monospace; font-size: clamp(1.8rem, 4vw, 3.6rem); font-weight: 400; line-height: 1.05; letter-spacing: 0.18em; color: var(--cyan); text-transform: uppercase; }
h1 span { opacity: 0; animation: titleChar 260ms forwards; }

.body-copy { position: relative; z-index: 2; max-width: 52ch; font-family: "IBM Plex Mono", monospace; font-size: clamp(0.85rem, 1.2vw, 1.05rem); line-height: 1.75; color: var(--text); }
.body-copy p { margin: 0 0 1.25em; }
.body-copy .accent { color: var(--cyan); }
.body-copy .char { visibility: hidden; }
.body-copy .char.visible { visibility: visible; }
.type-cursor { display: inline-block; width: 2px; height: 1.1em; background: var(--cyan); margin-left: 2px; vertical-align: -0.18em; animation: cursorBlink 530ms steps(1) infinite; }

.phase-counter { position: absolute; right: 7%; bottom: 7%; display: flex; align-items: center; gap: 12px; font-family: "Orbitron", monospace; color: var(--frame); letter-spacing: 0.22em; }
.phase-counter b { width: 80px; height: 1px; background: rgba(138,155,181,0.35); position: relative; }
.phase-counter b::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--phase-progress, 20) * 1%); background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }

.scan-wipe { position: absolute; left: 0; right: 0; top: -10%; height: 3px; background: var(--cyan); box-shadow: 0 0 28px 7px rgba(74,234,220,0.75); opacity: 0; z-index: 6; }
.scan-wipe.active { animation: scanWipe 600ms ease-in-out; }

.log-panel { position: fixed; left: 5vmin; right: 5vmin; bottom: 3vmin; height: 12vh; border-top: 1px solid rgba(138,155,181,0.28); display: grid; grid-template-columns: 170px 1fr; align-items: center; z-index: 18; }
.log-label { font-family: "Orbitron", monospace; letter-spacing: 0.25em; color: var(--amber); font-size: clamp(0.65rem, 0.9vw, 0.8rem); }
.log-panel p { margin: 0; font-family: "IBM Plex Mono", monospace; color: var(--text); font-size: clamp(0.82rem, 1vw, 0.98rem); }
.log-cursor { display: inline-block; width: 2px; height: 1em; background: var(--cyan); margin-left: 4px; animation: cursorBlink 530ms steps(1) infinite; }

.crt-static { position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(232,74,95,0.08) 0 2px, rgba(74,234,220,0.08) 2px 4px, transparent 4px 8px); mix-blend-mode: screen; }
.crt-static.active { animation: staticBurst 50ms steps(2); }

.flicker { animation: ambientFlicker 160ms steps(2); }

@keyframes framePulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } }
@keyframes scanDrift { from { transform: translateY(0); } to { transform: translateY(2px); } }
@keyframes waveMorph { 0%,100% { clip-path: polygon(0 60%, 9% 34%, 20% 64%, 29% 28%, 43% 70%, 56% 38%, 67% 68%, 79% 29%, 100% 61%, 100% 100%, 0 100%); } 50% { clip-path: polygon(0 38%, 11% 70%, 21% 31%, 32% 66%, 46% 29%, 58% 72%, 69% 34%, 82% 65%, 100% 35%, 100% 100%, 0 100%); } }
@keyframes indicatorCycle { 0%, 48%, 100% { background: var(--green); color: var(--green); } 50%, 88% { background: var(--amber); color: var(--amber); } }
@keyframes burst { from { opacity: 1; transform: translateX(-2px); } to { opacity: 1; transform: translateX(2px); } }
@keyframes gridRipple { 0% { filter: brightness(1); opacity: 0.8; } 45% { filter: brightness(3.1); opacity: 1; } 100% { filter: brightness(1); opacity: 0.8; } }
@keyframes decorFade { 0%,100% { opacity: 0.15; } 50% { opacity: 0.55; } }
@keyframes iconDraw { to { stroke-dashoffset: 0; } }
@keyframes titleChar { to { opacity: 1; } }
@keyframes cursorBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes scanWipe { 0% { top: -10%; opacity: 0; } 15% { opacity: 1; } 100% { top: 110%; opacity: 0; } }
@keyframes staticBurst { 0% { opacity: 0.9; transform: translateX(-2px); } 100% { opacity: 0; transform: translateX(2px); } }
@keyframes ambientFlicker { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

@media (max-width: 820px) {
  .status-bar { grid-template-columns: 1fr; gap: 0.6vh; height: 10vh; text-align: center; }
  .status-block { display: none; }
  .telemetry { width: 58px; padding-right: 0; }
  .telemetry-group, .wave, .indicator-stack, .telemetry-burst { display: none; }
  .primary-display { width: 78vw; height: 66vh; left: 56%; padding: 28px; }
  .phase-icon { width: 72px; height: 72px; }
  .log-panel { grid-template-columns: 1fr; align-content: center; gap: 1vh; }
}