/* STARBOOK cockpit bundle — starbook.css + atlas.css */
/* =====================================================================
   STARBOOK · starbook.space
   A living, cinematic atlas of everywhere humanity has reached.
   Design system + layout. Deep-space monochrome, one amber accent.
   ===================================================================== */

/* ---------- 1. Design variables ---------- */
:root {
  /* surfaces */
  --bg:        #05070A;
  --bg-1:      #080B11;
  --bg-2:      #0B0F16;
  --panel:     rgba(255, 255, 255, 0.022);
  --panel-2:   rgba(255, 255, 255, 0.04);

  /* ink */
  --ink:       #EAEEF4;
  --ink-soft:  #AEB7C4;
  --muted:     #788494;
  --faint:     #4A5360;

  /* lines */
  --line:      rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.045);

  /* WARM — alive / here / now. beacon-amber, used sparingly.
     amber always means "something alive is happening here". */
  --accent:        #FF9E2C;            /* live beacon */
  --accent-bright: #FFE9CC;            /* white-hot core of the most active points */
  --accent-deep:   #C9812F;
  --accent-glow:   rgba(255, 158, 44, 0.55);
  --accent-wash:   rgba(255, 158, 44, 0.11);
  --accent-line:   rgba(255, 158, 44, 0.38);

  /* COOL — cold / far / empty / frontier. Now a richer cosmic blue→indigo. */
  --cool:        #5B8AB5;              /* near cool */
  --cool-far:    #2A2E78;              /* far dark, indigo-leaning */
  --cool-bright: #8CB4D7;              /* a cool light, e.g. a ship's marker */
  --cool-glow:   rgba(91, 138, 181, 0.45);
  --cool-wash:   rgba(91, 138, 181, 0.10);

  /* NEBULA — cinematic deep-space colours, sampled from real Hubble/Chandra imagery.
     Amber still owns "alive / here"; these paint the cold cosmos and deep scales. */
  --neb-blue:    #3B6BFF;              /* electric blue */
  --neb-indigo:  #5B3BE0;
  --neb-violet:  #8A45E6;
  --neb-magenta: #C84BD6;
  --neb-pink:    #E85AA8;
  --neb-cyan:    #5FD0E6;
  --neb-glow:    rgba(138, 69, 230, 0.42);
  --neb-wash:    rgba(124, 77, 230, 0.12);

  /* type */
  --font-display: "Space Grotesk", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body:    "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  /* motion — weight & inertia */
  --ease:    cubic-bezier(.16, .84, .26, 1);
  --ease-io: cubic-bezier(.62, .05, .2, 1);
  --t-slow:  900ms;
  --t-med:   620ms;
  --t-fast:  320ms;

  /* layout */
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 64px);

  /* fluid type scale */
  --fs-mono:  clamp(.66rem, .62rem + .2vw, .76rem);
  --fs-body:  clamp(1rem, .96rem + .3vw, 1.18rem);
  --fs-lede:  clamp(1.15rem, 1rem + .9vw, 1.6rem);
  --fs-h3:    clamp(1.35rem, 1.1rem + 1.1vw, 1.9rem);
  --fs-h2:    clamp(2.2rem, 1.4rem + 3.6vw, 4.6rem);
  --fs-hero:  clamp(3.4rem, 1.6rem + 8vw, 9rem);
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  /* Gentle "land on each section" — proximity snaps near a section edge but never
     traps the user (mandatory would lock them in). scroll-padding clears the header. */
  scroll-snap-type: y proximity;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

::selection { background: var(--accent-wash); color: var(--accent-bright); }

/* ---------- 3. Utilities ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.visually-hidden, .skip-link {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link:focus {
  position: fixed;
  top: 14px; left: 14px;
  width: auto; height: auto;
  clip: auto; margin: 0;
  padding: 10px 16px;
  background: var(--accent);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: .8rem;
  border-radius: 6px;
  z-index: 200;
}

.eyebrow, .section-index, .mono-tag, .panel__kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
}

.section-index { display: block; margin-bottom: clamp(20px, 4vw, 40px); color: var(--faint); }

.mono-tag { letter-spacing: .14em; color: var(--ink-soft); }
.mono-tag--muted { color: var(--muted); }

.accent-text { color: var(--accent-bright); }

/* buttons */
.btn {
  --pad-y: .9em;
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: var(--pad-y) 1.5em;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--accent-line);
  border-radius: 100px;
  background: linear-gradient(180deg, var(--accent-wash), transparent);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  will-change: transform;
}
.btn:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--accent-wash), rgba(255,158,44,.04));
  box-shadow: 0 0 0 1px rgba(255,158,44,.08), 0 10px 40px -16px var(--accent-glow);
  transform: translateY(-2px);
}
.btn__arrow { width: 18px; height: 18px; color: var(--accent); transition: transform var(--t-med) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--lg { --pad-y: 1.05em; font-size: .9rem; padding-inline: 1.9em; }
.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--accent-line); color: var(--ink); box-shadow: none; transform: none; }
.btn--sm { padding: .6em 1em; font-size: .72rem; }

/* focus visibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 4. Background field ---------- */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -3;
  background: radial-gradient(135% 120% at 70% -10%, #0a1018 0%, #06080d 42%, var(--bg) 100%);
}
.vignette {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,.55) 100%),
    radial-gradient(100% 100% at 50% 120%, rgba(0,0,0,.6), transparent 60%);
}

/* ---------- 5. Header / nav ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), backdrop-filter var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(5, 7, 10, 0.72);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line-soft);
}
.site-nav {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(14px, 2.4vw, 22px) var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark { display: inline-flex; align-items: center; gap: .6em; }
.wordmark__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: .02em;
  color: var(--ink);
}
.wordmark__beacon {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent-bright), var(--accent) 45%, transparent 72%);
  box-shadow: 0 0 14px 1px var(--accent-glow);
  flex: none;
  animation: beaconPulse 4.5s var(--ease-io) infinite;
}
.wordmark--sm .wordmark__text { font-size: 1.05rem; }

.nav-links { list-style: none; display: flex; gap: clamp(18px, 3vw, 40px); padding: 0; }
.nav-links a {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.is-active { color: var(--ink); }
.nav-links a.is-active::after { transform: scaleX(1); }

@media (max-width: 620px) { .nav-links { display: none; } }
/* right-side header group: nav links + the Sign in button (button stays visible on mobile when links hide) */
.nav-right { display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
.site-signin {
  flex: none; display: inline-flex; align-items: center; padding: .5em 1.05em; border-radius: 100px;
  text-decoration: none; white-space: nowrap; font-size: .8rem; letter-spacing: .02em;
  color: var(--accent); border: 1.5px solid var(--accent-line); background: var(--accent-wash);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.site-signin:hover { color: #120d04; background: var(--accent); border-color: var(--accent); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(120px, 18vh, 220px) 0 132px;
}
.hero__inner { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); width: 100%; }
.hero .eyebrow { color: var(--accent); margin-bottom: clamp(20px, 4vh, 38px); }
.hero .eyebrow::before {
  content: ""; display: inline-block;
  width: 7px; height: 7px; margin-right: 12px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 12px 1px var(--accent-glow);
  vertical-align: middle;
  animation: beaconPulse 3s var(--ease-io) infinite;
}
.hero__title { display: block; }
.hero__logotype {
  display: block;
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: .94;
  background: linear-gradient(176deg, #ffffff 18%, #c6cdd8 78%, #9aa3b0);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero__tagline {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, .9rem + 2.4vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  margin-top: clamp(10px, 1.6vw, 20px);
}
.hero__statement {
  max-width: 46ch;
  margin-top: clamp(26px, 4vh, 44px);
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}
.hero__cta-row { margin-top: clamp(34px, 5vh, 52px); }

/* telemetry */
.telemetry {
  position: absolute;
  left: 0; right: 0; bottom: 64px;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  color: var(--muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 16px;
}
.telemetry b { color: var(--ink-soft); font-weight: 500; margin-right: 7px; }
.telemetry i { font-style: normal; color: var(--accent); }
.telemetry__sep { color: var(--faint); }
@media (max-width: 620px) { .telemetry__sep { display: none; } .telemetry { gap: 6px 14px; } }

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .34em;
  color: var(--faint);
}
.scroll-cue__line { width: 1px; height: 42px; background: linear-gradient(var(--accent), transparent); animation: cue 2.4s var(--ease-io) infinite; transform-origin: top; }
@media (max-width: 620px) { .scroll-cue { display: none; } }

/* ---------- 7. Generic section rhythm ---------- */
.idea, .experiences, .witness, .reach, .vision {
  position: relative;
  padding-block: clamp(96px, 16vh, 200px);
}

/* Section snap — land/pause on each home-page section as you scroll up or down.
   The .atlas scroll-animation section is DELIBERATELY excluded so its 280vh
   descent keeps scrolling freely (no snap fighting the animation). */
.hero, .idea, .experiences, .witness, .reach, .waitlist, .vision { scroll-snap-align: start; }

/* ---------- 8. The idea / manifesto ---------- */
.idea__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  max-width: 18ch;
}
.idea__body {
  margin-top: clamp(28px, 4vw, 48px);
  max-width: 58ch;
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- 9. The living atlas ---------- */
.atlas { position: relative; height: 280vh; }
.atlas__sticky {
  position: sticky;
  top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: stretch;
}
#atlas-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas__ui {
  position: relative;
  z-index: 2;
  height: 100%;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-block: clamp(86px, 13vh, 150px) clamp(40px, 7vh, 86px);
}
.atlas__head { align-self: start; }
.atlas__title { font-size: var(--fs-h2); font-weight: 400; margin-top: 4px; }
.atlas__lede { margin-top: 18px; max-width: 38ch; color: var(--ink-soft); font-size: clamp(1rem, .95rem + .4vw, 1.2rem); }
.atlas__cta { margin-top: clamp(22px, 3vw, 32px); pointer-events: auto; }

.atlas__readout {
  align-self: end;
  max-width: var(--wrap);
  margin-inline: auto;
  width: 100%;
  padding-inline: var(--gut);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.atlas__scale { color: var(--accent); }
.atlas__stat { color: var(--ink-soft); }
.atlas__coord { color: var(--muted); }

.atlas__progress {
  margin: 20px var(--gut) 0;
  max-width: var(--wrap);
  margin-inline: auto;
  width: calc(100% - 0px);
  padding-inline: var(--gut);
}
.atlas__progress::before {
  content: ""; display: block; height: 1px; background: var(--line);
  position: relative;
}
.atlas__progress-fill {
  display: block; height: 1px; margin-top: -1px;
  width: var(--p, 0%);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transition: width 80ms linear;
}

/* ---------- 10. Experiences (bento) ---------- */
.exp__title { font-size: var(--fs-h2); font-weight: 400; }
.exp__lede { margin-top: 18px; max-width: 44ch; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.45; }

.bento {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.6vw, 22px);
}

.panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)),
    rgba(8, 11, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t-med) var(--ease), transform var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.panel::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 100% 0%, var(--accent-wash), transparent 55%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
  z-index: -1;
}
.panel:hover { border-color: var(--accent-line); transform: translateY(-3px); }
.panel:hover::after { opacity: 1; }

