:root {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  color: #bfff64;
  background: #010502;
  font-synthesis: none;
  --acid: #d8ff28;
  --lime: #9cff16;
  --green: #42cf0b;
  --deep: #031108;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; min-width: 320px; min-height: 100%; background: #010502; }
body { min-height: 100vh; overflow: hidden; }
button { font: inherit; }

.stage {
  --mx: 0;
  --my: 0;
  --speed: 1;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 34% 48%, rgba(135,255,16,.21), transparent 24%),
    radial-gradient(circle at 65% 53%, rgba(37,115,6,.19), transparent 34%),
    linear-gradient(145deg, #010502 0%, #041409 42%, #020804 73%, #000 100%);
}
.stage.chaos { --speed: 1; }
.stage.chill { --speed: .28; }

.stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 30;
  pointer-events: none;
  opacity: .075;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(201,255,179,.24) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 7px, rgba(117,255,72,.035) 8px 9px);
  mix-blend-mode: screen;
  animation: scanNoise calc(1.8s / var(--speed)) linear infinite;
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  box-shadow: inset 0 0 170px 40px #000;
}

.vortex-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: .88; }
.world { position: absolute; inset: 0; z-index: -2; overflow: hidden; perspective: 900px; }

.nebula { position: absolute; border-radius: 50%; filter: blur(26px); mix-blend-mode: screen; animation: nebulaFloat calc(8s / var(--speed)) ease-in-out infinite alternate; }
.nebula-a { width: 52vw; height: 52vw; left: -16vw; top: -20vw; background: radial-gradient(circle, rgba(148,255,24,.2), rgba(12,87,13,.03) 55%, transparent 70%); }
.nebula-b { width: 64vw; height: 64vw; right: -27vw; bottom: -31vw; background: radial-gradient(circle, rgba(78,255,17,.14), rgba(3,54,11,.02) 61%, transparent 72%); animation-delay: -4s; }
.nebula-c { width: 30vw; height: 30vw; left: 48%; top: 22%; background: radial-gradient(circle, rgba(210,255,53,.12), transparent 68%); animation: nebulaPulse calc(3.6s / var(--speed)) ease-in-out infinite; }

