:root {
  /* IBM Plex Sans” from Google Fonts for short explanatory copy */
  --void: #050610;
  --panel: #0B1026;
  --cyan: #00F5FF;
  --magenta: #FF2BD6;
  --green: #7CFF6B;
  --amber: #FFB000;
  --white: #EAFBFF;
  --display: "Audiowide", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "Share Tech Mono", monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; background: var(--void); color: var(--white); }

body { font-family: var(--body); }

button { font: inherit; }

.observatory {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(0, 245, 255, .12), transparent 22%),
    radial-gradient(circle at 76% 18%, rgba(255, 43, 214, .14), transparent 18%),
    radial-gradient(circle at 20% 82%, rgba(124, 255, 107, .08), transparent 16%),
    linear-gradient(135deg, #050610 0%, #070917 48%, #050610 100%);
}

.observatory::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 245, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 245, 255, .045) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 74%);
}

.starfield { position: absolute; inset: 0; pointer-events: none; }
.starfield i { position: absolute; width: 2px; height: 2px; background: var(--white); opacity: .5; box-shadow: 0 0 10px var(--cyan); }

.scan-line {
  position: absolute;
  left: -20%; top: 0;
  width: 18%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 245, 255, .2), transparent);
  animation: scan 5.6s linear infinite;
  pointer-events: none;
}

.rail-map { position: absolute; inset: 5%; width: 90%; height: 90%; opacity: .38; filter: drop-shadow(0 0 8px rgba(0,245,255,.35)); }
.rail-map path, .rail-map circle { fill: none; stroke: var(--cyan); stroke-width: 1.1; stroke-dasharray: 10 12; }
.rail-map circle:last-child { stroke: var(--magenta); opacity: .5; }