.panel__kicker { color: var(--accent); }
.panel__name { font-size: var(--fs-h3); font-weight: 500; line-height: 1.08; }
.panel__text { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; max-width: 42ch; }
.panel__body { display: flex; flex-direction: column; gap: 12px; }
.panel .mono-tag { margin-top: auto; padding-top: 6px; }

/* micro-mockups */
.panel__mock {
  position: relative;
  border-radius: 12px;
  background: rgba(3, 5, 9, 0.5);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  min-height: 0;
}
.mock { width: 100%; height: auto; color: var(--faint); }
.mock .ring { stroke-width: 1; }
.ring--3 { opacity: .35; } .ring--2 { opacity: .55; } .ring--1 { opacity: .8; }
.beacon-dot { fill: var(--accent); }
.mock .beacon-dot { filter: drop-shadow(0 0 6px var(--accent-glow)); }
.beacon-halo { fill: var(--accent); opacity: .16; }
.trail { stroke: var(--accent-line); stroke-width: 1.4; stroke-dasharray: 2 4; stroke-linecap: round; }
.dot-dim { fill: var(--ink-soft); opacity: .6; }

/* vista mock */
.mock--vista { display: block; }
.panel--vistas .panel__mock { aspect-ratio: 16 / 10; }
.vista-ring { stroke: var(--accent-line); stroke-width: 1.2; opacity: .7; }
.panel__frame {
  position: absolute; inset: 12px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  pointer-events: none;
}
.panel__frame::before, .panel__frame::after {
  content: ""; position: absolute; width: 10px; height: 10px; border: 1px solid var(--accent-line);
}
.panel__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel__frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* expedition mock */
.exped-path { stroke: var(--line); stroke-width: 1.4; }
.exped-way circle { fill: var(--ink-soft); opacity: .7; }
.exped-marker { fill: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.exped-marker-halo { fill: var(--accent); opacity: .15; }

/* proximity mock */
.prox-sweep { stroke: var(--accent); stroke-width: 1.2; opacity: .8; transform-origin: 160px 104px; animation: sweep 6s linear infinite; }
.prox-dots circle { fill: var(--ink-soft); }
.prox-dots circle:nth-child(odd) { fill: var(--accent); opacity: .9; }

/* signals (interactive) */
.signals { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.signals__dests { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  padding: .5em .85em;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--line); }
.chip.is-active { color: #120d04; background: var(--accent); border-color: var(--accent); font-weight: 500; }

.signals__wire { display: flex; align-items: center; gap: 12px; }
.signals__node {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em;
  color: var(--ink-soft); white-space: nowrap;
}
.signals__node--b { color: var(--accent); }
.signals__track {
  position: relative; flex: 1; height: 2px;
  background: linear-gradient(90deg, var(--line), var(--accent-line));
  border-radius: 2px;
}
.signals__pulse {
  position: absolute; top: 50%; left: 0;
  width: 8px; height: 8px; margin-top: -4px; margin-left: -4px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 10px 2px var(--accent-glow);
  opacity: 0;
}
.signals__pulse.is-travelling { opacity: 1; }

.signals__readout { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.signals__delay {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em;
  color: var(--ink); text-transform: uppercase;
}
.signals__delay b { color: var(--accent); font-weight: 500; }

/* bento placement — tablet */
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .panel--beacon  { grid-column: span 2; }
  .panel--signals { grid-column: span 2; }
  .panel--proximity { grid-column: span 2; }
}
/* bento placement — desktop */
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); }
  .panel--beacon  { grid-column: span 3; grid-row: span 2; }
  .panel--signals { grid-column: span 3; grid-row: span 2; }
  .panel--vistas     { grid-column: span 2; }
  .panel--expeditions{ grid-column: span 2; }
  .panel--proximity  { grid-column: span 2; }
  .panel--beacon .panel__mock { flex: 1; display: grid; place-items: center; }
  .panel--beacon .mock--beacon { max-height: 280px; }
}

/* ---------- 11. Witness ---------- */
.witness::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 80% 30%, rgba(255,158,44,.05), transparent 60%);
  pointer-events: none;
}
.witness__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
@media (min-width: 920px) { .witness__grid { grid-template-columns: 1fr 1.05fr; } }
.witness__title { font-size: var(--fs-h2); font-weight: 400; }
.witness__body { margin-top: 24px; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; max-width: 50ch; }

.moment {
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: rgba(8, 11, 17, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.moment__scene {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 140% at 20% 120%, #101a26 0%, #070a10 55%, #05070a 100%);
  overflow: hidden;
}
.moment__world {
  position: absolute; left: -18%; bottom: -62%;
  width: 86%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #2a3a4b, #0c1622 62%, #070b11);
  box-shadow: inset -30px -20px 60px rgba(0,0,0,.6);
}
.moment__ship-arc {
  position: absolute; top: 18%; left: 8%;
  width: 84%; height: 64%;
  border-top: 1.5px solid var(--cool);
  border-right: 1.5px solid transparent;
  border-radius: 50%;
  transform: rotate(-14deg);
  opacity: .55;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(100deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.moment__ship-arc::after {
  content: ""; position: absolute; right: 6%; top: -4px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--cool);
  box-shadow: 0 0 12px 2px rgba(91,138,181,.7);
}
.moment__caption { padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; gap: 14px; }
.live-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent-glow); animation: liveDot 2.2s var(--ease-io) infinite; }
.moment__name { font-size: var(--fs-h3); font-weight: 500; line-height: 1.12; }
.moment__name em { font-style: italic; color: var(--ink); }
.moment__stats { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 4px; }
.moment__stats div { display: flex; flex-direction: column; gap: 3px; }
.moment__stats dt { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.moment__stats dd { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink); }
.moment__stats dd[data-witness-count] { color: var(--accent); font-variant-numeric: tabular-nums; }

/* ---------- 12. Reach ---------- */
.reach__title { font-size: var(--fs-h2); font-weight: 400; }
.reach__body { margin-top: 24px; max-width: 56ch; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; }
.reach__ladder { list-style: none; padding: 0; margin: clamp(40px, 6vw, 64px) 0 0; display: flex; flex-direction: column; gap: 14px; }
.rung {
  display: grid;
  grid-template-columns: minmax(96px, 0.5fr) 1fr minmax(96px, 0.55fr);
  align-items: center;
  gap: 16px;
  padding-block: 6px;
}
.rung__label { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; color: var(--ink); }
.rung__bar { position: relative; height: 2px; background: var(--line); border-radius: 2px; }
.rung__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--fill, 0%);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  border-radius: 2px;
  box-shadow: 0 0 10px -1px var(--accent-glow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease);
}
.is-revealed .rung__bar::after { transform: scaleX(1); }
.rung__val { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted); text-align: right; }
.rung--peak .rung__label { color: var(--accent-bright); }
.rung--peak .rung__val { color: var(--ink-soft); }
@media (max-width: 560px) {
  .rung { grid-template-columns: 1fr; gap: 6px; }
  .rung__val { text-align: left; }
}

/* ---------- 12b. Waitlist ---------- */
.waitlist { position: relative; text-align: center; padding-block: clamp(96px, 16vh, 200px); }
.waitlist__inner { display: flex; flex-direction: column; align-items: center; }
.waitlist__title { font-size: var(--fs-h2); font-weight: 400; max-width: 16ch; line-height: 1.06; }
.waitlist__body {
  margin-top: clamp(16px, 2.4vw, 26px);
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: var(--fs-lede);
  line-height: 1.6;
}
.waitlist__offer {
  margin-top: clamp(20px, 3vw, 30px);
  max-width: 52ch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 3vw, 28px);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--accent-wash), transparent);
}
.waitlist__offer-badge {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #120d04;
  background: var(--accent);
  padding: .42em .9em;
  border-radius: 100px;
  font-weight: 500;
}
.waitlist__offer-text { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; }
.waitlist__offer-text b { color: var(--accent-bright); }
.waitlist__form { margin-top: clamp(28px, 4vw, 44px); width: 100%; max-width: 540px; }
.waitlist__row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.waitlist__input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 1em 1.3em;
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.waitlist__input::placeholder { color: var(--faint); }
.waitlist__input:focus { outline: none; border-color: var(--accent-line); background: var(--panel-2); }
.waitlist__form .btn { flex: 0 0 auto; cursor: pointer; }
/* honeypot — kept out of sight and out of the tab order */
.waitlist__hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.waitlist__note { margin-top: 16px; transition: color var(--t-fast) var(--ease); }
[data-waitlist-status].is-success { color: var(--accent-bright); }
[data-waitlist-status].is-error { color: #E89B7C; }
.waitlist__form.is-error .waitlist__input { border-color: #C8553D; }
.waitlist__form.is-success .waitlist__row { display: none; }
.waitlist__form[data-busy] .btn { opacity: .55; pointer-events: none; }

/* ---------- 13. Vision / closing ---------- */
.vision { text-align: center; padding-block: clamp(120px, 22vh, 260px); }
.vision__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 4vw, 40px); }
.vision__title { font-size: clamp(2.4rem, 1.3rem + 4.4vw, 5.4rem); font-weight: 400; }
.vision__body { max-width: 50ch; color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; }