.wire-sphere {
  position: absolute;
  border-radius: 50%;
  opacity: .34;
  background-image:
    repeating-radial-gradient(circle at 50% 50%, rgba(96,255,50,.18) 0 1px, transparent 1px 28px),
    repeating-conic-gradient(from 0deg, rgba(103,255,61,.17) 0 1deg, transparent 1deg 10deg);
  mask-image: radial-gradient(circle, #000 0 58%, transparent 74%);
  filter: drop-shadow(0 0 16px rgba(80,255,28,.12));
}
.wire-a { width: 76vw; height: 76vw; left: -35vw; top: -21vw; animation: spinCW calc(31s / var(--speed)) linear infinite; }
.wire-b { width: 61vw; height: 61vw; right: -31vw; bottom: -30vw; opacity: .24; animation: spinCCW calc(24s / var(--speed)) linear infinite; }

.tunnel { position: absolute; inset: 0; display: grid; place-items: center; transform: translateX(calc(var(--mx) * 35px)) translateY(calc(var(--my) * 22px)); transition: transform .08s linear; }
.tunnel i {
  --scale: calc(.18 + var(--i) * .12);
  position: absolute;
  width: 88vw;
  height: 56vw;
  max-height: 82vh;
  border: 1px solid rgba(124,255,58,.11);
  border-radius: 50%;
  transform: scale(var(--scale)) rotate(calc(var(--i) * 8deg));
  animation: tunnelPump calc((4.2s + var(--i) * .22s) / var(--speed)) linear infinite;
  animation-delay: calc(var(--i) * -.31s);
  box-shadow: 0 0 15px rgba(93,255,43,.05), inset 0 0 18px rgba(93,255,43,.04);
}

.perspective-grid {
  position: absolute;
  left: -15vw;
  width: 130vw;
  height: 68vh;
  opacity: .19;
  background-image:
    linear-gradient(rgba(89,255,44,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(89,255,44,.22) 1px, transparent 1px);
  background-size: 38px 38px;
  transform-origin: center;
}
.grid-floor { bottom: -46vh; transform: rotateX(67deg) translateY(calc(var(--my) * 30px)); animation: gridDrive calc(2.4s / var(--speed)) linear infinite; }
.grid-ceiling { top: -49vh; transform: rotateX(-67deg) scaleY(-1); opacity: .09; animation: gridDriveBack calc(3s / var(--speed)) linear infinite; }

.scanner { position: absolute; width: 42vw; height: 2px; background: linear-gradient(90deg, transparent, #b7ff36, transparent); box-shadow: 0 0 18px #86ff1a; opacity: .48; }
.scanner-a { left: -10vw; top: 23%; animation: scannerA calc(5.8s / var(--speed)) ease-in-out infinite; }
.scanner-b { right: -15vw; bottom: 18%; animation: scannerB calc(4.7s / var(--speed)) ease-in-out infinite; }

.radar { position: absolute; width: 210px; height: 210px; border: 1px solid rgba(126,255,55,.13); border-radius: 50%; opacity: .42; }
.radar::before, .radar::after, .radar i { content: ""; position: absolute; inset: 16%; border: 1px solid rgba(126,255,55,.12); border-radius: 50%; }
.radar::after { inset: 34%; }
.radar i:nth-child(1) { inset: 50% -12% auto 50%; height: 1px; border: 0; border-top: 1px solid rgba(176,255,85,.55); border-radius: 0; transform-origin: left center; animation: radarSweep calc(2.4s / var(--speed)) linear infinite; box-shadow: 0 0 12px #92ff28; }
.radar i:nth-child(2) { inset: 50% 0 auto 0; height: 1px; border: 0; border-top: 1px solid rgba(126,255,55,.12); border-radius: 0; }
.radar i:nth-child(3) { inset: 0 auto 0 50%; width: 1px; border: 0; border-left: 1px solid rgba(126,255,55,.12); border-radius: 0; }
.radar-left { left: -75px; bottom: 5%; animation: driftY calc(5s / var(--speed)) ease-in-out infinite alternate; }
.radar-right { right: -100px; top: 7%; transform: scale(.75); animation: driftY calc(6.5s / var(--speed)) ease-in-out infinite alternate-reverse; }

.hud-bracket { position: absolute; width: 74px; height: 74px; border-color: rgba(176,255,87,.24); border-style: solid; animation: bracketFloat calc(4s / var(--speed)) ease-in-out infinite alternate; }
.bracket-a { left: 3%; top: 11%; border-width: 1px 0 0 1px; }
.bracket-b { right: 3%; top: 11%; border-width: 1px 1px 0 0; animation-delay: -1.2s; }
.bracket-c { left: 3%; bottom: 10%; border-width: 0 0 1px 1px; animation-delay: -2.1s; }
.bracket-d { right: 3%; bottom: 10%; border-width: 0 1px 1px 0; animation-delay: -2.8s; }

.star { position: absolute; display: block; border-radius: 50%; background: #caff53; box-shadow: 0 0 13px 3px rgba(139,255,37,.58); animation: starPulse calc(2.1s / var(--speed)) ease-in-out infinite; }

.top-hud { position: absolute; z-index: 10; top: 20px; left: 3.2vw; right: 3.2vw; display: flex; justify-content: space-between; align-items: center; pointer-events: none; font-family: Consolas, monospace; letter-spacing: .12em; }
.brand-lockup { display: flex; align-items: center; gap: 10px; }
.brand-x { width: 39px; height: 39px; border: 1px solid rgba(198,255,108,.58); border-radius: 50%; display: grid; place-items: center; font: 900 1.5rem/1 Arial; color: #0b2906; background: radial-gradient(circle at 35% 25%, #ecff99, #8bd414 59%, #285b06 100%); box-shadow: 0 0 20px rgba(150,255,32,.34); animation: spinCW calc(7s / var(--speed)) linear infinite; }
.brand-lockup strong { display: block; font-size: .8rem; color: #d1ff7f; }
.brand-lockup small { display: block; margin-top: 4px; font-size: .47rem; color: rgba(128,231,73,.5); }
.data-stream { display: flex; gap: 7px; align-items: center; font-size: .55rem; color: rgba(139,238,87,.58); }
.data-stream b { color: #c3ff68; }
.data-stream i { width: 28px; height: 1px; background: #8cff1e; box-shadow: 0 0 8px #8cff1e; animation: dataBlink calc(1.3s / var(--speed)) steps(2,end) infinite; }

.dashboard {
  position: relative;
  z-index: 4;
  width: min(1510px, 95vw);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(60px, 6vw, 96px) clamp(22px, 5vw, 78px);
  display: grid;
  grid-template-columns: minmax(420px, 1.05fr) minmax(430px, .95fr);
  align-items: center;
  gap: clamp(58px, 7vw, 125px);
  perspective: 1400px;
}

.hero-column {
  display: grid;
  justify-items: center;
  gap: 18px;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--mx) * 22px), calc(var(--my) * 16px), 0) rotateY(calc(var(--mx) * 8deg)) rotateX(calc(var(--my) * -6deg));
  transition: transform .075s linear;
  animation: heroBob calc(3.2s / var(--speed)) ease-in-out infinite alternate;
}

.planet-wrap { position: relative; width: min(610px, 43vw); aspect-ratio: 1; display: grid; place-items: center; transform-style: preserve-3d; animation: planetDrift calc(9s / var(--speed)) ease-in-out infinite alternate; }
.energy-disc { position: absolute; inset: 4%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 7%, rgba(116,255,29,.09) 8% 15%, transparent 16% 30%, rgba(193,255,55,.08) 31% 39%, transparent 40% 100%); filter: blur(.2px) drop-shadow(0 0 18px rgba(95,255,17,.2)); animation: spinCW calc(10s / var(--speed)) linear infinite; }

.ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(149,255,52,.37); box-shadow: 0 0 22px rgba(93,255,25,.1), inset 0 0 20px rgba(93,255,25,.05); transform-style: preserve-3d; }
.orbit-1 { inset: 0; border-style: dashed; border-width: 2px; animation: spinCW calc(11s / var(--speed)) linear infinite; }
.orbit-2 { inset: 7%; border-color: rgba(209,255,81,.41); border-left-color: transparent; animation: spinCCW calc(7.8s / var(--speed)) linear infinite; }
.orbit-3 { inset: 14%; border-width: 2px; border-color: rgba(112,255,34,.26); border-top-style: dashed; animation: spinCW calc(5.4s / var(--speed)) linear infinite; }
.orbit-4 { inset: 20%; border-color: rgba(225,255,105,.37); border-bottom-color: transparent; animation: spinCCW calc(3.9s / var(--speed)) linear infinite; }
.orbit-5 { inset: -6%; border: 1px dotted rgba(98,255,49,.22); animation: spinCW calc(17s / var(--speed)) linear infinite; }

.sat { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 30% 22%, #f3ffba, #9dec1b 38%, #286b08 76%); box-shadow: 0 0 19px 4px rgba(151,255,38,.56); }
.sat-a { left: 8%; top: 24%; }
.sat-b { right: 4%; bottom: 33%; width: 12px; height: 12px; }
.sat-c { left: 25%; bottom: 3%; width: 10px; height: 10px; }
.sat-d { right: 18%; top: 6%; width: 14px; height: 14px; }

.elliptic { position: absolute; width: 105%; height: 31%; border: 2px solid rgba(134,255,42,.25); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform-style: preserve-3d; }
.e1 { transform: rotate(19deg) rotateX(64deg) translateZ(44px); animation: ellipse1 calc(4.2s / var(--speed)) linear infinite; }
.e2 { transform: rotate(-49deg) rotateX(73deg) translateZ(-18px); opacity: .62; animation: ellipse2 calc(5.8s / var(--speed)) linear infinite; }
.e3 { width: 88%; height: 38%; transform: rotate(83deg) rotateX(69deg) translateZ(14px); opacity: .45; animation: ellipse3 calc(3.3s / var(--speed)) linear infinite; }

.blade-fan { position: absolute; width: 54%; height: 12%; border-radius: 50%; background: linear-gradient(90deg, transparent, rgba(159,255,34,.1), transparent); filter: blur(1px); transform-origin: 50% 50%; }
.fan-a { animation: fanA calc(3.6s / var(--speed)) linear infinite; }
.fan-b { animation: fanB calc(4.7s / var(--speed)) linear infinite; }
.fan-c { animation: fanC calc(2.8s / var(--speed)) linear infinite; }

.planet-shell {
  position: relative;
  width: 63%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 8;
  transform: translateZ(78px) rotateY(calc(var(--mx) * 5deg)) rotateX(calc(var(--my) * -4deg));
  background: radial-gradient(circle at 36% 29%, #dfff79 0 3%, #82d515 18%, #278407 48%, #072e08 78%, #010b03 100%);
  box-shadow:
    0 0 0 6px rgba(206,255,79,.17),
    0 0 0 10px rgba(70,142,10,.17),
    0 0 48px rgba(183,255,36,.78),
    0 0 130px rgba(71,216,8,.33),
    inset -34px -39px 52px rgba(0,0,0,.66),
    inset 20px 18px 35px rgba(238,255,163,.24);
  animation: corePulse calc(2.9s / var(--speed)) ease-in-out infinite;
}
.face-layer { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(54,255,15,.2) 69%, rgba(4,33,5,.8) 100%); }
.portrait-mask { position: absolute; inset: 6%; z-index: 2; border-radius: 50%; overflow: hidden; background: #031006; box-shadow: inset 0 0 35px #000; }
.portrait-mask img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; transform: scale(1.05); filter: contrast(1.07) saturate(.92) brightness(.9); animation: faceBreath calc(6s / var(--speed)) ease-in-out infinite alternate; }
.planet-map { position: absolute; inset: 0; z-index: 4; border-radius: 50%; opacity: .21; background-image: repeating-radial-gradient(circle at 35% 45%, transparent 0 16px, rgba(166,255,72,.12) 17px 18px), repeating-linear-gradient(77deg, transparent 0 17px, rgba(142,255,43,.08) 18px 19px); mix-blend-mode: screen; animation: mapSlide calc(9s / var(--speed)) linear infinite; pointer-events: none; }
.planet-specular { position: absolute; z-index: 6; left: 9%; top: 7%; width: 45%; height: 24%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.5), rgba(255,255,255,.08) 48%, transparent 74%); filter: blur(2px); transform: rotate(-26deg); pointer-events: none; animation: specularMove calc(3.8s / var(--speed)) ease-in-out infinite alternate; }
.planet-rim { position: absolute; inset: 0; z-index: 7; border-radius: 50%; border: 2px solid rgba(229,255,130,.82); box-shadow: inset 0 0 29px rgba(202,255,80,.3), 0 0 22px rgba(170,255,42,.32); }
.crosshair { position: absolute; inset: 50% auto auto 50%; z-index: 9; width: 56px; height: 56px; transform: translate(-50%,-50%); opacity: .38; animation: spinCCW calc(5s / var(--speed)) linear infinite; pointer-events: none; }
.crosshair i:first-child, .crosshair i:last-child { position: absolute; background: rgba(213,255,124,.55); box-shadow: 0 0 8px rgba(177,255,57,.5); }
.crosshair i:first-child { left: 50%; top: 0; bottom: 0; width: 1px; }
.crosshair i:last-child { top: 50%; left: 0; right: 0; height: 1px; }

.orbiting-orb { position: absolute; z-index: 12; border-radius: 50%; background: radial-gradient(circle at 30% 24%, #f5ffbf 0 6%, #a9ef23 25%, #347a08 62%, #031507 100%); border: 1px solid rgba(219,255,101,.7); box-shadow: 0 0 21px rgba(151,255,41,.72), inset -7px -8px 10px rgba(0,0,0,.55); }
.oo-1 { width: 44px; height: 44px; animation: orbPath1 calc(5.1s / var(--speed)) linear infinite; }
.oo-2 { width: 27px; height: 27px; animation: orbPath2 calc(3.7s / var(--speed)) linear infinite; }
.oo-3 { width: 20px; height: 20px; animation: orbPath3 calc(6.2s / var(--speed)) linear infinite; }
.oo-4 { width: 13px; height: 13px; animation: orbPath4 calc(2.9s / var(--speed)) linear infinite; }

.readout-strip { width: min(560px, 100%); display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 13px; padding: 9px 13px; border: 1px solid rgba(131,255,57,.17); background: linear-gradient(90deg, rgba(8,42,12,.74), rgba(2,17,6,.37)); box-shadow: inset 0 0 25px rgba(66,255,22,.05), 0 0 19px rgba(66,255,22,.05); transform: perspective(600px) rotateX(6deg); animation: readoutFloat calc(3s / var(--speed)) ease-in-out infinite alternate; }
.a-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #112c04; font-weight: 900; background: radial-gradient(circle at 32% 25%, #f2ffa1, #9ce21c 55%, #315d09 100%); border: 1px solid #d9ff74; box-shadow: 0 0 17px rgba(149,255,35,.58); animation: spinCCW calc(5.6s / var(--speed)) linear infinite; }
.readout-copy { font-family: Consolas, monospace; letter-spacing: .11em; }
.readout-copy strong { display: block; color: #c8ff70; font-size: .78rem; }
.readout-copy span { display: block; margin-top: 4px; font-size: .55rem; color: rgba(130,230,79,.5); white-space: nowrap; }
.equalizer { height: 26px; display: flex; align-items: end; gap: 2px; }
.equalizer i { width: 2px; height: calc(5px + (var(--i) % 6) * 3px); background: #a4ff2d; box-shadow: 0 0 5px #8dff1d; animation: eq calc((.55s + var(--i)*.035s) / var(--speed)) ease-in-out infinite alternate; }

.blade-stack { position: relative; display: grid; gap: 5px; align-content: center; transform-style: preserve-3d; transform: translate3d(calc(var(--mx) * -18px), calc(var(--my) * 11px), 0) rotateY(calc(-7deg + var(--mx) * -8deg)) rotateX(calc(var(--my) * -5deg)); transition: transform .075s linear; animation: menuFloat calc(4s / var(--speed)) ease-in-out infinite alternate; }
.menu-orbit { position: absolute; width: 430px; height: 430px; left: -205px; top: 50%; transform: translateY(-50%); border-radius: 50%; border: 1px solid rgba(116,255,42,.1); box-shadow: inset 0 0 40px rgba(74,255,16,.03); animation: spinCW calc(13s / var(--speed)) linear infinite; pointer-events: none; }
.menu-orbit::before, .menu-orbit::after { content:""; position:absolute; border-radius:50%; border:1px dashed rgba(128,255,49,.12); }
.menu-orbit::before { inset: 13%; animation: spinCCW calc(8s / var(--speed)) linear infinite; }
.menu-orbit::after { inset: 31%; animation: spinCW calc(5s / var(--speed)) linear infinite; }

.blade-row { --n: calc(var(--row) - 1.5); position: relative; min-height: 78px; display: grid; grid-template-columns: 78px 31px minmax(300px,1fr); align-items: center; border: 0; padding: 0; color: #a9ff69; background: transparent; text-align: left; cursor: pointer; transform-style: preserve-3d; transform: translateX(calc(var(--row) * 13px)) translateY(calc(sin(var(--row)) * 1px)) rotateZ(calc(var(--n) * .35deg)); transition: filter .18s ease, transform .18s ease; animation: bladeWobble calc((2.8s + var(--row)*.31s) / var(--speed)) ease-in-out infinite alternate; }
.blade-row:hover { filter: brightness(1.22) saturate(1.14); transform: translateX(calc(var(--row) * 13px + 14px)) translateZ(28px) scale(1.018) rotateZ(calc(var(--n) * .35deg)); }
.selector-wrap { position: relative; width: 74px; height: 74px; display: grid; place-items: center; z-index: 7; }
.selector-ring { position: absolute; inset: 2px; border-radius: 50%; border: 1px dashed rgba(161,255,68,.27); animation: spinCW calc(4.2s / var(--speed)) linear infinite; }
.selector-orb { position: relative; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 34% 24%, #eaff92 0 4%, transparent 16%), radial-gradient(circle at 44% 42%, #a6e52a 0 9%, #53aa11 40%, #0b3d08 73%, #021305 100%); border: 1px solid rgba(217,255,104,.6); box-shadow: 0 0 0 6px rgba(80,156,11,.1), 0 0 22px rgba(127,255,28,.45), inset -9px -10px 15px rgba(0,0,0,.52); animation: orbBreathe calc(2s / var(--speed)) ease-in-out infinite; transition: transform .2s ease, box-shadow .2s ease; }
.selector-orb i { position:absolute; width: 19px; height: 9px; left: 11px; top: 8px; border-radius: 50%; background: rgba(255,255,255,.35); filter: blur(1px); transform: rotate(-26deg); }
.selector-orb b { position:absolute; inset: 15px; border-radius:50%; border:1px solid rgba(228,255,136,.25); animation: spinCCW calc(3s / var(--speed)) linear infinite; }
.blade-connector { position: relative; height: 2px; margin-left: -5px; background: linear-gradient(90deg, rgba(188,255,81,.78), rgba(51,156,11,.35)); box-shadow: 0 0 10px rgba(116,255,31,.3); overflow: visible; }
.blade-connector i { position:absolute; width:10px; height:10px; right:-5px; top:-4px; transform:rotate(45deg); border:1px solid rgba(173,255,74,.55); background:#071b08; animation: diamondSpin calc(2s / var(--speed)) linear infinite; }

.blade-panel { position: relative; min-height: 62px; display: flex; align-items: center; padding: 0 29px 0 34px; overflow: hidden; clip-path: polygon(3% 4%, 97% 0, 100% 22%, 99% 82%, 96% 100%, 3% 95%, 0 73%, 0 28%); border: 1px solid rgba(111,255,53,.35); background: linear-gradient(180deg, rgba(18,79,23,.88) 0%, rgba(7,48,13,.95) 50%, rgba(2,27,8,.98) 100%); box-shadow: inset 0 1px 0 rgba(212,255,163,.11), inset 0 -11px 24px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.26); transform: perspective(850px) rotateY(-3deg); }
.blade-grid { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(133,255,82,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(133,255,82,.24) 1px,transparent 1px); background-size:16px 16px; animation: bladeGrid calc(2.6s / var(--speed)) linear infinite; }
.blade-shine { position:absolute; left:-20%; top:0; width:38%; height:100%; background:linear-gradient(105deg,transparent 0%,rgba(226,255,191,.21) 42%,rgba(255,255,255,.07) 58%,transparent 72%); transform:skewX(-16deg); animation: shineSweep calc(2.7s / var(--speed)) ease-in-out infinite; }
.blade-scan { position:absolute; left:0; right:0; height:2px; top:-4px; background:linear-gradient(90deg,transparent,#baff42,transparent); box-shadow:0 0 13px #8eff20; opacity:.45; animation: bladeScan calc(1.85s / var(--speed)) linear infinite; }
.blade-copy { position:relative; z-index:4; min-width:0; }
.blade-copy strong { display:block; font-size:clamp(1.06rem,2vw,1.55rem); letter-spacing:.085em; text-shadow:0 0 9px rgba(119,255,52,.42); white-space:nowrap; }
.blade-copy small { display:block; margin-top:4px; font: .55rem/1 Consolas,monospace; letter-spacing:.16em; color:rgba(126,225,74,.45); }
.blade-chevron { position:absolute; right:21px; top:50%; transform:translateY(-50%); font-size:2rem; opacity:.24; animation: chevron calc(1.2s / var(--speed)) ease-in-out infinite alternate; }

.blade-row.is-active { z-index:12; filter: brightness(1.08); }
.blade-row.is-active .selector-orb { transform:scale(1.15); background:radial-gradient(circle at 34% 24%,#fffbd1 0 5%,transparent 18%),radial-gradient(circle at 45% 42%,#e7ff55 0 10%,#b7e91a 42%,#668f06 73%,#153405 100%); box-shadow:0 0 0 8px rgba(184,255,31,.13),0 0 39px rgba(212,255,37,.82),inset -8px -9px 15px rgba(0,0,0,.31); }
.blade-row.is-active .selector-ring { border-color:rgba(219,255,104,.8); box-shadow:0 0 18px rgba(188,255,38,.45); animation-duration:calc(1.8s / var(--speed)); }
.blade-row.is-active .blade-panel { color:#142800; border-color:rgba(242,255,134,.86); background:linear-gradient(180deg,#eaff4a 0%,#bee915 49%,#759a05 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -12px 23px rgba(57,91,0,.2),0 0 31px rgba(199,255,34,.54),0 12px 34px rgba(0,0,0,.36); animation: activeThrob calc(1.5s / var(--speed)) ease-in-out infinite; }
.blade-row.is-active .blade-grid { opacity:.1; }
.blade-row.is-active .blade-shine { opacity:.72; }
.blade-row.is-active .blade-copy small { color:rgba(33,69,0,.6); }
.blade-row.is-active .blade-copy strong { text-shadow:0 1px 0 rgba(255,255,255,.32); }
.blade-row.is-active .blade-chevron { opacity:.6; }

.system-message { margin: 13px 0 0 112px; display:flex; align-items:center; gap:9px; font:700 .62rem/1 Consolas,monospace; letter-spacing:.17em; color:rgba(139,235,85,.6); animation: systemFloat calc(2.7s / var(--speed)) ease-in-out infinite alternate; }
.system-led { width:7px; height:7px; border-radius:50%; background:#b4ff31; box-shadow:0 0 10px #a0ff22; animation: ledPulse calc(.9s / var(--speed)) ease-in-out infinite; }

.side-data { position:absolute; z-index:7; top:50%; display:grid; gap:5px; align-items:center; transform:translateY(-50%); font-family:Consolas,monospace; letter-spacing:.13em; color:rgba(136,237,80,.31); pointer-events:none; }
.side-data i { width:1px; height:100px; background:linear-gradient(transparent,#8fff22,transparent); justify-self:center; box-shadow:0 0 8px rgba(143,255,39,.38); animation: dataBar calc(2s / var(--speed)) ease-in-out infinite alternate; }
.side-data span { color:rgba(197,255,109,.48); font-size:1.2rem; }
.side-data b { writing-mode:vertical-rl; font-size:.55rem; }
.side-data small { font-size:.42rem; }
.left-data { left:1.1vw; }
.right-data { right:1.1vw; }

.fx-toggle { position:absolute; z-index:40; right:3.1vw; bottom:35px; display:flex; align-items:center; gap:8px; border:1px solid rgba(142,255,61,.28); background:rgba(3,27,8,.72); color:#a9ff60; padding:8px 12px; font:700 .58rem/1 Consolas,monospace; letter-spacing:.1em; cursor:pointer; box-shadow:inset 0 0 18px rgba(87,255,26,.06),0 0 14px rgba(87,255,26,.08); backdrop-filter:blur(8px); }
.fx-toggle:hover { border-color:rgba(204,255,104,.58); box-shadow:0 0 18px rgba(118,255,29,.21); }
.fx-led { width:7px; height:7px; border-radius:50%; background:#c1ff38; box-shadow:0 0 9px #b1ff27; animation:ledPulse calc(.8s / var(--speed)) ease-in-out infinite; }

.bottom-marquee { position:absolute; z-index:6; left:0; right:0; bottom:0; height:21px; overflow:hidden; border-top:1px solid rgba(117,255,48,.11); background:rgba(2,12,5,.48); font: .46rem/21px Consolas,monospace; letter-spacing:.2em; color:rgba(127,225,73,.32); white-space:nowrap; }
.bottom-marquee div { display:inline-block; min-width:200%; animation:marquee calc(13s / var(--speed)) linear infinite; }

.surge-1 .planet-shell { animation: corePulse calc(1.7s / var(--speed)) ease-in-out infinite, surge .45s ease-out 1; }
.surge-1 .blade-stack { animation: menuFloat calc(4s / var(--speed)) ease-in-out infinite alternate, surgeMenu .38s ease-out 1; }

@keyframes spinCW { to { transform: rotate(360deg); } }
@keyframes spinCCW { to { transform: rotate(-360deg); } }
@keyframes scanNoise { to { transform: translateY(8px) translateX(5px); } }
@keyframes nebulaFloat { to { transform: translate3d(7vw,4vh,0) scale(1.12) rotate(14deg); } }
@keyframes nebulaPulse { 50% { transform:scale(1.28); opacity:.75; } }
@keyframes tunnelPump { 0%{opacity:0;filter:blur(2px)} 23%{opacity:.3} 75%{opacity:.08} 100%{transform:scale(calc(var(--scale) * 2.6)) rotate(calc(var(--i) * 8deg + 80deg));opacity:0;filter:blur(0)} }
@keyframes gridDrive { to { background-position:0 38px,38px 0; } }
@keyframes gridDriveBack { to { background-position:0 -38px,-38px 0; } }
@keyframes scannerA { 0%,100%{transform:translateX(-25vw) rotate(-8deg);opacity:.08} 50%{transform:translateX(110vw) rotate(-8deg);opacity:.6} }
@keyframes scannerB { 0%,100%{transform:translateX(35vw) rotate(12deg);opacity:.06} 50%{transform:translateX(-115vw) rotate(12deg);opacity:.45} }
@keyframes radarSweep { to { transform:rotate(360deg); } }
@keyframes driftY { to { transform:translateY(28px) rotate(9deg) scale(.92); } }
@keyframes bracketFloat { to { transform:translate(12px,9px) rotate(2deg); opacity:.7; } }
@keyframes starPulse { 0%,100%{opacity:.08;transform:scale(.4)} 50%{opacity:1;transform:scale(1.4)} }
@keyframes dataBlink { 50%{opacity:.2;transform:scaleX(.5)} }
@keyframes heroBob { to { transform:translate3d(calc(var(--mx) * 22px),calc(var(--my) * 16px + 12px),0) rotateY(calc(var(--mx) * 8deg + 1deg)) rotateX(calc(var(--my) * -6deg - 1deg)); } }
@keyframes planetDrift { to { transform:rotateZ(1.5deg) translateY(-8px) scale(1.015); } }
@keyframes ellipse1 { to { transform:rotate(379deg) rotateX(64deg) translateZ(44px); } }
@keyframes ellipse2 { to { transform:rotate(-409deg) rotateX(73deg) translateZ(-18px); } }
@keyframes ellipse3 { to { transform:rotate(443deg) rotateX(69deg) translateZ(14px); } }
@keyframes fanA { to { transform:rotate(360deg) scaleX(1.35); } }
@keyframes fanB { to { transform:rotate(-360deg) scaleX(.8); } }
@keyframes fanC { to { transform:rotate(360deg) scaleX(1.08); } }
@keyframes corePulse { 0%,100%{filter:saturate(1) brightness(1)} 50%{filter:saturate(1.18) brightness(1.08);box-shadow:0 0 0 7px rgba(206,255,79,.17),0 0 0 12px rgba(70,142,10,.17),0 0 70px rgba(190,255,40,.86),0 0 160px rgba(71,216,8,.39),inset -34px -39px 52px rgba(0,0,0,.62),inset 20px 18px 35px rgba(238,255,163,.27)} }
@keyframes faceBreath { to { transform:scale(1.11) translateY(-1%); filter:contrast(1.1) saturate(1.02) brightness(.95); } }
@keyframes mapSlide { to { background-position:48px -32px,-37px 54px; } }
@keyframes specularMove { to { transform:translate(13px,8px) rotate(-17deg) scale(1.08); } }
@keyframes orbPath1 { 0%{transform:translate(-235px,-150px) scale(.75)} 25%{transform:translate(210px,-220px) scale(1.15)} 50%{transform:translate(260px,145px) scale(.85)} 75%{transform:translate(-190px,235px) scale(1.25)} 100%{transform:translate(-235px,-150px) scale(.75)} }
@keyframes orbPath2 { 0%{transform:translate(175px,-115px)} 25%{transform:translate(240px,95px) scale(1.25)} 50%{transform:translate(-120px,225px) scale(.75)} 75%{transform:translate(-245px,-65px) scale(1.1)} 100%{transform:translate(175px,-115px)} }
@keyframes orbPath3 { 0%{transform:translate(-110px,-260px)} 30%{transform:translate(250px,-15px) scale(1.25)} 60%{transform:translate(75px,245px)} 100%{transform:translate(-110px,-260px)} }
@keyframes orbPath4 { 0%{transform:translate(0,-275px)} 33%{transform:translate(250px,120px)} 66%{transform:translate(-230px,145px)} 100%{transform:translate(0,-275px)} }
@keyframes readoutFloat { to { transform:perspective(600px) rotateX(6deg) translateY(5px) translateX(7px); } }
@keyframes eq { to { height:26px; opacity:.55; } }
@keyframes menuFloat { to { transform:translate3d(calc(var(--mx) * -18px + 10px),calc(var(--my) * 11px - 8px),0) rotateY(calc(-7deg + var(--mx) * -8deg + 1deg)) rotateX(calc(var(--my) * -5deg + 1deg)); } }
@keyframes bladeWobble { to { transform:translateX(calc(var(--row) * 13px + 7px)) translateY(calc((var(--row) - 1.5) * 2px)) rotateZ(calc((var(--row) - 1.5) * -.45deg)) translateZ(10px); } }
@keyframes orbBreathe { 50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(80,156,11,.1),0 0 31px rgba(127,255,28,.62),inset -9px -10px 15px rgba(0,0,0,.5)} }
@keyframes diamondSpin { to { transform:rotate(405deg); } }
@keyframes bladeGrid { to { background-position:16px 16px,16px 16px; } }
@keyframes shineSweep { 0%,20%{left:-34%;opacity:0} 45%{opacity:.7} 72%,100%{left:112%;opacity:0} }
@keyframes bladeScan { to { top:105%; } }
@keyframes chevron { to { transform:translate(7px,-50%); opacity:.62; } }
@keyframes activeThrob { 50%{filter:brightness(1.12);transform:perspective(850px) rotateY(-3deg) scaleX(1.013)} }
@keyframes systemFloat { to { transform:translateX(9px); opacity:.9; } }
@keyframes ledPulse { 50%{opacity:.25;transform:scale(.7)} }
@keyframes dataBar { to { height:145px; opacity:.7; } }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes surge { 0%{transform:translateZ(78px) scale(1)} 45%{transform:translateZ(115px) scale(1.075)} 100%{transform:translateZ(78px) scale(1)} }
@keyframes surgeMenu { 50%{transform:translateX(28px) rotateY(-10deg) scale(1.035)} }


/* Real-time pointer/touch fluid layer */
.fluid-canvas {
  position: absolute;
  inset: 0;
  z-index: 24;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .98;
  mix-blend-mode: screen;
}

.fluid-hud {
  position: absolute;
  z-index: 40;
  left: 3.1vw;
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(142,255,61,.22);
  background: rgba(2,20,7,.58);
  color: rgba(178,255,101,.72);
  font: 700 .55rem/1 Consolas, monospace;
  letter-spacing: .1em;
  backdrop-filter: blur(7px);
  pointer-events: none;
}

.fluid-drop {
  width: 10px;
  height: 13px;
  border-radius: 55% 55% 62% 62% / 70% 70% 38% 38%;
  transform: rotate(45deg);
  background: radial-gradient(circle at 30% 25%, #efffbd 0 8%, #a9ff2f 25%, #368d0b 72%);
  box-shadow: 0 0 12px rgba(167,255,43,.75);
  animation: fluidDropPulse calc(.9s / var(--speed)) ease-in-out infinite alternate;
}

@keyframes fluidDropPulse {
  to {
    transform: rotate(45deg) scale(1.22) translateY(-2px);
    filter: brightness(1.28);
  }
}

@media (max-width: 1020px) {
  body { overflow:auto; }
  .stage { min-height:100dvh; overflow-y:auto; }
  .dashboard { width:100%; min-height:auto; grid-template-columns:1fr; gap:16px; padding:68px 18px 80px; }
  .planet-wrap { width:min(560px,78vw); }
  .hero-column { gap:8px; }
  .blade-stack { width:min(760px,94vw); margin:0 auto; transform:none; }
  .blade-row { grid-template-columns:67px 27px 1fr; }
  .blade-row, .blade-row:hover { transform:none; }
  .menu-orbit { left:-175px; }
  .side-data { display:none; }
  .top-hud { top:14px; }
  .data-stream { display:none; }
}

@media (max-width: 620px) {
  .dashboard { padding:64px 9px 68px; }
  .planet-wrap { width:min(440px,96vw); }
  .planet-shell { width:61%; }
  .orbiting-orb { transform:scale(.7); }
  .readout-strip { grid-template-columns:39px 1fr; padding:8px 10px; }
  .equalizer { display:none; }
  .readout-copy span { max-width:72vw; overflow:hidden; text-overflow:ellipsis; }
  .blade-stack { width:100%; gap:1px; }
  .blade-row { min-height:63px; grid-template-columns:54px 18px 1fr; }
  .selector-wrap { width:52px; height:52px; }
  .selector-orb { width:43px; height:43px; }
  .blade-panel { min-height:51px; padding:0 22px 0 18px; }
  .blade-copy strong { font-size:.92rem; }
  .blade-copy small { font-size:.45rem; }
  .system-message { margin-left:74px; font-size:.51rem; }
  .fx-toggle { right:10px; bottom:29px; font-size:.5rem; padding:7px 9px; }
  .fluid-hud { left:10px; bottom:29px; font-size:.45rem; padding:7px 8px; }
  .fluid-canvas { opacity:.86; }
  .brand-lockup small { display:none; }
  .brand-x { width:33px; height:33px; }
  .top-hud { left:12px; right:12px; }
  .wire-a { width:130vw; height:130vw; }
  .wire-b { width:110vw; height:110vw; }
  .radar { opacity:.22; }
}

@media (prefers-reduced-motion: reduce) {
  .stage { --speed: .08; }
  .vortex-canvas { opacity:.28; }
  .fluid-canvas { opacity:.42; }
  .scanner, .bottom-marquee, .blade-scan, .blade-shine { display:none; }
}