.hud-frame { position: fixed; inset: 24px; z-index: 20; pointer-events: none; border: 1px solid rgba(0, 245, 255, .18); background: linear-gradient(180deg, rgba(11, 16, 38, .17), rgba(11, 16, 38, .04)); box-shadow: inset 0 0 42px rgba(0,245,255,.05); }
.corner { position: absolute; width: 72px; height: 72px; border-color: var(--cyan); filter: drop-shadow(0 0 9px var(--cyan)); }
.corner-tl { left: -1px; top: -1px; border-top: 2px solid; border-left: 2px solid; }
.corner-tr { right: -1px; top: -1px; border-top: 2px solid; border-right: 2px solid; }
.corner-bl { left: -1px; bottom: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.corner-br { right: -1px; bottom: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.range { position: absolute; left: 90px; right: 90px; display: flex; justify-content: space-between; color: var(--cyan); font-family: var(--mono); font-size: 12px; letter-spacing: .18em; text-shadow: 0 0 10px var(--cyan); }
.range-top { top: 13px; }
.range-bottom { bottom: 13px; color: var(--amber); text-shadow: 0 0 10px var(--amber); }

.micro { margin: 0; font-family: var(--mono); color: var(--cyan); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.brand-deck { position: absolute; top: 10vh; left: 8vw; z-index: 5; }
.tag { color: var(--amber); margin-bottom: 12px; }
.wordmark { margin: 0; font-family: var(--display); font-size: clamp(42px, 7vw, 108px); line-height: .9; letter-spacing: .08em; color: var(--white); text-transform: uppercase; text-shadow: 0 0 16px rgba(0,245,255,.68), 0 0 44px rgba(255,43,214,.28); }
.wordmark span { display: inline-block; opacity: 0; transform: translateY(-22px) scale(.82); animation: assemble .7s cubic-bezier(.2,1,.2,1) forwards; }
.wordmark span:nth-child(2) { animation-delay: .05s; } .wordmark span:nth-child(3) { animation-delay: .1s; } .wordmark span:nth-child(4) { animation-delay: .15s; } .wordmark span:nth-child(5) { animation-delay: .2s; } .wordmark span:nth-child(6) { animation-delay: .25s; } .wordmark span:nth-child(7) { animation-delay: .3s; } .wordmark span:nth-child(8) { animation-delay: .35s; } .wordmark span:nth-child(9) { animation-delay: .4s; } .wordmark span:nth-child(10) { animation-delay: .45s; }

.state-stage { position: absolute; left: 8vw; bottom: 12vh; width: min(460px, 42vw); min-height: 220px; z-index: 4; }
.state-panel { position: absolute; inset: 0; padding: 28px; background: rgba(11, 16, 38, .52); border: 1px solid rgba(0,245,255,.35); clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 34px 100%, 0 calc(100% - 34px)); backdrop-filter: blur(14px); opacity: 0; transform: translateX(-36px); transition: opacity .45s, transform .45s, border-color .45s, box-shadow .45s; box-shadow: 0 0 34px rgba(0,245,255,.12); }
.state-panel.active { opacity: 1; transform: translateX(0); }
.state-panel h2 { margin: 18px 0 14px; font: 400 clamp(28px, 4vw, 54px)/1 var(--display); text-transform: uppercase; letter-spacing: .07em; }
.state-panel p:last-child { margin: 0; color: rgba(234,251,255,.78); line-height: 1.55; font-size: 16px; }

.prediction-core { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(38vw, 430px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(0,245,255,.28); border-radius: 50%; box-shadow: inset 0 0 60px rgba(0,245,255,.08), 0 0 34px rgba(0,245,255,.08); transition: transform .7s cubic-bezier(.2,1,.2,1); }
.prediction-core::before, .prediction-core::after { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(234,251,255,.18); border-radius: 50%; }
.prediction-core::after { inset: 28%; border-color: rgba(255,43,214,.25); animation: pulse 2.4s infinite; }
.radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(0,245,255,.32), transparent 42deg, transparent 360deg); animation: sweep 7s linear infinite; }
.reticle { position: absolute; width: 80px; height: 80px; border: 1px solid var(--green); opacity: .72; }
.reticle::before, .reticle::after { content: ""; position: absolute; background: var(--green); box-shadow: 0 0 8px var(--green); }
.reticle::before { width: 1px; height: 100%; left: 50%; } .reticle::after { height: 1px; width: 100%; top: 50%; }
.reticle-a { left: 18%; top: 22%; transform: rotate(18deg); } .reticle-b { right: 16%; bottom: 18%; transform: rotate(-28deg); border-color: var(--magenta); }
.reticle-b::before, .reticle-b::after { background: var(--magenta); box-shadow: 0 0 8px var(--magenta); }
.core-label { position: absolute; left: 50%; bottom: 23%; transform: translateX(-50%); color: var(--white); white-space: nowrap; }
.core-shape { position: absolute; inset: 35%; transition: opacity .45s, transform .65s; }
.core-shape span { position: absolute; inset: 0; border: 2px solid var(--cyan); filter: drop-shadow(0 0 8px var(--cyan)); }
.shape-cube span:nth-child(1) { transform: skewY(-28deg) translateX(-24%); } .shape-cube span:nth-child(2) { transform: skewY(28deg) translateX(24%); border-color: var(--magenta); } .shape-cube span:nth-child(3) { transform: rotate(45deg) scale(.72); border-color: var(--amber); }
.shape-hex span { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-color: var(--green); }
.shape-hex span:nth-child(2) { transform: scale(.7); border-color: var(--cyan); } .shape-hex span:nth-child(3) { transform: scale(.42); border-color: var(--magenta); }
.shape-lock span:nth-child(1) { border-radius: 50% 50% 8px 8px; transform: translateY(-22%) scaleX(.68); border-color: var(--green); } .shape-lock span:nth-child(2) { transform: translateY(34%) scale(1.05,.62); border-color: var(--green); } .shape-lock span:nth-child(3) { transform: translateY(38%) scale(.24,.46); background: var(--green); }
.shape-hex, .shape-lock { opacity: 0; transform: rotate(45deg) scale(.75); }

.orbital-panel { position: absolute; z-index: 6; width: 178px; min-height: 150px; padding: 16px; background: rgba(11,16,38,.55); border: 1px solid rgba(0,245,255,.28); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); backdrop-filter: blur(10px); transition: transform .45s, box-shadow .45s, border-color .45s, left .75s, top .75s, right .75s, bottom .75s; }
.orbital-panel > span { display: block; margin-top: 14px; opacity: 0; color: var(--magenta); font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; transition: opacity .3s; }
.hover-lift:hover { transform: translateY(-9px); border-color: var(--magenta); box-shadow: 0 14px 42px rgba(255,43,214,.23), inset 0 -14px 18px rgba(0,245,255,.07); }
.hover-lift:hover > span { opacity: 1; }
.panel-alpha { right: 11vw; top: 15vh; } .panel-beta { right: 7vw; bottom: 22vh; } .panel-gamma { left: 38vw; top: 8vh; } .panel-delta { left: 13vw; top: 43vh; } .panel-epsilon { right: 28vw; bottom: 8vh; }
.iso-icon { position: relative; width: 76px; height: 58px; margin: 20px auto 4px; transform: rotateX(58deg) rotateZ(45deg); transform-style: preserve-3d; filter: drop-shadow(0 0 13px rgba(0,245,255,.7)); }
.iso-icon i { position: absolute; display: block; border: 2px solid var(--cyan); background: rgba(0,245,255,.08); }
.cube-icon i { width: 44px; height: 44px; } .cube-icon i:nth-child(2) { transform: translateZ(22px); border-color: var(--magenta); } .cube-icon i:nth-child(3) { transform: translate(14px,14px); border-color: var(--amber); }
.dish-icon i:nth-child(1) { width: 60px; height: 34px; border-radius: 50%; border-color: var(--cyan); } .dish-icon i:nth-child(2) { width: 12px; height: 58px; left: 32px; top: 22px; border-color: var(--green); } .dish-icon i:nth-child(3) { width: 34px; height: 4px; left: 20px; top: 74px; background: var(--green); }
.city-icon i { width: 16px; bottom: 0; border-color: var(--cyan); } .city-icon i:nth-child(1) { height: 34px; left: 0; } .city-icon i:nth-child(2) { height: 52px; left: 20px; border-color: var(--magenta); } .city-icon i:nth-child(3) { height: 42px; left: 42px; } .city-icon i:nth-child(4) { height: 24px; left: 64px; border-color: var(--amber); }
.prism-icon i:nth-child(1) { width: 62px; height: 62px; clip-path: polygon(50% 0, 100% 80%, 0 80%); border-color: var(--magenta); } .prism-icon i:nth-child(2) { width: 34px; height: 62px; left: 28px; border-color: var(--cyan); } .prism-icon i:nth-child(3) { width: 62px; height: 1px; top: 38px; background: var(--amber); border: 0; }
.engine-icon i { inset: 0; clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); border-color: var(--green); } .engine-icon i:nth-child(2) { inset: 13px; border-color: var(--cyan); } .engine-icon i:nth-child(3) { inset: 25px; border-color: var(--magenta); background: rgba(255,43,214,.2); }