/* ---------- 14. Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 80px); position: relative; }
.footer__grid {
  display: grid; gap: 28px 40px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 760px) { .footer__grid { grid-template-columns: auto 1fr auto; } }
.footer__line { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; color: var(--muted); margin-top: 10px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: flex-start; }
@media (min-width: 760px) { .footer__nav { justify-content: center; } }
.footer__nav a { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); transition: color var(--t-fast) var(--ease); }
.footer__nav a:hover { color: var(--accent); }
.footer__flavor { line-height: 1.7; max-width: 30ch; }
@media (min-width: 760px) { .footer__flavor { text-align: right; justify-self: end; } }

/* ---------- 15. Sound toggle ---------- */
.sound-toggle {
  position: fixed;
  right: clamp(16px, 3vw, 30px);
  bottom: clamp(16px, 3vw, 30px);
  z-index: 90;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: rgba(5, 7, 10, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--muted);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sound-toggle:hover { color: var(--ink); border-color: var(--accent-line); }
.sound-toggle__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sound-toggle__bars i { width: 2px; height: 4px; background: currentColor; border-radius: 1px; }
.sound-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i { animation: eq 1.1s var(--ease-io) infinite; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(2){ animation-delay: .18s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(3){ animation-delay: .36s; }
.sound-toggle[aria-pressed="true"] .sound-toggle__bars i:nth-child(4){ animation-delay: .12s; }

/* ---------- 16. Reveal system ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- 17. Keyframes ---------- */
@keyframes beaconPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 14px 1px var(--accent-glow); }
  50%      { opacity: .72; box-shadow: 0 0 7px 0 var(--accent-glow); }
}
@keyframes liveDot {
  0%   { box-shadow: 0 0 0 0 var(--accent-glow); }
  70%  { box-shadow: 0 0 0 10px rgba(255,158,44,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,158,44,0); }
}
@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .rung__bar::after { transform: scaleX(1); }
  .atlas { height: auto; }
  .atlas__sticky { position: relative; height: auto; min-height: 88vh; }
  .scroll-cue__line { animation: none; opacity: .5; }
}

/* ============ FAQ (SEO content + conversion) ============ */
.faq__title { font-size: var(--fs-h2); font-weight: 400; margin-bottom: clamp(20px, 4vw, 40px); }
.faq__list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.faq__item { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-1); overflow: hidden; }
.faq__item > summary { list-style: none; cursor: pointer; padding: 18px 20px; font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; color: var(--accent); font-size: 1.35rem; line-height: 1; flex: none; transition: transform .2s ease; }
.faq__item[open] > summary::after { transform: rotate(45deg); }
.faq__item > summary:hover { color: var(--accent-bright); }
.faq__item > p { margin: 0; padding: 0 20px 18px; color: var(--ink-soft); line-height: 1.65; font-size: .96rem; max-width: 66ch; }

/* ============ Social links (shared across pages) ============ */
.sb-socials { display: inline-flex; gap: 16px; align-items: center; }
.sb-socials a { color: var(--ink-soft, var(--soft, #AEB7C4)); display: inline-flex; transition: color .15s ease; }
.sb-socials a:hover { color: var(--accent, #FF9E2C); }
.sb-socials svg { width: 20px; height: 20px; fill: currentColor; }

/* =====================================================================
   STARBOOK · atlas.css
   THE COCKPIT. The WWT universe is the windshield; every datum and every
   control is housed inside a see-through glass instrument floating over it.
   Cyan = cosmos/instruments · amber (#FF9E2C) = alive / here / now.
   Builds on the shared tokens in starbook.css.
   ===================================================================== */

/* Kill the browser's pull-to-refresh + overscroll bounce. Dragging the universe to look used to
   trigger pull-to-refresh → a full page RELOAD → the intro replayed. overscroll-behavior:none stops it. */
html { overscroll-behavior: none; }
.atlas-body {
  height: 100vh; height: 100svh;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  /* ONE fixed edge margin for every HUD element. Constant px (not vw) so the
     margins never change when the window resizes — keeps the layout locked. */
  --edge: 28px;

  /* ── Cockpit roles, top → bottom:
       ① HEADER band (Starbook/Atlas · flight-manual · UTC)
       ② CURVATURE (the canopy arc)
       ③ WINDSHIELD — the two EQUAL side columns live here, strictly BELOW the curvature
       ④ DASH — the full-width rail
     Both columns share ONE width and ONE top/bottom; the rail spans edge-to-edge
     beneath them with a uniform gap. All fixed — never content/window sized. ── */
  --header-h: 56px;              /* ① identity + UTC + flight-manual band */
  --canopy-h: 108px;             /* ② curvature band height — shrunk so the curve sits higher, giving the side panels headroom */
  --panel-top: calc(var(--canopy-h) + 22px); /* side panels start BELOW the canopy curve's lowest side-dip (~130px). Tune if the gap is too big/small. */
  --panel-w: 176px;              /* SAME width for BOTH side frames */
  --panel-h: 656px;              /* SAME fixed height for BOTH frames — they NEVER stretch with the screen */
  --rail-bottom: 26px;           /* dash distance from the viewport bottom (MUST match .ck-dash bottom so the panel↔dash gap holds) */
  --rail-h: 108px;               /* fixed dash height (thinner — 2 even rows) */
  --col-gap: 12px;               /* uniform gap: side frame → dash */
  --col-bottom: calc(var(--rail-bottom) + var(--rail-h) + var(--col-gap));
}
.mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .14em; }

/* ---- The engine stage (the windshield) ---- */
/* touch-action:none → the engine owns touch-drags on the canvas; the browser never reads them as
   scroll / pull-to-refresh / pinch-reload. */
.atlas-stage { position: fixed; inset: 0; z-index: 0; background: #000; touch-action: none; }
/* Direct child only — overlay layers (#sb-iss-wrap, #sb-rocks-wrap) carry their own square/viewport canvases */
.atlas-stage > canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
#sb-iss-wrap {
  overflow: hidden;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
/* ISS canvas: square only — never % width/height (stretches the 3-D model flat). */
#sb-iss-wrap canvas.sb-iss-canvas {
  display: block;
  box-sizing: border-box;
  touch-action: none;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  max-width: none !important;
  max-height: none !important;
  width: auto !important;
  height: auto !important;
}
#sb-rocks-wrap canvas,
#sb-galaxy-discs-wrap canvas { display: block; width: 100% !important; height: 100% !important; max-width: none !important; touch-action: none; }

/* ---- Overview-Effect wash (masks each render-mode switch) ---- */
#overview-wash {
  position: fixed; inset: 0; z-index: 30;
  pointer-events: none; opacity: 0;
  transition: opacity 420ms var(--ease-io);
}
#overview-wash.is-on { opacity: 1; }
#overview-wash[data-tint="amber"] {
  background:
    radial-gradient(120% 100% at 50% 64%, rgba(255,158,44,.42), rgba(255,158,44,.10) 42%, rgba(5,7,10,.92) 78%);
}
#overview-wash[data-tint="cool"] {
  background:
    radial-gradient(120% 100% at 50% 40%, rgba(91,138,181,.34), rgba(44,74,117,.18) 44%, rgba(5,7,10,.94) 80%);
}

/* fine instrument vignette + cinematic nebula glow at the edges (real-sky palette) */
.atlas-edge {
  position: fixed; inset: 0; z-index: 20; pointer-events: none;
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,.62);
  background:
    radial-gradient(75% 55% at 100% 0%, var(--neb-glow), transparent 55%),
    radial-gradient(70% 55% at 0% 100%, rgba(59,107,255,.18), transparent 55%),
    radial-gradient(60% 50% at 100% 100%, rgba(232,90,168,.12), transparent 60%),
    radial-gradient(140% 100% at 50% -10%, transparent 60%, rgba(0,0,0,.42)),
    radial-gradient(120% 100% at 50% 115%, rgba(0,0,0,.5), transparent 55%);
}

/* ---- Loading ---- */
#atlas-fade { position: fixed; inset: 0; z-index: 70; background: #000; opacity: 1; pointer-events: none; transition: opacity 1.6s ease; }
#atlas-fade.is-clear { opacity: 0; }
#atlas-loading {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: radial-gradient(120% 100% at 50% 30%, #0a1018, var(--bg) 70%);
  text-align: center; padding: var(--gut);
  transition: opacity 700ms var(--ease), visibility 700ms;
}
#atlas-loading.is-gone { opacity: 0; visibility: hidden; }
.loading__beacon {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--accent-bright), var(--accent) 45%, transparent 72%);
  box-shadow: 0 0 26px 4px var(--accent-glow);
  animation: beaconPulse 2.4s var(--ease-io) infinite;
}
.loading__title { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 2vw, 2.4rem); font-weight: 500; letter-spacing: -.02em; }
.loading__status { color: var(--accent); }
.loading__hint { color: var(--muted); }
.noscript-note { position: fixed; inset: 0; display: none; place-content: center; text-align: center; padding: var(--gut); z-index: 70; background: var(--bg); }
.noscript-note a { color: var(--accent); text-decoration: underline; }

/* =====================================================================
   COCKPIT SHELL
   ===================================================================== */
/* 16:9 FLIGHT DECK — the cockpit is ONE rigid 1660×934 stage, scaled uniformly to fit + centred.
   Everything inside is fixed-pixel and scales together, so the layout never distorts or drifts. */
.ck { position: fixed; top: 50%; left: 50%; width: 1660px; height: 934px;
  transform: translate(-50%, -50%) scale(var(--deck-fit, 1)); transform-origin: center center;
  z-index: 40; pointer-events: none; }
/* LETTERBOX — universe (#wwt) stays full-bleed + interactive behind; this masks it to the centred
   16:9 window with black bars (the box-shadow paints everything outside the window black). */
#deck-mask { position: fixed; top: 50%; left: 50%;
  width: calc(1660px * var(--deck-fit, 1)); height: calc(934px * var(--deck-fit, 1));
  transform: translate(-50%, -50%); z-index: 20; pointer-events: none; box-shadow: 0 0 0 9999px #000; }
html, body.atlas-body { background: #000; }

/* glass instrument surface — translucent so the universe shows through */
.ck-console, .ck-instr, .ck-relay, .destinations, .comms-dock, .timedial, .flight-meter,
.home-earth, .scene-toggle, .fs-toggle, .sound-toggle--atlas, .skip-intro {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--neb-blue) 30%, var(--line));
  /* lighter raised-glass lift for the smaller chips/buttons (panels override below) */
  box-shadow:
    0 8px 18px -10px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 0 0 1px rgba(255,255,255,.045);
}
/* RAISED CONVEX GLASS — the pane lifts off the page and its edges curl up toward
   the viewer. All light/shadow, no fill, so the glass stays clear. */