.state-controls { position: absolute; right: 7vw; top: 49%; transform: translateY(-50%); z-index: 8; display: grid; gap: 14px; }
.state-dot { width: 52px; height: 52px; color: var(--white); background: rgba(11,16,38,.5); border: 1px solid rgba(0,245,255,.45); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); cursor: pointer; transition: transform .3s, border-color .3s, box-shadow .3s; }
.state-dot span { font-family: var(--mono); color: inherit; }
.state-dot.active, .state-dot:hover { transform: translateX(-6px); border-color: var(--green); box-shadow: 0 0 24px rgba(124,255,107,.22); color: var(--green); }
.console-control { position: absolute; right: 7vw; bottom: 9vh; z-index: 8; padding: 15px 22px; color: var(--void); background: var(--amber); border: 0; font-family: var(--mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 20px rgba(255,176,0,.35); clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }

.observatory[data-state="1"] .prediction-core { transform: translate(-50%, -50%) rotate(120deg) scale(1.04); }
.observatory[data-state="1"] .shape-cube { opacity: 0; transform: rotate(-45deg) scale(.75); } .observatory[data-state="1"] .shape-hex { opacity: 1; transform: rotate(-120deg) scale(1); }
.observatory[data-state="1"] .panel-alpha { right: 25vw; top: 12vh; } .observatory[data-state="1"] .panel-beta { right: 12vw; bottom: 12vh; } .observatory[data-state="1"] .panel-gamma { left: 12vw; top: 24vh; } .observatory[data-state="1"] .panel-delta { left: 45vw; top: 70vh; } .observatory[data-state="1"] .panel-epsilon { right: 43vw; bottom: 18vh; }
.observatory[data-state="2"] .prediction-core { transform: translate(-50%, -50%) rotate(240deg) scale(.96); }
.observatory[data-state="2"] .shape-cube, .observatory[data-state="2"] .shape-hex { opacity: 0; } .observatory[data-state="2"] .shape-lock { opacity: 1; transform: rotate(-240deg) scale(1); }
.observatory[data-state="2"] .state-panel.active { border-color: var(--green); box-shadow: 0 0 42px rgba(124,255,107,.16); }
.observatory[data-state="2"] .panel-alpha { right: 10vw; top: 55vh; } .observatory[data-state="2"] .panel-beta { right: 32vw; bottom: 67vh; } .observatory[data-state="2"] .panel-gamma { left: 10vw; top: 15vh; } .observatory[data-state="2"] .panel-delta { left: 27vw; top: 66vh; } .observatory[data-state="2"] .panel-epsilon { right: 13vw; bottom: 14vh; }

@keyframes scan { from { transform: translateX(0); } to { transform: translateX(780%); } }
@keyframes assemble { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.08); opacity: .4; } }

@media (max-width: 820px) {
  .range { display: none; }
  .brand-deck { top: 9vh; left: 7vw; }
  .state-stage { width: 86vw; left: 7vw; bottom: 10vh; }
  .prediction-core { width: 74vw; opacity: .7; }
  .orbital-panel { width: 136px; transform: scale(.82); }
  .panel-alpha { right: 5vw; top: 22vh; } .panel-beta { display: none; } .panel-gamma { left: 4vw; top: 34vh; } .panel-delta, .panel-epsilon { display: none; }
  .state-controls { right: 5vw; top: 42%; }
  .console-control { right: 7vw; bottom: 3.8vh; }
}