.ck-console, .ck-instr, .ck-relay, .destinations, .comms-dock {
  box-shadow:
    0 16px 40px -16px rgba(0,0,0,.66),               /* drop shadow — lifted off the page */
    inset 0 1px 0 rgba(255,255,255,.46),             /* bright top lip catching the light */
    inset 0 0 0 1px rgba(255,255,255,.05),           /* faint rim — every edge curls up */
    inset 0 18px 26px -20px rgba(255,255,255,.13),   /* convex bulge toward the viewer */
    inset 0 -16px 24px -20px rgba(0,0,0,.5);         /* far edge curving away off-page */
}

/* canopy: thin neon trim arcing across the top of the windshield */
.ck-canopy { position: fixed; top: 0; left: 0; width: 100%; height: var(--canopy-h); z-index: 39; pointer-events: none; }

/* ── 100×100 ALIGNMENT GRID — dev overlay. ON with ?grid or the 'g' key.
   Minor lines every 1% (100×100 cells); brighter majors every 10%, so the 50%
   lines mark dead-centre. pointer-events:none — it never blocks the cockpit. ── */
#grid-overlay { display: none; }
body.has-grid #grid-overlay {
  display: block; position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(95,208,230,.20) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95,208,230,.20) 1px, transparent 1px),
    linear-gradient(to right,  rgba(95,208,230,.60) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(95,208,230,.60) 1px, transparent 1px);
  background-size: 1% 1%, 1% 1%, 10% 10%, 10% 10%;
}
/* dead-centre crosshair (50% lines) in hot pink so 0/50/100 read instantly */
body.has-grid #grid-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,77,143,.85) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,77,143,.85) 1px, transparent 1px);
  background-position: 50% 0, 0 50%;
  background-repeat: no-repeat;
}
.ck-canopy__arc { fill: none; stroke: var(--neb-blue); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--neb-blue) 70%, transparent)); opacity: .85; }
.ck-canopy__arc--inner { stroke: var(--neb-magenta); opacity: .42;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--neb-magenta) 60%, transparent)); }

/* top chrome */
.atlas-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 42;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px var(--edge);
  pointer-events: none;
}
.atlas-back {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500; color: var(--ink); padding: 6px 4px;
}
.atlas-back svg { width: 18px; height: 18px; color: var(--muted); transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.atlas-back:hover svg { color: var(--accent); transform: translateX(-3px); }
.atlas-back__text { font-size: 1.05rem; letter-spacing: .01em; }
.atlas-back__text i { color: var(--muted); font-style: normal; margin-left: 4px; font-weight: 400; }
.atlas-clock { color: var(--ink-soft); white-space: nowrap; }
.atlas-top__right { display: flex; align-items: center; gap: 14px; }

/* Flight-guide ? toggle — a small neon glass instrument that fits the cockpit. */
.atlas-help {
  pointer-events: auto;   /* the cockpit is pointer-events:none; the back link sets auto, this needs it too */
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--neb-cyan) 55%, transparent);
  background: color-mix(in srgb, #0a2838 22%, transparent); color: var(--neb-cyan);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 12px -3px color-mix(in srgb, var(--neb-cyan) 45%, transparent);
  transition: border-color var(--t-fast, .18s) ease, box-shadow var(--t-fast, .18s) ease, color .18s ease;
}
.atlas-help svg { width: 19px; height: 19px; }
.atlas-help:hover { color: var(--accent); border-color: var(--accent-line); box-shadow: 0 0 14px -3px var(--accent-glow); }
/* Sign in — the conversion CTA (amber pill). Shown when signed out; the /api/me check hides it once authed. */
.atlas-signin {
  pointer-events: auto; flex: none; display: inline-flex; align-items: center;
  padding: 7px 15px; border-radius: 100px; text-decoration: none; white-space: nowrap;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); border: 1.5px solid var(--accent-line);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 0 14px -4px var(--accent-glow);
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.atlas-signin:hover { color: #120d04; background: var(--accent); border-color: var(--accent); }

/* Flight guide overlay — matched to the homepage brand (glass panel, Space Grotesk, amber eyebrow). */
.atlas-guide {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
  background: rgba(3, 5, 8, .68); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; animation: guideFade .26s var(--ease, ease) forwards;
  pointer-events: auto;   /* the cockpit is pointer-events:none; re-enable taps + scroll for the guide */
}
.atlas-guide[hidden] { display: none; }
@keyframes guideFade { to { opacity: 1; } }
.atlas-guide__card {
  position: relative; width: min(440px, 100%); max-height: 86svh; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 30px 28px 26px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(20, 26, 40, .96), rgba(9, 12, 20, .97));
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .8), 0 0 0 1px rgba(95, 208, 230, .06),
              inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: translateY(10px) scale(.985); animation: guideRise .3s var(--ease, ease) .02s forwards;
}
@keyframes guideRise { to { transform: none; } }
.atlas-guide__x {
  position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .05); color: var(--ink-soft); cursor: pointer;
}
.atlas-guide__x:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.atlas-guide__x svg { width: 18px; height: 18px; }
.atlas-guide__kicker {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px; display: inline-flex; align-items: center; gap: 9px;
}
.atlas-guide__kicker::before { content: ''; width: 18px; height: 1px; background: var(--accent); opacity: .7; }
.atlas-guide__title { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; line-height: 1.1; color: var(--ink); margin: 0 0 8px; }
.atlas-guide__lede { font-family: var(--font-body); font-size: .92rem; line-height: 1.5; color: var(--ink-soft); margin: 0 0 22px; }
.atlas-guide__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; }
.atlas-guide__list li {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .06);
}
.atlas-guide__list li:first-child { border-top: 0; }
.atlas-guide__k { font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--neb-cyan); }
.atlas-guide__v { font-family: var(--font-body); font-size: .88rem; line-height: 1.45; color: var(--ink-soft); }
.atlas-guide__foot {
  font-family: var(--font-body); font-size: .8rem; line-height: 1.5; color: var(--muted);
  padding: 13px 14px; margin: 0 0 22px; border-radius: 12px;
  background: var(--neb-wash, rgba(124, 77, 230, .12)); border: 1px solid rgba(124, 77, 230, .2);
}
.atlas-guide__close {
  width: 100%; padding: 13px; border-radius: 12px; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: .9rem; letter-spacing: .01em;
  color: #0a0d12; background: var(--accent); border: 0;
  box-shadow: 0 0 24px -6px var(--accent-glow); transition: filter .18s ease, transform .12s ease;
}
.atlas-guide__close:hover { filter: brightness(1.06); }
.atlas-guide__close:active { transform: scale(.99); }

/* =====================================================================
   SIDE CONSOLES — slim glass panels hugging the edges (windshield stays big)
   ===================================================================== */
/* Anchored to the window: pinned below the header, capped so the panel can NEVER
   reach the bottom dash. Heights scale with the viewport (svh) and the panel scrolls
   if its content is taller than the room available — so nothing ever overlaps,
   at any window size. nav clears the att/hdg gauges; targets clears the taller
   velocity + flight-meter stack on the right. */
.ck-console {
  position: fixed; top: 96px;          /* sits below the canopy/top-frame trim, not bleeding into it */
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 14px; border-radius: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  pointer-events: auto;
}
.ck-console--nav     { left: var(--edge); width: var(--panel-w);
                       /* FIXED-SIZE frame, docked to the dash, STUCK to the bottom of the screen */
                       top: var(--panel-top); bottom: var(--col-bottom); height: auto; transform: none;
                       max-height: none; }
.ck-console--targets { right: var(--edge); width: var(--panel-w); align-items: stretch;
                       max-height: none; }

/* FIXED cockpit — the columns NEVER scroll and instruments NEVER shrink or move.
   Every module is a fixed size and the stack is sized to fit the windshield, so
   there is nothing to scroll. overflow:visible guarantees no scrollbar can appear. */
.ck-console { overflow: hidden; }   /* clip to the box — content can NEVER spill onto the canopy curve or the dash */
.ck-console > * { flex-shrink: 0; }

/* scale ladder */
#tier-rail { position: relative; display: flex; flex-direction: column; gap: 2px; }
#tier-rail.is-tucked { display: none; }            /* docked cockpit: peek handle can still hide it */
.rail__tier {
  pointer-events: auto;
  display: flex; align-items: center; gap: 11px;
  background: transparent; border: 0; padding: 6px 4px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: left; cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.rail__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: transparent;
  transition: all var(--t-med) var(--ease);
}
.rail__tier:hover { color: var(--ink); }
.rail__tier:hover .rail__dot { border-color: var(--neb-blue); box-shadow: 0 0 10px 1px var(--neb-wash); }
.rail__tier.is-active { color: var(--ink); }
.rail__tier.is-active .rail__dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 14px 2px var(--accent-glow), 0 0 26px 7px var(--neb-wash);
}
#tier-rail::before {
  content: ""; position: absolute; left: 8px; top: 16px; bottom: 16px; width: 1px;
  background: linear-gradient(var(--neb-blue), var(--neb-violet), var(--neb-magenta));
  z-index: -1; opacity: .5;
}

/* dive-inward action, docked under the ladder */
.atlas-descend {
  pointer-events: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .55em;
  padding: .5em 1em; border-radius: 100px;
  border: 1px solid var(--accent-line); background: linear-gradient(180deg, var(--accent-wash), transparent);
  color: var(--ink);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.atlas-descend:hover { border-color: var(--accent); box-shadow: 0 8px 30px -16px var(--accent-glow); }
.atlas-descend svg { width: 13px; height: 13px; color: var(--accent); }
.atlas-descend__chev { animation: nudge 2.4s var(--ease-io) infinite; }
.atlas-descend[hidden] { display: none; }

/* telemetry readout spans, docked in the nav console */
.ro { color: var(--muted); font-size: .58rem; letter-spacing: .08em; line-height: 1.5; }
.ro--source { color: var(--neb-cyan); }

/* =====================================================================
   NAV CONSOLE — hybrid: header · beacons donut · warp equalizer · value list ·
   ATT/HDG/ALT gauges folded in. Lighting unchanged (neon housing, cyan content).
   ===================================================================== */
.ck-head2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ck-head2__name  { color: var(--neb-cyan); letter-spacing: .34em; font-size: .56rem; opacity: .85; }
.ck-head2__scale { color: var(--accent); letter-spacing: .12em; font-size: .56rem; text-transform: uppercase; white-space: nowrap; }

.nav-beacons { display: flex; align-items: center; gap: 11px; }
.nav-donut { width: 52px; height: 52px; flex: none; }
.nav-donut__track { fill: none; stroke: rgba(95,208,230,.16); stroke-width: 5; }
.nav-donut__fill  { fill: none; stroke: var(--neb-cyan); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 118 188;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--neb-cyan) 55%, transparent)); }
.nav-donut__lbl   { fill: var(--muted); font-family: var(--font-mono); font-size: 6px; letter-spacing: .08em; }
.nav-count { color: var(--ink); font-size: .6rem; letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }

.nav-warp { display: flex; flex-direction: column; gap: 5px; }
.nav-bars { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.nav-bars i { flex: 1; background: var(--neb-cyan); border-radius: 1px 1px 0 0;
  box-shadow: 0 0 4px color-mix(in srgb, var(--neb-cyan) 55%, transparent); animation: navbar 1.5s ease-in-out infinite; }
@keyframes navbar { 0%,100% { height: 22%; } 50% { height: 90%; } }
.nav-bars i:nth-child(2){animation-delay:.15s}.nav-bars i:nth-child(3){animation-delay:.45s}.nav-bars i:nth-child(4){animation-delay:.2s}
.nav-bars i:nth-child(5){animation-delay:.6s}.nav-bars i:nth-child(6){animation-delay:.35s}.nav-bars i:nth-child(7){animation-delay:.7s}
.nav-bars i:nth-child(8){animation-delay:.1s}.nav-bars i:nth-child(9){animation-delay:.5s}.nav-bars i:nth-child(10){animation-delay:.28s}

.nav-vlist { display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid color-mix(in srgb, var(--neb-blue) 20%, var(--line)); padding-top: 7px; text-transform: uppercase; }

.nav-gauges { display: flex; gap: 6px; margin-top: 2px; }
.nav-gauges .ck-instr { flex: 1; padding: 6px 3px 5px; gap: 3px; }
.nav-gauges .ck-dial  { width: 100%; height: auto; }
.dial-shell .dial-tick { stroke: var(--neb-cyan); stroke-width: 1; opacity: .5;  fill: none; }
.dial-shell .dial-rim  { stroke: var(--neb-cyan); stroke-width: 1; opacity: .55; fill: none; }
@media (prefers-reduced-motion: reduce) { .nav-bars i { animation: none; height: 55%; } }

/* =====================================================================
   RIGHT CONSOLE — consolidated: targets grid · relay globe · comms · velocity · on-station
   ===================================================================== */
.ck-relay { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px 5px; border-radius: 14px; }
.globe-mini { display: block; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--neb-cyan) 50%, transparent)); }
.cap { color: var(--muted); font-size: .54rem; letter-spacing: .1em; text-transform: uppercase; }
.cap b { color: var(--accent); font-weight: 500; }
.ctr { text-align: center; }
.comms-row { display: flex; align-items: center; gap: 8px; }
.launch-feed__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sig-wave { width: 100%; height: auto; display: block; margin-bottom: 2px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--neb-cyan) 45%, transparent)); }

/* --- consolidated right console: compact-to-fit, docked to the bottom rail.
   Scoped to .ck-console--targets so it beats the base .dest__list/.destinations rules.
   Shares the left column's top + bottom anchors so both columns are equal height. */
.ck-console--targets { top: var(--panel-top); bottom: var(--col-bottom); height: auto; transform: none;
  max-height: none; gap: 6px; padding: 11px 13px; }
/* Target search — primary lookup bar (Andromeda, deep-sky, bodies…). Sits under the TARGETS header. */
.target-search { display: flex; flex-direction: column; gap: 4px; width: 100%; pointer-events: auto; }
.target-search__tag { color: var(--neb-cyan); letter-spacing: .22em; font-size: .5rem; text-transform: uppercase; }
.ck-console--targets .warp-select--panel {
  width: 100%; max-width: none; min-width: 0; padding: 6px 8px; border-radius: 14px;
}
.ck-console--targets .warp-select--panel .warp-search { width: 100%; flex: 1; min-width: 0; font-size: .58rem; }
.ck-console--targets .destinations { overflow: visible; padding: 0; gap: 0; }
.ck-console--targets .dest__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; overflow-y: auto; max-height: 96px; min-height: 0; scrollbar-width: thin; }
.ck-console--targets .dest--moon { padding-left: 15px; opacity: .82; font-size: .53rem; line-height: 1.3; }
.ck-console--targets .dest--moon:hover { padding-left: 18px; opacity: 1; }
.ck-console--targets .dest { font-size: .62rem; padding: 5px 0 5px 7px; line-height: 1.35; min-height: 22px; }
.ck-console--targets .dest:hover { padding-left: 9px; }
.ck-console--targets .globe-mini { width: 64px; height: 64px; }
/* comms LOCKED to a fixed box — CSS-enforced height + overflow:hidden, so it can
   NEVER grow or shrink as launch/signal data updates. (min-height let it grow to 204+.) */
.ck-console--targets .comms-dock { gap: 4px; padding: 8px 11px; height: 166px; overflow: hidden; justify-content: flex-start; }
.ck-console--targets .comms-dock .launch-feed,
.ck-console--targets .comms-dock .signal-cue { gap: 2px; }
.ck-console--targets .tinydonut { width: 32px; height: 32px; flex: none; }
.ck-console--targets .launch-feed__name { font-size: .64rem; line-height: 1.12;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
/* provider clamped to ONE line — the variable 1-to-3-line wrap was a prime shape-shifter */
.ck-console--targets .launch-feed__meta { font-size: .56rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-console--targets .sig-wave { max-height: 22px; }
.ck-console--targets .signal-cue__head,
.ck-console--targets .signal-cue__meta { font-size: .54rem; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* belt-and-suspenders: any direct text in the comms dock wraps/clips inside it */
.ck-console--targets .comms-dock, .ck-console--targets .comms-dock .launch-feed__txt { min-width: 0; }
.ck-console--targets .comms-dock { overflow: hidden; }
.ck-console--targets .relay-row { display: flex; align-items: stretch; justify-content: space-evenly; gap: 6px; }
.ck-console--targets .relay-row .ck-relay,
.ck-console--targets .relay-row .nav-gauges--right { flex: 0 1 auto; }
.ck-console--targets .nav-gauges--right { justify-content: center; margin: 0; }
.ck-console--targets .nav-gauges--right .ck-instr { flex: 0 1 auto; padding: 6px 6px 5px; gap: 2px; }
.ck-console--targets .nav-gauges--right .ck-dial { width: 52px; height: 52px; }
.ck-console--targets .nav-gauges--right .ck-instr__lbl { font-size: .5rem; }
/* width:auto drops the dash-era 204px so it fits the console frame; min-height + nowrap
   ETA lock it to ONE size (like comms) — never shrinks/grows between on-station & arriving */
.ck-console--targets .flight-meter { width: auto; gap: 5px; padding: 8px 13px 9px; height: 42px; justify-content: center; }
/* keep the flight-meter's 42px slot RESERVED even when idle/hidden, so the throttle
   below it never moves up — fixed layout, no jumping. */
.ck-console--targets #flight-meter[hidden] { display: flex !important; visibility: hidden; }
.ck-console--targets .flight-meter__to { font-size: .56rem; }
.ck-console--targets .flight-meter__eta { font-size: .6rem; white-space: nowrap; }
.ck-console--targets .flight-meter__track { margin: 0 2px; }       /* inset so the fill never touches the tube */
.ck-console--targets .flight-meter__fill { box-shadow: 0 0 4px var(--accent-glow); }  /* tame the glow bleed */

/* THRUST throttle — vertical soundboard fader (uncoupled from the trip).
   down = max reverse · centre = idle · up = max forward (never warp). */
.ck-throttle { width: 100%; gap: 5px; }
.throttle__body { display: flex; align-items: center; justify-content: center; gap: 14px; height: 80px; padding: 2px 0; pointer-events: none; }
.throttle__fader { writing-mode: vertical-lr; direction: rtl; width: 18px; height: 100%; -webkit-appearance: none; appearance: none; background: transparent; cursor: ns-resize; pointer-events: auto; }
.throttle__fader::-webkit-slider-runnable-track { width: 5px; height: 100%; border-radius: 100px; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 70%, transparent), rgba(255,255,255,.16) 50%, color-mix(in srgb, var(--neb-cyan) 80%, transparent)); }
.throttle__fader::-moz-range-track { width: 5px; height: 100%; border-radius: 100px; background: linear-gradient(to top, color-mix(in srgb, var(--accent) 70%, transparent), rgba(255,255,255,.16) 50%, color-mix(in srgb, var(--neb-cyan) 80%, transparent)); }
.throttle__fader::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 11px; border-radius: 3px; background: #0a1622; border: 1px solid var(--neb-cyan); box-shadow: 0 0 8px color-mix(in srgb, var(--neb-cyan) 65%, transparent); }
.throttle__fader::-moz-range-thumb { width: 26px; height: 11px; border-radius: 3px; background: #0a1622; border: 1px solid var(--neb-cyan); box-shadow: 0 0 8px color-mix(in srgb, var(--neb-cyan) 65%, transparent); }
.throttle__scale { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100%; font-size: .5rem; letter-spacing: .12em; color: var(--muted); }
.throttle__set { font: inherit; font-style: normal; letter-spacing: inherit; background: none; border: 0; margin: 0;
  padding: 1px 4px; color: var(--muted); cursor: pointer; pointer-events: auto; border-radius: 4px;
  transition: color .15s ease, background .15s ease; }
.throttle__set:first-child { color: var(--neb-cyan); }
.throttle__set:last-child { color: var(--accent); }
.throttle__set:hover { color: #fff; background: rgba(255,255,255,.1); }
.throttle__set:active { background: rgba(255,255,255,.2); }
/* Drive-mode toggle — GLD (glide) vs INR (inertia), stacked left of the fader */
.throttle__mode { display: flex; flex-direction: column; justify-content: center; gap: 5px; height: 100%; pointer-events: auto; }
.throttle__modebtn {
  font-family: var(--font-mono); font-size: .46rem; letter-spacing: .1em; color: var(--muted);
  background: color-mix(in srgb, var(--neb-cyan) 6%, transparent); border: 1px solid var(--line);
  border-radius: 5px; padding: 4px 5px; cursor: pointer; line-height: 1;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.throttle__modebtn:hover { color: var(--ink-soft); border-color: var(--neb-cyan); }
.throttle__modebtn.is-active {
  color: var(--ink); border-color: var(--neb-cyan);
  background: color-mix(in srgb, var(--neb-cyan) 16%, transparent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--neb-cyan) 45%, transparent), inset 0 0 6px -2px color-mix(in srgb, var(--neb-cyan) 40%, transparent);
}

/* =====================================================================
   DESTINATIONS + COMMS (right console)
   ===================================================================== */
.destinations {
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 11px 12px; border-radius: 13px;
  min-height: 0; overflow: hidden;
}
.dest__list { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; }
.dest__list[hidden] { display: none; }
.dest {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .05em; text-align: left;
  color: var(--muted); background: transparent; border: 0; border-left: 1px solid var(--line);
  padding: 6px 0 6px 10px; cursor: pointer; min-height: 28px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), padding var(--t-fast) var(--ease);
}
.dest:hover { color: var(--ink); border-color: var(--neb-violet); padding-left: 14px; }
.dest.is-active { color: var(--accent); border-color: var(--accent); }
/* Locked = still clickable so Join / crew gate fires (audit P0 — never silent ghosts). */
.dest.is-locked,
[data-scalebtn].is-locked {
  opacity: .38;
  cursor: pointer;
  pointer-events: auto;
}

.comms-dock {
  display: flex; flex-direction: column; gap: 9px;
  padding: 11px 12px; border-radius: 13px;
}
.comms-dock .launch-feed, .comms-dock .signal-cue { position: static; display: flex; flex-direction: column; gap: 3px; width: auto; max-width: none; }
.comms-dock .launch-feed[hidden], .comms-dock .signal-cue[hidden] { display: none; }
.launch-feed__name { color: var(--ink); font-size: .76rem; letter-spacing: .02em; line-height: 1.22; }
.launch-feed__meta { color: var(--muted); font-size: .64rem; letter-spacing: .06em; }
.launch-feed__meta b { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }
.signal-cue__head { color: var(--ink-soft); letter-spacing: .1em; font-size: .58rem; }
.signal-cue__head b { color: var(--accent); font-weight: 500; }
.signal-cue__track { position: relative; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--cool-far), var(--accent-line)); }
.signal-cue__fill { position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); transition: width 150ms linear; }
.signal-cue__pulse { position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 10px 2px var(--accent-glow); transition: left 150ms linear; }
.signal-cue__meta { color: var(--muted); letter-spacing: .08em; font-size: .56rem; }


/* =====================================================================
   WITNESS — the live frontier moment, hero, central on the windshield
   ===================================================================== */
.witness-callout {
  position: fixed; z-index: 42;
  top: clamp(70px, 10vh, 104px); left: 50%; transform: translateX(-50%);
  /* keep ~240px clear on each side so the headline never runs under the consoles */
  max-width: min(calc(100vw - 480px), 540px); text-align: center; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.witness-callout[hidden] { display: none; }
.witness__live { display: inline-flex; align-items: center; gap: 9px; color: var(--accent); letter-spacing: .26em; text-transform: uppercase; }
.witness__label {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.01em;
  font-size: clamp(1.05rem, .9rem + 1vw, 1.7rem); line-height: 1.16; color: var(--ink);
  text-shadow: 0 0 calc(8px + var(--flare, 0) * 26px) rgba(255, 158, 44, calc(.12 + var(--flare, 0) * .55));
  transition: text-shadow 320ms var(--ease);
}
.witness__meta { color: var(--muted); letter-spacing: .12em; }
.witness__meta span { color: var(--accent); font-variant-numeric: tabular-nums; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px 2px var(--accent-glow); }

/* =====================================================================
   BOTTOM DASHBOARD — gauges flank a central control stack
   ===================================================================== */
.flight-hint { color: var(--faint); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; opacity: .8; font-size: .62rem; }

.timedial {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 100px;
  pointer-events: auto;
}
.timedial__btn { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em; color: var(--muted); background: transparent; border: 0; padding: 4px 8px; border-radius: 100px; cursor: pointer; transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.timedial__btn:hover { color: var(--ink); }
.timedial__btn.is-active { color: #120d04; background: var(--accent); }

/* warp target selector — cycle the destination (‹ ›) BEFORE engaging WARP (separate control) */
.warp-select {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px; border-radius: 100px;
  pointer-events: auto; color: var(--neb-cyan);
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--neb-cyan) 32%, var(--line));
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.045);
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
}
/* 3-way warp mode toggle — Heading · Auto · Manual-finish */
.warp-mode {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 100px;
  pointer-events: auto;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--neb-cyan) 32%, var(--line));
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.045);
}
.warp-mode__btn {
  pointer-events: auto; cursor: pointer; color: var(--muted);
  background: transparent; border: 0; padding: 4px 9px; border-radius: 100px;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.warp-mode__btn:hover { color: var(--ink); }
.warp-mode__btn.is-active { color: #04181c; background: var(--neb-cyan); }

/* =====================================================================
   BOTTOM DASH — COMMAND RAIL: one continuous glass bar with a cycling neon
   TUBE border (stroke = --neon, glows + whitens on warp); controls sit on
   top, steady. Replaces the old centre-stack dash.
   ===================================================================== */
.ck-dash {
  position: fixed; left: 0; right: 0; bottom: 26px; z-index: 41;
  display: flex; justify-content: center; align-items: flex-end;
  padding: 0 var(--edge); gap: 0; pointer-events: none;
}
.cmd-rail {
  position: relative; pointer-events: auto;
  width: 100%;                         /* edge-to-edge: ends align under the side columns */
  height: var(--rail-h);               /* fixed — the same --rail-h the column bottoms key off */
  display: flex; flex-direction: column; justify-content: center;
  gap: 7px; padding: 9px 24px;
  /* the neon TUBE is a real CSS border now (was a stretchy SVG frame that overflowed the rail).
     border-radius is uniform at ANY height; the border wraps the content exactly. */
  border: 1.5px solid var(--neon); border-radius: 22px;
  background: rgba(8, 15, 25, .42);
  box-shadow:
    0 0 16px -4px color-mix(in srgb, var(--neon) 50%, transparent),
    0 16px 40px -16px rgba(0,0,0,.62),
    inset 0 1px 0 rgba(255,255,255,.16);
}
body[data-neon="off"] .cmd-rail { box-shadow: 0 16px 40px -16px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.14); }

/* two full-width rows. TOP = left cluster | centered hub | right cluster (grid 1fr auto 1fr,
   so the hub sits dead-centre). BOTTOM = the former right cluster spread across. */
.rail-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.rail-row--top { display: grid; grid-template-columns: 1fr auto 1fr; }
.rail-row--bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.rail-grp--l { justify-content: flex-start; gap: 12px; }
.rail-grp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rail-grp--r { justify-content: flex-end; gap: 16px; }
/* FLIGHT centre group — STOP · hub · GO sits in the grid's auto column (dead-centre of the 1fr auto 1fr top row) */
.rail-grp--c { justify-content: center; gap: 12px; }
/* equal width so the hub lands exactly between them → on the 50-line of the 100×100 grid */
.cmd-rail .rail-stop, .cmd-rail .rail-go { min-width: 74px; justify-content: center; padding: 10px 18px; font-size: .66rem; }
.rail-tag { color: var(--neb-cyan); letter-spacing: .2em; font-size: .56rem; text-transform: uppercase; white-space: nowrap; }
.rail-tag i { opacity: .65; font-style: normal; margin: 0 2px; }

/* ALL rail buttons ROUNDED — pill radius, matching the rest of the cockpit (continuity, no chamfers) */
.cmd-rail .timedial__btn, .cmd-rail .warp-mode__btn, .cmd-rail .warp-engage, .cmd-rail .home-earth, .cmd-rail .rail-stop {
  border-radius: 100px;
}
.cmd-rail .timedial { gap: 2px; padding: 3px; border-radius: 100px; background: none; box-shadow: none; }
.cmd-rail .timedial__btn { border: none; padding: 7px 13px; font-size: .62rem; color: var(--ink-soft); letter-spacing: .06em; }
.cmd-rail .timedial__btn:hover { color: var(--ink); }
.cmd-rail .timedial__btn.is-active { color: #120d04; background: var(--accent); border-color: var(--accent); }
.rail-aux { display: flex; align-items: center; gap: 7px; }
.cmd-rail .warp-mode { gap: 5px; padding: 0; background: none; box-shadow: none; border: 0; }
.cmd-rail .warp-mode__btn { padding: 6px 11px; font-size: .58rem; }
.cmd-rail .warp-select { border-radius: 100px; padding: 5px 6px 5px 12px; box-shadow: none; }
.cmd-rail .warp-engage { padding: 10px 18px; font-size: .72rem; }
.cmd-rail .rail-stop { padding: 10px 18px; font-size: .66rem; }
.cmd-rail .rail-earth { padding: 7px 13px; }
.ck-hub { position: relative; z-index: 1; }
.ck-hub svg { width: 50px; height: 50px; display: block; }

/* ── UNIFIED DASH BUTTONS — one glass-pill system across the whole command rail ── */
.cmd-rail .warp-mode__btn, .cmd-rail .warp-engage, .cmd-rail .scene-toggle,
.cmd-rail .sound-toggle--atlas, .cmd-rail .fs-toggle {
  background: rgba(10, 18, 30, .5);
  border: 1px solid color-mix(in srgb, var(--neb-cyan) 32%, transparent);
  border-radius: 100px; color: var(--ink-soft);
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.cmd-rail .warp-mode__btn:hover, .cmd-rail .warp-engage:hover, .cmd-rail .scene-toggle:hover,
.cmd-rail .sound-toggle--atlas:hover, .cmd-rail .fs-toggle:hover {
  color: var(--ink); border-color: color-mix(in srgb, var(--neb-cyan) 72%, transparent); background: rgba(14, 24, 40, .65);
}
/* STOP + GO — the two command buttons: IDENTICAL glass pills, equal width, flanking the hub */
.cmd-rail .rail-stop, .cmd-rail .rail-go {
  min-width: 84px; padding: 11px 0; justify-content: center; text-align: center;
  font-size: .68rem; letter-spacing: .14em;
  background: rgba(10, 18, 30, .62);
  border: 1.5px solid color-mix(in srgb, var(--neb-cyan) 55%, transparent);
  border-radius: 100px; color: var(--ink);
}
.cmd-rail .rail-stop:hover, .cmd-rail .rail-go:hover { background: rgba(14, 24, 40, .82); border-color: var(--neb-cyan); }

/* ── UNIFORM SIZE — every command/toggle button is the EXACT same box (88×36), evenly spaced ── */
.cmd-rail .warp-engage, .cmd-rail .warp-mode__btn, .cmd-rail .scene-toggle,
.cmd-rail .sound-toggle--atlas, .cmd-rail .home-earth {
  width: 88px; min-width: 88px; height: 36px; padding: 0 8px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; font-size: .6rem; letter-spacing: .06em; border-radius: 100px;
}
.cmd-rail .fs-toggle { width: 36px; height: 36px; min-width: 0; padding: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; }
.cmd-rail .rail-stop, .cmd-rail .rail-go { width: 88px; min-width: 88px; padding: 0; }   /* STOP = GO, identical */
.cmd-rail .rail-grp { gap: 8px; }
.cmd-rail .rail-grp--c { gap: 16px; }
.hub-ring  { fill: none; stroke: var(--neb-cyan); stroke-width: 1.3; }
.hub-ticks { fill: none; stroke: var(--neb-cyan); stroke-width: 1; opacity: .5; }
.hub-core  { fill: var(--neb-cyan); }
.hub-arc   { fill: none; stroke: var(--accent); stroke-width: 3; }

/* =====================================================================
   NEON — EVERY glass control wears a neon TUBE: a glowing coloured border +
   outward halo. Content stays normal — only the tube glows. The tube cycles
   cyan → magenta → amber (brand) on a slow ambient loop; white fast-flash on
   warp; off via [data-neon=off]. --neon is a registered <color> animated on
   <body>, so every control inherits the same value and cycles in sync.
   ===================================================================== */
@property --neon { syntax: "<color>"; inherits: true; initial-value: #2E54E6; }
/* brand neon: deep rich blue ↔ magenta only (amber stays for accents elsewhere) */
@keyframes neonCycle { 0%,100% { --neon: #2E54E6; } 50% { --neon: #C84BD6; } }
@keyframes neonWarp  { 0%,100% { --neon: #FFFFFF; } 50% { --neon: #AEC2FF; } }
.atlas-body { animation: neonCycle 16s ease-in-out infinite; }
body:not([data-neon="off"]) #cockpit[data-warp="true"] { animation: neonWarp .7s ease-in-out infinite; }
body[data-neon="off"] { animation: none; --neon: #2E54E6; }

/* the tube — on every glass instrument + control */
.ck-console, .ck-instr, .ck-relay, .destinations, .comms-dock, .timedial, .flight-meter,
.home-earth, .scene-toggle, .fs-toggle, .sound-toggle--atlas, .skip-intro,
.warp-select, .warp-mode, .warp-engage, .atlas-descend,
#warp-stop, #invert-y, #invert-x, #neon-toggle {
  border: 1px solid var(--neon) !important;
  box-shadow:
    0 0 10px color-mix(in srgb, var(--neon) 55%, transparent),     /* neon halo */
    0 0 3px  color-mix(in srgb, var(--neon) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20),                           /* glass top lip */
    0 10px 24px -12px rgba(0,0,0,.6) !important;                   /* lift */
}
/* switch OFF — glow gone, calm static cyan tube, lift stays */
body[data-neon="off"] :is(.ck-console, .ck-instr, .ck-relay, .destinations, .comms-dock, .timedial,
  .flight-meter, .home-earth, .scene-toggle, .fs-toggle, .sound-toggle--atlas, .skip-intro,
  .warp-select, .warp-mode, .warp-engage, .atlas-descend, #warp-stop, #invert-y, #invert-x, #neon-toggle) {
  border: 1px solid color-mix(in srgb, var(--neon) 45%, var(--line)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px -12px rgba(0,0,0,.6) !important;
}
/* the standalone neon chips: readable, non-glowing content */
#warp-stop, #invert-y, #invert-x, #neon-toggle { padding: 4px 14px; border-radius: 100px; color: var(--ink); }
#warp-stop:hover, #invert-y:hover, #invert-x:hover, #neon-toggle:hover { color: #fff; }
#invert-x.is-active, #invert-y.is-active { color: #fff; background: color-mix(in srgb, var(--neon) 16%, transparent); }
/* RADIO playing — amber accent so it reads as "on air" */
#radio-toggle.is-active { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }

.warp-select--combo { position: relative; min-width: 220px; max-width: min(32vw, 320px); }
.warp-search {
  flex: 1; min-width: 0; width: 140px; border: 0; background: transparent; color: var(--ink);
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em; text-transform: none;
  padding: 2px 6px; outline: none;
}
.warp-search::placeholder { color: var(--muted); opacity: .75; text-transform: uppercase; letter-spacing: .08em; font-size: .56rem; }
.warp-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.warp-search__drop {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); margin: 0; padding: 4px 0;
  list-style: none; max-height: min(40vh, 240px); overflow-y: auto;
  background: rgba(8, 15, 25, .96); border: 1px solid color-mix(in srgb, var(--neb-cyan) 42%, var(--line));
  border-radius: 12px; box-shadow: 0 -10px 32px -8px rgba(0,0,0,.75);
  z-index: 60; scrollbar-width: thin; pointer-events: auto;
}
.warp-search__item {
  padding: 7px 12px; font-size: .58rem; letter-spacing: .04em; color: var(--ink-soft);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.warp-search__item:hover, .warp-search__item.is-active { color: var(--ink); background: color-mix(in srgb, var(--neb-cyan) 14%, transparent); }
.warp-search__empty { padding: 8px 12px; font-size: .54rem; color: var(--muted); letter-spacing: .08em; }
.warp-step {
  pointer-events: auto; cursor: pointer; color: var(--neb-cyan);
  background: transparent; border: 0; padding: 1px 7px; line-height: 1;
  font-size: 1.05rem; border-radius: 100px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.warp-step:hover { color: var(--ink); background: color-mix(in srgb, var(--neb-cyan) 18%, transparent); }
.home-earth, .scene-toggle, .fs-toggle, .sound-toggle--atlas {
  position: static; transform: none; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px;
  border-radius: 100px; cursor: pointer; color: var(--muted);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.home-earth { padding: 7px 14px 7px 11px; color: var(--accent); border-color: var(--accent-line); }
.home-earth svg { width: 16px; height: 16px; }
.home-earth:hover { color: #120d04; background: var(--accent); border-color: var(--accent); }
.scene-toggle { padding: 7px 12px; }
.scene-toggle svg { width: 15px; height: 15px; }
.fs-toggle { width: 34px; height: 32px; justify-content: center; padding: 0; }
.fs-toggle svg { width: 16px; height: 16px; }
.scene-toggle:hover, .fs-toggle:hover, .sound-toggle--atlas:hover { color: var(--ink); border-color: var(--neb-blue); }

/* warp engage — the always-on warp-drive control (cyan instrument; amber while warping) */
.warp-engage {
  position: static; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px 7px 11px;
  border-radius: 100px; cursor: pointer; color: var(--neb-cyan);
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--neb-cyan) 40%, var(--line));
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.36), inset 0 0 0 1px rgba(255,255,255,.045);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.warp-engage svg { width: 16px; height: 16px; }
.warp-engage__label b { color: var(--ink); font-weight: 500; }
.warp-engage:hover { color: var(--ink); border-color: var(--neb-cyan); box-shadow: 0 0 18px -4px var(--neb-wash); }
#cockpit[data-warp="true"] .warp-engage,
#cockpit[data-warp="true"] .warp-engage .warp-engage__label b { color: #04181c; }
#cockpit[data-warp="true"] .warp-engage { background: var(--neb-cyan); border-color: var(--neb-cyan); }

/* =====================================================================
   FLIGHT GAUGES — attitude · heading · velocity/warp. Shown only in transit.
   ===================================================================== */
.ck-instr {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 11px 8px; border-radius: 14px; pointer-events: none;
}
/* Hard size cap so a dial can NEVER balloon in wide flex rows. Caps at the design size. */
.ck-dial { width: 62px; height: 62px; max-width: 62px; max-height: 62px; display: block; }
.ck-dial__bezel { fill: none; stroke: color-mix(in srgb, var(--neb-blue) 52%, var(--line)); stroke-width: 1.6; }
.ck-instr__lbl { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.ck-instr__lbl b { color: var(--accent); font-weight: 500; font-variant-numeric: tabular-nums; }

/* attitude / artificial horizon */
.ck-att__sky { fill: color-mix(in srgb, var(--neb-blue) 26%, transparent); }
.ck-att__gnd { fill: color-mix(in srgb, var(--neb-magenta) 22%, transparent); }
.ck-att__horizon { stroke: var(--neb-cyan); stroke-width: 1.4; }
.ck-att__mark { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }

/* heading / course */
.ck-hdg__tick { stroke: var(--muted); stroke-width: 1.4; }
.ck-hdg__card { fill: var(--ink-soft); font-family: var(--font-mono); font-size: 9px; font-weight: 500; }
.ck-hdg__card--n { fill: var(--accent); }
.ck-hdg__needle { fill: var(--accent); }

/* velocity / warp radial */
.ck-velo__track { fill: none; stroke: color-mix(in srgb, var(--neb-blue) 26%, var(--line)); stroke-width: 4; }
.ck-velo__ring { fill: none; stroke: var(--neb-cyan); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 188.5; stroke-dashoffset: 188.5; transition: stroke-dashoffset .14s linear; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--neb-cyan) 60%, transparent)); }
#cockpit[data-warp="true"] .ck-velo__ring { stroke: var(--accent); filter: drop-shadow(0 0 6px var(--accent-glow)); }
.ck-velo__num { fill: var(--ink); font-family: var(--font-mono); font-size: 14px; font-weight: 500; }
.ck-velo__unit { fill: var(--muted); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .12em; }
.ck-instr--velo .ck-instr__lbl[data-warp-state] { color: var(--neb-cyan); letter-spacing: .2em; }
#cockpit[data-warp="true"] .ck-instr--velo .ck-instr__lbl[data-warp-state] { color: var(--accent); }

/* in-transit detail (ETA + progress + ±20% lever) under the velocity gauge */
.flight-meter {
  display: flex; flex-direction: column; gap: 8px; padding: 10px 13px; border-radius: 13px;
  width: min(204px, 44vw); pointer-events: auto;   /* fits its corner track — no bleed into the centre controls */
}
.flight-meter[hidden] { display: none; }
.flight-meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.flight-meter__to { color: var(--accent); letter-spacing: .16em; font-size: .64rem; text-transform: uppercase; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flight-meter__eta { color: var(--ink); letter-spacing: .08em; font-size: .76rem; font-variant-numeric: tabular-nums; }
.flight-meter__track { height: 3px; border-radius: 100px; background: rgba(255,255,255,.12); overflow: hidden; }
.flight-meter__fill { display: block; height: 100%; width: 0%; background: var(--accent); border-radius: 100px; transition: width .12s linear; }

/* =====================================================================
   Misc chrome
   ===================================================================== */
.skip-intro {
  /* Centred on the reticle's vertical axis, docked just ABOVE the reticle (the 360px reticle
     box spans ±180px of screen centre). Clear of both side consoles. Visible only during the intro. */
  position: fixed; z-index: 50; left: 50%; right: auto; top: auto; bottom: calc(50% + 186px); transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); border-radius: 100px; padding: 7px 14px; cursor: pointer; pointer-events: auto;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.skip-intro:hover { color: var(--ink); border-color: var(--neb-blue); }
.skip-intro[hidden] { display: none; }

/* =====================================================================
   TARGETING RETICLE — HERO iris radar (traced from the reference). SHAPE/scale
   only; lighting UNCHANGED (green #35FF6A, glow filter, glass box-shadow reused).
   TWO colour VOICES: --reticle (primary structure) + --reticle-2 (accent shell /
   teeth / frame). Both default to green ("green stays") — recolour a whole voice
   in one line. Heading ring tracks the live camera heading. Reads centred body.
   ===================================================================== */
.reticle {
  --reticle: #5FD0E6;                    /* primary — shape-lab cyan (trialing the original two-tone) */
  --reticle-2: #FF4D8F;                  /* accent voice (gear teeth) — shape-lab pink */
  /* Shape-lab palette — EXACT values from shape-lab.html :root, so the byte-for-byte
     reticle designs in reticles.js resolve to identical colours. */
  --c-pink: #FF4D8F; --c-cyan: #5FD0E6; --c-white: #EAEEF4; --c-amber: #FF9E2C; --bg: #070d16;
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 360px; height: 360px; z-index: 36; pointer-events: none;
}
.reticle__art { width: 100%; height: 100%; display: block; overflow: visible;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--reticle) 65%, transparent)); }
/* the glass lens — same glass language as the instruments, transparent centre */
.reticle__glass {                          /* the lens — sized relative to the reticle (93.3% = 336 of 360) */
  position: absolute; top: 50%; left: 50%; width: 93.3%; height: 93.3%;
  transform: translate(-50%, -50%); border-radius: 50%; background: transparent;
  border: 1.5px solid var(--reticle);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--reticle) 55%, transparent),                /* neon halo */
    0 0 4px  color-mix(in srgb, var(--reticle) 55%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22),                                         /* glass top lip */
    inset 0 0 18px -6px color-mix(in srgb, var(--reticle) 26%, transparent),     /* faint lens sheen */
    0 10px 24px -12px rgba(0,0,0,.55);                                           /* lift */
}
/* shared: no fill, non-scaling strokes */
.reticle__ring, .reticle__ring--in, .reticle__dots, .reticle__arc, .reticle__cross,
#ret-teeth path, #ret-ticks path, #ret-corona path { fill: none; vector-effect: non-scaling-stroke; }
/* PRIMARY voice */
.reticle__ring--head, .reticle__ring--mid, .reticle__dots, .reticle__ring--in, .reticle__cross,
.reticle__arc, #ret-ticks path, #ret-corona path { stroke: var(--reticle); }
.reticle__pip { fill: var(--reticle); stroke: none; }
/* ACCENT voice — the gear teeth */
#ret-teeth path { stroke: var(--reticle-2); }

.reticle__ring--head { stroke-width: 1.5; opacity: .85; stroke-dasharray: 150 38;
  transform: rotate(var(--ret-heading, 0deg)); transform-origin: center; transform-box: fill-box; }
.reticle__ring--mid  { stroke-width: 1.5; opacity: .6;  stroke-dasharray: 44 30;
  transform-origin: center; transform-box: fill-box; animation: reticleSpin 30s linear infinite reverse; }
.reticle__dots    { stroke-width: 5;   opacity: .5;  stroke-dasharray: 2 8; }
.reticle__ring--in{ stroke-width: 1;   opacity: .4; }
.reticle__arc     { stroke-width: 6;   opacity: .85; }
.reticle__cross   { stroke-width: 1.6; opacity: .9;  stroke-linecap: round; }
#ret-teeth path   { stroke-width: 2;   opacity: .8; }
#ret-ticks path   { stroke-width: 1;   opacity: .5; }
#ret-corona path  { stroke-width: 1;   opacity: .7; }
@keyframes reticleSpin { to { transform: rotate(360deg); } }

.reticle__readout {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap;
}
.reticle__lock   { color: var(--reticle); letter-spacing: .26em; font-size: .54rem; text-transform: uppercase;
  text-shadow: 0 0 6px color-mix(in srgb, var(--reticle) 60%, transparent), 0 1px 3px #000; }
.reticle__target { color: var(--ink); letter-spacing: .14em; font-size: .82rem; text-transform: uppercase;
  text-shadow: 0 0 8px #000, 0 1px 4px #000; }

/* aiming / lock states — brackets close in and the glow tightens on lock */
.reticle[data-aim="false"] .reticle__target { opacity: .3; }
.reticle[data-locked="true"] .reticle__art {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--reticle) 90%, transparent)); }
.reticle[data-locked="true"] .reticle__glass {
  box-shadow:
    0 0 20px color-mix(in srgb, var(--reticle) 75%, transparent),
    0 0 7px  color-mix(in srgb, var(--reticle) 65%, transparent),
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 24px -6px color-mix(in srgb, var(--reticle) 42%, transparent),
    0 10px 24px -12px rgba(0,0,0,.55);
}
@media (prefers-reduced-motion: reduce) { .reticle__ring--mid { animation: none; } }

/* Multi-Reticle Selector — compact glass chip just below the reticle readout */
.reticle-pick {
  position: fixed; left: 50%; top: calc(50% + 220px); transform: translateX(-50%);
  z-index: 37; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 8px; border-radius: 100px;
  background: color-mix(in srgb, #0a2838 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--reticle) 30%, transparent);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--reticle) 35%, transparent);
}
.reticle-pick__name {
  min-width: 76px; text-align: center; color: var(--ink);
  letter-spacing: .16em; font-size: .6rem; text-transform: uppercase;
  text-shadow: 0 0 6px color-mix(in srgb, var(--reticle) 45%, transparent), 0 1px 3px #000;
}
.reticle-pick__cyc {
  width: 20px; height: 20px; display: grid; place-items: center;
  background: transparent; border: 1px solid color-mix(in srgb, var(--reticle) 28%, transparent);
  border-radius: 50%; color: var(--reticle); font-size: .8rem; line-height: 1; cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.reticle-pick__cyc:hover {
  color: var(--ink); border-color: var(--reticle);
  background: color-mix(in srgb, var(--reticle) 16%, transparent);
}

.atlas-legal {
  /* Lives INSIDE #cockpit (which has a transform) → this fixed element is positioned relative to the
     scaled deck, so it rides the dash at the deck's bottom edge at any window size (no viewport overlap). */
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 6px;
  max-width: none; white-space: nowrap; text-align: center; color: var(--faint); line-height: 1.5; font-size: .54rem;
  pointer-events: none; letter-spacing: .05em;
}

/* Account links inside the Flight Manual (Profile · Sign out) — moved here from the footer. */
.atlas-guide__acct { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 16px; }
.atlas-guide__acct a {
  display: inline-block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border: 1px solid rgba(255, 255, 255, .18); border-radius: 100px; padding: 8px 15px;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.atlas-guide__acct a:hover { border-color: var(--accent); color: var(--accent); }

/* =====================================================================
   Always-on body labels (projected onto the live 3D view) — DO NOT regress
   ===================================================================== */
#atlas-blabels, #atlas-dslabels { position: fixed; inset: 0; z-index: 33; pointer-events: none; }
.atlas-dslabel { position: absolute; top: 0; left: 0; width: 0; height: 0; will-change: transform; }
/* Galaxies/nebulae/clusters: ONE WWT survey sprite + name — no CSS dot layered on top */
.ds--cosmos .ds-star { display: none !important; pointer-events: none; }
/* Name dead-centered on the projected world point (same contract as planet labels). */
.ds--cosmos .ds-name { top: 0; left: 0; transform: translate(-50%, -50%); }
.ds-star {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--sc, var(--neb-cyan)) 46%, transparent 72%);
  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--sc, var(--neb-cyan)) 55%, transparent);
  pointer-events: auto; cursor: pointer; transition: box-shadow var(--t-fast) var(--ease);
}
.ds-name {
  position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); white-space: nowrap;
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--neb-cyan); text-shadow: 0 0 6px #000, 0 1px 3px #000;
  pointer-events: auto; cursor: pointer;
}
.atlas-dslabel:hover .ds-star { box-shadow: 0 0 20px 7px color-mix(in srgb, var(--neb-blue) 60%, transparent); }
.atlas-blabel {
  position: absolute; top: 0; left: 0; will-change: transform; white-space: nowrap;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(0, 0, 0, 1), 0 1px 4px rgba(0, 0, 0, 1);   /* legible plain text, no pill — sits INSIDE the object */
  pointer-events: auto; cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.atlas-blabel:hover { color: var(--ink); }

@keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* =====================================================================
   MINIMAL scene — kill the glows for a clean Tesla/SpaceX read
   ===================================================================== */
body[data-scene="minimal"] {
  --accent-glow: transparent; --accent-wash: transparent;
  --neb-glow: transparent; --neb-wash: transparent; --cool-glow: transparent;
}
body[data-scene="minimal"] .ck-canopy__arc { filter: none; opacity: .5; }
body[data-scene="minimal"] .ck-canopy__arc--inner { filter: none; opacity: .26; }
body[data-scene="minimal"] .ds-star { box-shadow: none; }
body[data-scene="minimal"] .atlas-edge { opacity: .28; }
body[data-scene="minimal"] .rail__tier:hover .rail__dot { box-shadow: none; }
body[data-scene="minimal"] .ck-velo__ring { filter: none; }

/* Upsell toast when a locked scale is tapped (monetization scaffold; later opens the upgrade flow). */
.scale-lock-toast {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(.96); z-index: 60;
  padding: 12px 20px; border-radius: 12px; border: 1.5px solid var(--accent);
  background: rgba(7, 13, 22, .96); color: var(--accent); letter-spacing: .12em; font-size: .78rem;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow: 0 0 20px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.scale-lock-toast.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; cursor: pointer; }

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  #overview-wash { transition: none; }
  .loading__beacon, .atlas-descend svg { animation: none; }
  #atlas-loading, #atlas-fade { transition: opacity 1ms; }
}