/* ========================================================================== */
/* COSMOS — presentation-first educational atlas                               */
/* ========================================================================== */

#cosmos-root {
  --cs-bg: #04070c;
  --cs-deep: #070d15;
  --cs-panel: rgba(6, 10, 16, .84);
  --cs-panel-solid: #070c13;
  --cs-line: rgba(150, 176, 205, .16);
  --cs-line-strong: rgba(170, 198, 228, .28);
  --cs-text: #f2f4f7;
  --cs-silver: #bec8d5;
  --cs-muted: #8c99aa;
  --cs-faint: #5f6c7c;
  --cs-gold: #eab76a;
  --cs-ice: #7ec8e3;
  --cs-warm: #e58d62;
  --cs-display: "Inter", system-ui, sans-serif;
  --cs-mono: "IBM Plex Mono", ui-monospace, monospace;
  position: fixed;
  inset: 0;
  z-index: 80;
  color: var(--cs-text);
  font-family: var(--cs-display);
  -webkit-font-smoothing: antialiased;
  pointer-events: none;
}
#cosmos-root * { box-sizing: border-box; }
#cosmos-root [hidden] { display: none !important; }
body.cosmos-mode #hud,
body.cosmos-mode .transition-veil { display: none !important; }
body.cosmos-mode { background: #04070c; overflow: hidden; }
:where(.cs-landing, .cs-app, .cs-modal) button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.cs-eyebrow { display: inline-block; font-family: var(--cs-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--cs-gold); }
#cosmos-root a { color: var(--cs-gold); text-decoration: none; }
#cosmos-root svg { display: block; }
.cs-mono { font-family: var(--cs-mono); }
.cs-kicker {
  display: inline-block;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cs-faint);
}
.cs-primary, .cs-ghost, .cs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 38px;
  padding: 0 17px;
  border: 1px solid var(--cs-gold);
  border-radius: 2px;
  color: #0b0d10;
  background: var(--cs-gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.cs-primary:hover, .cs-button:hover { background: #f2c886; transform: translateY(-1px); }
.cs-ghost {
  background: transparent;
  color: var(--cs-silver);
  border-color: var(--cs-line-strong);
}
.cs-ghost:hover { background: rgba(255,255,255,.04); color: var(--cs-text); border-color: var(--cs-muted); transform: none; }
.cs-button.cs-small { min-height: 30px; padding: 0 12px; font-size: 8px; }
.cs-button.cs-full { width: 100%; margin-top: 16px; }
.cs-text-link, .cs-small-link {
  color: var(--cs-gold);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 0;
  text-align: left;
}
.cs-small-link { color: var(--cs-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; }
.cs-text-link:hover, .cs-small-link:hover { color: var(--cs-text); }

/* -------------------------------------------------------------------------- */
/* Landing                                                                     */
/* -------------------------------------------------------------------------- */
.cs-landing {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #04070c;
  pointer-events: auto;
  z-index: 30;
  animation: cs-fade .8s ease both;
}
.cs-landing-bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 38%, rgba(126, 200, 227, .10), transparent 48%),
    radial-gradient(ellipse at 18% 70%, rgba(234, 183, 106, .07), transparent 45%),
    linear-gradient(120deg, rgba(4,7,12,.98) 0%, rgba(4,7,12,.82) 45%, rgba(4,7,12,.45) 100%),
    url("../../assets/textures/milkyway_starmap_4k.jpg") center/cover no-repeat;
  opacity: .92;
}
.cs-landing::after {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(4,7,12,.55), transparent 25%, transparent 65%, rgba(4,7,12,.96));
  pointer-events: none;
}
.cs-landing-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 42px;
  border-bottom: 1px solid var(--cs-line);
}
.cs-brand { display: flex; align-items: center; gap: 12px; text-align: left; }
.cs-brand-mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid rgba(234,183,106,.55);
  border-radius: 50%;
  color: var(--cs-gold);
  font-size: 12px;
  box-shadow: inset 0 0 18px rgba(234,183,106,.12);
}
.cs-brand b {
  display: block;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .22em;
  line-height: 1;
}
.cs-brand small {
  display: block;
  margin-top: 5px;
  color: var(--cs-faint);
  font-size: 8px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cs-top-link {
  color: var(--cs-muted);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 0;
}
.cs-top-link:hover { color: var(--cs-text); }
.cs-landing-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .62fr);
  gap: 60px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
  padding: 7vh 42px 4vh;
}
.cs-landing-copy { max-width: 690px; }
.cs-landing-copy .cs-kicker { color: var(--cs-gold); }
.cs-landing h1 {
  margin: 18px 0 0;
  color: var(--cs-text);
  font-size: clamp(58px, 8vw, 110px);
  font-weight: 200;
  letter-spacing: .16em;
  line-height: .92;
}
.cs-landing h2 {
  margin: 22px 0 18px;
  font-size: clamp(22px, 2.5vw, 34px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--cs-silver);
}
.cs-landing h2 em { color: var(--cs-gold); font-style: normal; }
.cs-lead {
  max-width: 590px;
  margin: 0;
  color: var(--cs-muted);
  font-size: 13px;
  line-height: 1.75;
}
.cs-landing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cs-landing-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
  color: var(--cs-faint);
  font-family: var(--cs-mono);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cs-landing-meta span + span::before { content: "·"; margin-right: 18px; color: var(--cs-line-strong); }
.cs-cover {
  position: relative;
  margin: 0;
  padding: 9px;
  border: 1px solid var(--cs-line-strong);
  background: rgba(4,7,12,.62);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), inset 0 0 40px rgba(126,200,227,.05);
  transform: rotate(1.2deg);
}
.cs-cover::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(234,183,106,.18);
  pointer-events: none;
}
.cs-cover img { display: block; width: 100%; height: auto; max-height: 46vh; object-fit: contain; background: #030508; filter: contrast(1.02); }
.cs-cover figcaption {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px 2px;
  color: var(--cs-muted);
  font-family: var(--cs-mono);
  font-size: 8px;
  letter-spacing: .04em;
}
.cs-cover-credit { color: var(--cs-faint); }
.cs-landing-sections {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 42px 20px;
  border-top: 1px solid var(--cs-line);
}
.cs-landing-section {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  padding: 14px 20px;
  text-align: left;
  border-right: 1px solid var(--cs-line);
  transition: background .2s;
}
.cs-landing-section:last-child { border-right: 0; }
.cs-landing-section:hover { background: rgba(255,255,255,.025); }
.cs-landing-section > span { color: var(--cs-gold); font-family: var(--cs-mono); font-size: 10px; }
.cs-landing-section b { display: block; color: var(--cs-text); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.cs-landing-section small { display: block; margin-top: 5px; color: var(--cs-muted); font-size: 10px; line-height: 1.3; }
.cs-landing-section i { margin-left: auto; color: var(--cs-faint); font-style: normal; }
.cs-landing-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 42px 26px;
  color: var(--cs-faint);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cs-landing-foot button { color: var(--cs-gold); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; }
@keyframes cs-fade { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------------------- */
/* App shell                                                                   */
/* -------------------------------------------------------------------------- */
.cs-app { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.cs-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 72px;
  display: grid;
  grid-template-columns: minmax(210px, 300px) 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  border-bottom: 1px solid var(--cs-line);
  background: linear-gradient(180deg, rgba(4,7,12,.96), rgba(4,7,12,.72));
  backdrop-filter: blur(16px);
  z-index: 25;
  pointer-events: auto;
}
.cs-brand-button { padding: 0; background: none; }
.cs-top-center { text-align: center; min-width: 0; }
.cs-top-center > span { color: var(--cs-gold); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; }
.cs-top-center h2 {
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--cs-silver);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
}
.cs-top-actions { display: flex; align-items: center; gap: 4px; }
.cs-top-btn, .cs-top-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--cs-muted);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s, border-color .2s, background .2s;
}
.cs-top-btn:hover, .cs-top-icon:hover { color: var(--cs-text); border-color: var(--cs-line); background: rgba(255,255,255,.03); }
.cs-top-icon { width: 30px; justify-content: center; font-family: var(--cs-mono); font-size: 11px; }
.cs-mobile-only { display: none !important; }

.cs-nav {
  position: absolute;
  left: 22px;
  top: 88px;
  bottom: 86px;
  width: 224px;
  overflow: hidden;
  border: 1px solid var(--cs-line);
  background: var(--cs-panel);
  backdrop-filter: blur(18px);
  z-index: 20;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
}
.cs-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 14px 11px; border-bottom: 1px solid var(--cs-line); }
.cs-nav-scroll { overflow-y: auto; padding: 6px 0 16px; scrollbar-width: thin; scrollbar-color: rgba(150,170,190,.28) transparent; }
.cs-nav-section { padding: 12px 0 2px; }
.cs-nav-section-head { padding: 0 14px 8px; }
.cs-nav-section-head span { display: block; color: var(--cs-gold); font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.cs-nav-section-head small { display: block; margin-top: 4px; color: var(--cs-faint); font-size: 8.5px; line-height: 1.3; }
.cs-nav-step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  padding: 7px 12px 7px 14px;
  text-align: left;
  color: var(--cs-muted);
  border-left: 1px solid transparent;
  transition: color .18s, background .18s, border-color .18s;
}
.cs-nav-step:hover { color: var(--cs-text); background: rgba(255,255,255,.03); }
.cs-nav-step.is-active { color: var(--cs-text); border-left-color: var(--cs-gold); background: linear-gradient(90deg, rgba(234,183,106,.11), transparent); }
.cs-nav-num { flex: none; width: 18px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-nav-step.is-active .cs-nav-num { color: var(--cs-gold); }
.cs-nav-name { font-size: 10px; line-height: 1.3; }
.cs-nav-scrim { display: none; }
.cs-close-nav { color: var(--cs-muted); font-size: 22px; line-height: 1; }

.cs-panel {
  position: absolute;
  right: 22px;
  top: 88px;
  bottom: 86px;
  width: 368px;
  overflow: hidden;
  border: 1px solid var(--cs-line);
  background: var(--cs-panel);
  backdrop-filter: blur(18px);
  z-index: 20;
  pointer-events: auto;
}
.cs-panel-scroll { height: 100%; overflow-y: auto; padding: 22px 22px 18px; scrollbar-width: thin; scrollbar-color: rgba(150,170,190,.3) transparent; }
.cs-panel-kicker { display: flex; justify-content: space-between; gap: 10px; color: var(--cs-gold); font-family: var(--cs-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.cs-panel-kicker2 { margin-top: 8px; color: var(--cs-faint); font-size: 9px; letter-spacing: .05em; }
.cs-panel h1 {
  margin: 10px 0 0;
  color: var(--cs-text);
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.015em;
}
.cs-level-tabs { display: flex; gap: 0; margin: 18px 0 16px; border-bottom: 1px solid var(--cs-line); }
.cs-level-tabs button {
  position: relative;
  flex: 1;
  padding: 9px 2px 8px;
  color: var(--cs-faint);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cs-level-tabs button:hover { color: var(--cs-silver); }
.cs-level-tabs button.is-active { color: var(--cs-gold); }
.cs-level-tabs button.is-active::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1px; height: 1px; background: var(--cs-gold); }
.cs-summary { margin: 0 0 14px; color: var(--cs-silver); font-size: 12.5px; line-height: 1.72; }
.cs-panel p { color: var(--cs-muted); font-size: 11.5px; line-height: 1.65; }
.cs-keyfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 14px; }
.cs-keyfacts > div { padding: 9px 10px; border: 1px solid var(--cs-line); background: rgba(255,255,255,.018); }
.cs-keyfacts span { display: block; color: var(--cs-faint); font-size: 8px; letter-spacing: .04em; }
.cs-keyfacts b { display: block; margin-top: 5px; color: var(--cs-silver); font-family: var(--cs-mono); font-size: 9px; font-weight: 400; line-height: 1.4; }
.cs-interactions { margin: 18px 0 0; }
.cs-interactions ul { margin: 8px 0 0; padding: 0 0 0 14px; }
.cs-interactions li { margin: 0 0 7px; color: var(--cs-muted); font-size: 11px; line-height: 1.5; }
.cs-interactions li::marker { color: var(--cs-gold); }
.cs-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 16px; border: 1px solid var(--cs-line); background: var(--cs-line); }
.cs-facts > div { padding: 10px; background: #080d14; }
.cs-facts span { display: block; color: var(--cs-faint); font-size: 8px; line-height: 1.3; }
.cs-facts b { display: block; margin-top: 5px; color: var(--cs-silver); font-family: var(--cs-mono); font-size: 9px; font-weight: 400; line-height: 1.4; }
.cs-sci-note { margin: 14px 0; padding: 12px 13px; border-left: 2px solid var(--cs-gold); background: rgba(234,183,106,.06); }
.cs-sci-note .cs-kicker { color: var(--cs-gold); }
.cs-sci-note p { margin: 6px 0 0; color: var(--cs-silver); font-size: 10.5px; line-height: 1.55; }
.cs-notes { margin: 13px 0; border-top: 1px solid var(--cs-line); }
.cs-notes summary { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; color: var(--cs-silver); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; list-style: none; }
.cs-notes summary::-webkit-details-marker { display: none; }
.cs-notes summary span { color: var(--cs-faint); font-size: 8px; text-transform: none; letter-spacing: 0; }
.cs-notes > div { max-height: 220px; overflow-y: auto; padding: 0 10px 12px 0; }
.cs-notes > div p { margin: 0 0 8px; font-size: 10.5px; line-height: 1.6; }
.cs-source-line { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--cs-line); color: var(--cs-faint); font-size: 8.5px; line-height: 1.6; }
.cs-source-line button { color: var(--cs-gold); font-size: 8.5px; text-decoration: underline; text-underline-offset: 3px; }
.cs-panel-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--cs-line); }
.cs-slide-link { display: flex; align-items: center; gap: 8px; color: var(--cs-muted); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.cs-slide-link:hover { color: var(--cs-gold); }
.cs-panel-mini { color: var(--cs-faint); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.cs-panel-mini:hover { color: var(--cs-muted); }

/* -------------------------------------------------------------------------- */
/* Stage                                                                       */
/* -------------------------------------------------------------------------- */
.cs-stage { position: absolute; inset: 72px 0 64px; z-index: 5; pointer-events: none; }
.cs-stage-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(4,7,12,.18), rgba(4,7,12,.62) 72%, rgba(4,7,12,.9));
  opacity: 0;
  transition: opacity .45s;
}
.cs-has-card .cs-stage-scrim { opacity: 1; }
.cs-stage-top { position: absolute; top: 18px; left: 274px; right: 416px; display: flex; justify-content: space-between; gap: 12px; align-items: center; pointer-events: none; z-index: 8; }
.cs-stage-label { color: var(--cs-gold); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 10px #000; }
.cs-view-switch {
  padding: 7px 10px;
  border: 1px solid var(--cs-line-strong);
  background: var(--cs-panel);
  color: var(--cs-silver);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: auto;
}
.cs-view-switch:hover { color: var(--cs-gold); border-color: var(--cs-gold); }
.cs-chips {
  position: absolute;
  left: 270px;
  right: 412px;
  bottom: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  pointer-events: auto;
  z-index: 9;
}
.cs-chip {
  padding: 7px 11px;
  border: 1px solid var(--cs-line);
  border-radius: 999px;
  background: rgba(5,9,14,.78);
  backdrop-filter: blur(12px);
  color: var(--cs-muted);
  font-size: 9px;
  letter-spacing: .04em;
  transition: color .2s, border-color .2s, background .2s;
}
.cs-chip:hover { color: var(--cs-text); border-color: var(--cs-gold); background: rgba(234,183,106,.08); }
.cs-stage-hint {
  position: absolute;
  left: 274px;
  right: 416px;
  bottom: 13px;
  color: rgba(160,175,193,.58);
  font-family: var(--cs-mono);
  font-size: 8px;
  letter-spacing: .03em;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 8px #000;
}
.cs-stage-card {
  position: absolute;
  left: 270px;
  right: 412px;
  top: 28px;
  bottom: 28px;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: rgba(6,10,16,.9);
  border: 1px solid var(--cs-line-strong);
  box-shadow: 0 30px 110px rgba(0,0,0,.8), inset 0 0 80px rgba(126,200,227,.025);
  backdrop-filter: blur(18px);
  pointer-events: auto;
  z-index: 10;
  overflow: hidden;
}
.cs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: none; padding: 12px 16px; border-bottom: 1px solid var(--cs-line); }
.cs-card-kicker { color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.cs-card-toggle { color: var(--cs-gold); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.cs-card-toggle:hover { color: var(--cs-text); }
.cs-stage-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; scrollbar-width: thin; scrollbar-color: rgba(150,170,190,.3) transparent; }
.cs-card-actions { flex: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 0 16px 11px; }
.cs-atlas-overlay {
  position: absolute;
  left: 274px;
  top: 86px;
  width: 280px;
  padding: 14px;
  border: 1px solid var(--cs-line);
  background: rgba(5,9,14,.8);
  backdrop-filter: blur(14px);
  pointer-events: none;
  z-index: 8;
}
.cs-atlas-overlay > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--cs-line); font-size: 9px; }
.cs-atlas-overlay > div span { color: var(--cs-muted); }
.cs-atlas-overlay > div b { color: var(--cs-silver); font-family: var(--cs-mono); font-weight: 400; font-size: 8px; text-align: right; }
.cs-atlas-overlay small { display: block; margin-top: 8px; color: var(--cs-faint); font-size: 8px; line-height: 1.45; }
.cs-present-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 18; }
.cs-present-top { position: absolute; top: 18px; left: 26px; right: 26px; display: flex; justify-content: space-between; color: var(--cs-muted); font-family: var(--cs-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.cs-present-top button { pointer-events: auto; width: 34px; height: 34px; border: 1px solid var(--cs-line); background: rgba(5,9,14,.8); color: var(--cs-silver); font-size: 20px; }
.cs-present-bottom { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 7px 10px; border: 1px solid var(--cs-line); background: rgba(5,9,14,.82); backdrop-filter: blur(14px); pointer-events: auto; }
.cs-present-bottom button { padding: 7px 10px; color: var(--cs-silver); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.cs-present-bottom button:hover { color: var(--cs-gold); }
.cs-present-bottom span { color: var(--cs-muted); font-size: 9px; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------------------------------------------------------- */
/* Bottom bar                                                                  */
/* -------------------------------------------------------------------------- */
.cs-bottombar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border-top: 1px solid var(--cs-line);
  background: linear-gradient(0deg, rgba(4,7,12,.98), rgba(4,7,12,.78));
  backdrop-filter: blur(16px);
  z-index: 24;
  pointer-events: auto;
}
.cs-bottom-meta { display: flex; gap: 14px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.cs-bottom-center { display: flex; align-items: center; gap: 12px; min-width: 420px; }
.cs-nav-arrow { width: 26px; height: 28px; color: var(--cs-silver); font-size: 18px; border: 1px solid transparent; }
.cs-nav-arrow:hover { color: var(--cs-gold); border-color: var(--cs-line); }
.cs-progress { position: relative; display: flex; gap: 2px; flex: 1; height: 22px; align-items: center; }
.cs-tick { flex: 1; height: 5px; padding: 0; background: rgba(150,170,190,.26); transition: background .2s, height .2s; }
.cs-tick:hover { background: var(--cs-gold); height: 8px; }
.cs-tick.is-active { background: var(--cs-gold); height: 8px; box-shadow: 0 0 8px rgba(234,183,106,.45); }
.cs-bottom-right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; letter-spacing: .04em; }

/* -------------------------------------------------------------------------- */
/* Modals                                                                      */
/* -------------------------------------------------------------------------- */
.cs-modal { position: fixed; inset: 0; z-index: 500; pointer-events: auto; display: grid; place-items: center; padding: 3vh 3vw; }
.cs-modal-backdrop { position: absolute; inset: 0; background: rgba(2,4,8,.82); backdrop-filter: blur(10px); }
.cs-modal-panel { position: relative; width: min(1120px, 94vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--cs-panel-solid); border: 1px solid var(--cs-line-strong); box-shadow: 0 40px 140px rgba(0,0,0,.85); z-index: 1; }
.cs-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex: none; padding: 18px 22px; border-bottom: 1px solid var(--cs-line); }
.cs-modal-head h2 { margin: 6px 0 0; color: var(--cs-text); font-size: 23px; font-weight: 300; letter-spacing: -.01em; }
.cs-modal-close { width: 32px; height: 32px; border: 1px solid var(--cs-line); color: var(--cs-silver); font-size: 20px; }
.cs-modal-close:hover { color: var(--cs-gold); border-color: var(--cs-gold); }
.cs-modal-body { overflow-y: auto; padding: 18px 22px 24px; scrollbar-width: thin; scrollbar-color: rgba(150,170,190,.3) transparent; }
.cs-modal-open { overflow: hidden; }

/* -------------------------------------------------------------------------- */
/* Presentation mode                                                           */
/* -------------------------------------------------------------------------- */
.cs-presenting .cs-topbar,
.cs-presenting .cs-nav,
.cs-presenting .cs-panel,
.cs-presenting .cs-bottombar,
.cs-presenting .cs-stage-top,
.cs-presenting .cs-stage-hint,
.cs-presenting .cs-chips,
.cs-presenting .cs-atlas-overlay { display: none !important; }
.cs-presenting .cs-stage { inset: 0; }
.cs-presenting .cs-stage-card { inset: 46px 34px 66px; max-width: none; margin: 0; }
.cs-presenting .cs-stage-body { padding: 18px 22px; }
.cs-presenting .cs-card-head,
.cs-presenting .cs-card-actions { display: none; }
.cs-presenting .cs-stage-scrim { opacity: 1; }
.cs-presenting .cs-present-chrome { display: block; }

/* -------------------------------------------------------------------------- */
/* Responsive                                                                  */
/* -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .cs-top-btn span { display: none; }
  .cs-nav { width: 204px; left: 16px; }
  .cs-panel { width: 338px; right: 16px; }
  .cs-stage-card { left: 236px; right: 370px; }
  .cs-stage-top, .cs-stage-hint { left: 236px; right: 370px; }
  .cs-chips { left: 236px; right: 370px; }
  .cs-bottom-center { min-width: 330px; }
  .cs-bottom-right #cs-bottom-date { display: none; }
}
@media (max-width: 1020px) {
  .cs-topbar { grid-template-columns: 1fr auto; }
  .cs-top-center { display: none; }
  .cs-landing-main { gap: 34px; }
  .cs-landing h1 { font-size: 64px; }
  .cs-stage-card { left: 230px; right: 360px; }
  .cs-stage-top, .cs-stage-hint { left: 230px; right: 360px; }
  .cs-chips { left: 230px; right: 360px; }
  .cs-atlas-overlay { left: 230px; width: 230px; }
}
@media (max-width: 860px) {
  #cosmos-root { overflow: hidden; }
  .cs-topbar { height: 60px; padding: 0 14px; }
  .cs-brand b { font-size: 14px; }
  .cs-brand small { display: none; }
  .cs-brand-mark { width: 22px; height: 22px; font-size: 10px; }
  .cs-top-actions { gap: 1px; }
  .cs-top-btn { padding: 0 6px; }
  .cs-top-icon { width: 27px; height: 28px; }
  .cs-mobile-only { display: inline-flex !important; }
  .cs-nav {
    display: flex;
    left: 0; top: 0; bottom: 0; width: min(310px, 84vw);
    transform: translateX(-102%);
    transition: transform .28s ease;
    z-index: 400;
    border-right: 1px solid var(--cs-line-strong);
  }
  .cs-nav.is-open { transform: translateX(0); }
  .cs-nav-scrim { display: none; position: fixed; inset: 0; z-index: 390; background: rgba(2,4,8,.6); }
  .cs-nav.is-open ~ .cs-nav-scrim { display: block; }
  .cs-panel {
    left: 0; right: 0; top: auto; bottom: 56px;
    width: auto; height: 41vh;
    border-left: 0; border-right: 0; border-bottom: 0;
    z-index: 18;
  }
  .cs-panel-scroll { padding: 15px 16px 12px; }
  .cs-panel h1 { font-size: 24px; }
  .cs-level-tabs { margin: 12px 0; }
  .cs-summary { font-size: 12px; line-height: 1.6; }
  .cs-panel-foot { position: sticky; bottom: -12px; background: var(--cs-panel-solid); padding-bottom: 4px; }
  .cs-stage { inset: 60px 0 56px; }
  .cs-stage-card {
    left: 10px; right: 10px; top: 8px;
    bottom: calc(41vh + 10px);
    max-width: none;
  }
  .cs-stage-top { left: 12px; right: 12px; top: 8px; }
  .cs-stage-hint { left: 12px; right: 12px; bottom: 8px; font-size: 7px; }
  .cs-chips { left: 12px; right: 12px; bottom: calc(41vh + 10px); gap: 4px; }
  .cs-chip { font-size: 8px; padding: 6px 8px; }
  .cs-atlas-overlay { left: 12px; top: 38px; width: 220px; padding: 10px; }
  .cs-atlas-overlay > div { font-size: 8px; padding: 5px 0; }
  .cs-atlas-overlay > div b { font-size: 7px; }
  .cs-atlas-overlay > small { display: none; }
  .cs-bottombar { height: 56px; grid-template-columns: auto 1fr; padding: 0 12px; gap: 10px; }
  .cs-bottom-meta { display: none; }
  .cs-bottom-center { min-width: 0; gap: 7px; }
  .cs-bottom-right { display: none; }
  .cs-stage-body { padding: 10px; }
  .cs-stage-card .cs-card-head { padding: 9px 11px; }
  .cs-img-viewport img { max-height: 38vh; }
  .cs-presenting .cs-stage-card { inset: 34px 10px 54px; }
  .cs-presenting .cs-stage-body { padding: 10px; }
  .cs-present-top { top: 10px; left: 12px; right: 12px; }
  .cs-present-bottom { bottom: 10px; }
  .cs-present-bottom span { max-width: 150px; }
  .cs-landing-top { padding: 18px 20px; }
  .cs-landing-main { grid-template-columns: 1fr; gap: 30px; padding: 7vh 20px 30px; }
  .cs-landing h1 { font-size: 58px; }
  .cs-landing h2 { font-size: 24px; }
  .cs-landing-copy { max-width: none; }
  .cs-cover { width: min(250px, 74vw); margin: 0 auto; transform: rotate(.8deg); }
  .cs-cover img { max-height: 38vh; }
  .cs-landing-sections { grid-template-columns: 1fr; padding: 0 20px; }
  .cs-landing-section { border-right: 0; border-bottom: 1px solid var(--cs-line); min-height: 68px; }
  .cs-landing-section:last-child { border-bottom: 0; }
  .cs-landing-foot { display: block; padding: 16px 20px 30px; line-height: 2; }
  .cs-landing-foot > * { display: block; margin-bottom: 4px; }
  .cs-modal { padding: 2vh 2vw; }
  .cs-modal-panel { width: 96vw; max-height: 94vh; }
  .cs-modal-head { padding: 13px 14px; }
  .cs-modal-head h2 { font-size: 18px; }
  .cs-modal-body { padding: 12px 14px 18px; }
}
@media (max-width: 560px) {
  .cs-landing h1 { font-size: 46px; letter-spacing: .12em; }
  .cs-landing h2 { font-size: 21px; }
  .cs-landing-actions { flex-direction: column; align-items: stretch; }
  .cs-landing-actions .cs-primary, .cs-landing-actions .cs-ghost { width: 100%; }
  .cs-panel { height: 44vh; }
  .cs-stage-card { bottom: calc(44vh + 10px); }
  .cs-stage-top { top: 6px; }
  .cs-stage-label { font-size: 7px; }
  .cs-card-toggle { font-size: 7px; }
  .cs-card-kicker { font-size: 7px; }
}

/* -------------------------------------------------------------------------- */
/* Stage — shared                                                              */
/* -------------------------------------------------------------------------- */
.cs-stage-body > * { height: 100%; }
.cs-image-stage, .cs-scale-stage, .cs-distance, .cs-boundaries, .cs-apollo, .cs-cosmic, .cs-gallery {
  display: flex; flex-direction: column; min-height: 0;
}
.cs-image-stage { height: 100%; }
.cs-iv-top { display: flex; align-items: center; justify-content: space-between; flex: none; gap: 12px; margin-bottom: 9px; }
.cs-iv-tools { display: flex; gap: 3px; }
.cs-round {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--cs-line); color: var(--cs-muted); font-size: 13px; font-family: var(--cs-mono);
}
.cs-round:hover { color: var(--cs-gold); border-color: var(--cs-gold); }
.cs-iv-viewport {
  position: relative; flex: 1; min-height: 220px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid var(--cs-line); background:
    radial-gradient(ellipse at 50% 50%, rgba(20,30,44,.75), rgba(3,5,8,.98)),
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(120,150,180,.025) 40px 41px);
  touch-action: none; cursor: default; outline: none;
}
.cs-iv-viewport:focus-visible { border-color: var(--cs-gold); }
.cs-iv-canvas { position: relative; display: inline-block; line-height: 0; transform-origin: 50% 50%; will-change: transform; opacity: 0; transition: opacity .4s; }
.cs-iv-canvas.is-loaded { opacity: 1; }
.cs-iv-canvas img { display: block; max-width: 100%; max-height: 52vh; width: auto; height: auto; user-select: none; -webkit-user-drag: none; }
.cs-hotspot { position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px solid rgba(234,183,106,.9); border-radius: 50%; background: rgba(4,7,12,.82); box-shadow: 0 0 0 4px rgba(4,7,12,.4), 0 0 22px rgba(234,183,106,.25); z-index: 3; color: var(--cs-gold); font-family: var(--cs-mono); font-size: 8px; transition: transform .2s, background .2s; }
.cs-hotspot i { font-style: normal; }
.cs-hotspot::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(234,183,106,.2); border-radius: 50%; animation: cs-pulse 3s ease-out infinite; }
.cs-hotspot:hover { transform: translate(-50%, -50%) scale(1.18); background: rgba(234,183,106,.92); color: #080b10; }
@keyframes cs-pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.cs-iv-pop {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 6;
  padding: 13px 30px 13px 14px;
  background: rgba(5,9,14,.96); border: 1px solid var(--cs-line-strong);
  box-shadow: 0 16px 50px rgba(0,0,0,.7);
}
.cs-iv-pop .cs-eyebrow { color: var(--cs-gold); font-family: var(--cs-mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.cs-iv-pop p { margin: 6px 0 0; color: var(--cs-silver); font-size: 10.5px; line-height: 1.55; }
.cs-iv-pop-close { position: absolute; top: 6px; right: 8px; color: var(--cs-faint); font-size: 16px; }
.cs-iv-foot { flex: none; padding-top: 9px; }
.cs-caption { margin: 0; color: var(--cs-muted); font-size: 10px; line-height: 1.55; }
.cs-iv-meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 7.5px; letter-spacing: .03em; }
.cs-button { min-height: 34px; }
.cs-button[hidden] { display: none !important; }

/* -------------------------------------------------------------------------- */
/* Scale instrument                                                            */
/* -------------------------------------------------------------------------- */
.cs-scale-stage { height: 100%; }
.cs-scale-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex: none; }
.cs-scale-sub { margin: 6px 0 0; max-width: 520px; font-size: 10px !important; }
.cs-zoom { display: flex; flex-direction: column; gap: 5px; min-width: 110px; color: var(--cs-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.cs-zoom input { accent-color: var(--cs-gold); }
.cs-scale-viewport {
  flex: 1; min-height: 250px; display: flex; align-items: flex-end; justify-content: center;
  overflow: auto; border-bottom: 1px solid var(--cs-line);
  background: radial-gradient(ellipse at 50% 110%, rgba(30,44,62,.55), transparent 65%);
}
.cs-scale-row { display: flex; align-items: flex-end; justify-content: center; gap: 24px; padding: 20px 24px 10px; min-width: 100%; width: max-content; }
.cs-scale-object { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 9px; min-width: 46px; padding: 0; color: var(--cs-muted); }
.cs-scale-dot {
  display: block; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background-image: radial-gradient(circle at 32% 28%, rgba(255,255,255,.35), transparent 42%);
  transition: width .35s ease, height .35s ease;
}
.cs-scale-object.is-selected .cs-scale-dot { outline: 1px solid var(--cs-gold); outline-offset: 4px; }
.cs-scale-object.is-selected .cs-scale-name { color: var(--cs-gold); }
.cs-scale-name { max-width: 92px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; line-height: 1.25; text-align: center; letter-spacing: .01em; }
.cs-scale-object:hover .cs-scale-name { color: var(--cs-silver); }
.cs-scale-detail { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; padding: 12px 2px; border-bottom: 1px solid var(--cs-line); }
.cs-scale-detail > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.cs-scale-detail strong { color: var(--cs-silver); font-family: var(--cs-mono); font-size: 9px; font-weight: 400; }
.cs-scale-detail-line { color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; line-height: 1.6; align-self: end; }
.cs-scale-detail-line b { color: var(--cs-muted); font-weight: 400; }
.cs-scale-detail p { grid-column: 1 / -1; margin: 0; color: var(--cs-faint); font-size: 9px; }
.cs-scale-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 10px; }
.cs-scale-light-readout { color: var(--cs-gold); font-size: 8px; }
.cs-light-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255,248,210,.8); animation: cs-orbit 8s linear infinite; top: -5px; left: 50%; }
@keyframes cs-orbit { from { transform: rotate(0deg) translateY(-14px) rotate(0deg); } to { transform: rotate(360deg) translateY(-14px) rotate(-360deg); } }

/* -------------------------------------------------------------------------- */
/* Distance instruments                                                        */
/* -------------------------------------------------------------------------- */
.cs-distance { height: 100%; }
.cs-distance-hero .cs-eyebrow { color: var(--cs-gold); }
.cs-distance-hero strong { display: block; margin-top: 5px; color: var(--cs-silver); font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.cs-distance-hero p { max-width: 560px; margin: 10px 0 0; font-size: 10.5px; }
.cs-big-number { margin-top: 6px; color: var(--cs-text); font-family: var(--cs-mono); font-size: clamp(24px, 3vw, 38px); font-weight: 400; letter-spacing: -.03em; }
.cs-au-scene {
  position: relative; flex: 1; min-height: 150px; display: flex; align-items: center; gap: 0;
  margin: 14px 0 10px; padding: 14px 20px; border: 1px solid var(--cs-line);
  background: radial-gradient(ellipse at 10% 50%, rgba(234,183,106,.11), transparent 40%), #05090f;
}
.cs-au-sun { color: var(--cs-gold); font-size: 48px; line-height: 1; text-shadow: 0 0 35px rgba(234,183,106,.35); z-index: 2; }
.cs-au-earth { color: var(--cs-ice); font-size: 28px; line-height: 1; text-shadow: 0 0 25px rgba(126,200,227,.4); z-index: 2; }
.cs-au-line { position: relative; flex: 1; height: 1px; margin: 0 20px; background: repeating-linear-gradient(90deg, rgba(160,185,210,.3) 0 4px, transparent 4px 9px); }
.cs-au-light { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255,246,205,.7); opacity: 0; }
.cs-au-line.is-running .cs-au-light { opacity: 1; animation: cs-beam 8s linear; }
@keyframes cs-beam { from { left: 0; } to { left: 100%; } }
.cs-au-label { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-au-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-unit-toggle { display: flex; border: 1px solid var(--cs-line); }
.cs-unit-toggle button { padding: 8px 11px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-unit-toggle button.is-active { color: var(--cs-gold); background: rgba(234,183,106,.08); }
.cs-em-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; flex: none; }
.cs-em-head strong { display: block; margin-top: 5px; color: var(--cs-text); font-family: var(--cs-mono); font-size: 23px; font-weight: 400; }
.cs-em-head p { margin: 8px 0 0; max-width: 480px; font-size: 10px; }
.cs-toggle { display: flex; flex: none; border: 1px solid var(--cs-line); }
.cs-toggle button { padding: 7px 10px; color: var(--cs-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.cs-toggle button.is-active { color: var(--cs-gold); background: rgba(234,183,106,.08); }
.cs-em-scene {
  position: relative; flex: 1; min-height: 185px; margin: 14px 0 12px; padding: 20px 26px;
  border: 1px solid var(--cs-line); overflow: hidden;
  background: radial-gradient(ellipse at 20% 60%, rgba(90,158,212,.13), transparent 32%), #05090f;
}
.cs-em-earth { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #a7d4ef, #2d6fa4 38%, #0c2138 72%); box-shadow: 0 0 40px rgba(90,158,212,.22); transition: width .3s, height .3s; }
.cs-em-line { position: absolute; left: 108px; right: 24px; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, rgba(160,185,210,.35) 0 4px, transparent 4px 9px); }
.cs-em-moon { position: absolute; top: -10px; left: 86%; width: 21px; height: 21px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #e3e2de, #868b90 55%, #393f45); box-shadow: 0 0 16px rgba(220,228,235,.22); transition: left .15s; }
.cs-em-labels { position: absolute; left: 26px; right: 26px; bottom: 12px; display: flex; justify-content: space-between; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-em-scene[data-mode="true"] .cs-em-earth { width: 16px; height: 16px; }
.cs-em-scene[data-mode="true"] .cs-em-line { left: 42px; }
.cs-em-scene[data-mode="true"] .cs-em-moon { width: 5px; height: 5px; top: -2px; left: 86% !important; }
.cs-em-scene[data-mode="true"] .cs-em-labels { left: 42px; }
.cs-em-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cs-em-controls label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 180px; color: var(--cs-faint); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.cs-em-controls input { flex: 1; accent-color: var(--cs-gold); }
.cs-em-controls .mono { color: var(--cs-muted); font-size: 8px; }
.cs-em-note { margin: 8px 0 0; color: var(--cs-faint); font-size: 9px; line-height: 1.5; }
.cs-em-pulse { position: absolute; left: 110px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(255,246,210,.75); animation: cs-em-pulse 1.28s linear; }
@keyframes cs-em-pulse { from { left: 108px; opacity: 1; } to { left: 86%; opacity: 0; } }
.cs-converter { margin-top: 14px; border: 1px solid var(--cs-line); }
.cs-converter-row { display: flex; border-bottom: 1px solid var(--cs-line); }
.cs-converter-row input { flex: 1; min-width: 0; padding: 10px 12px; background: transparent; border: 0; color: var(--cs-text); font-family: var(--cs-mono); font-size: 13px; outline: none; }
.cs-converter-row select { width: 132px; padding: 0 10px; background: #0a1018; color: var(--cs-silver); border: 0; border-left: 1px solid var(--cs-line); font-family: var(--cs-mono); font-size: 9px; }
.cs-convert-output { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--cs-line); }
.cs-convert-output > div { display: flex; flex-direction: column; gap: 4px; padding: 9px 11px; background: #080d14; }
.cs-convert-output span { color: var(--cs-faint); font-size: 7.5px; text-transform: uppercase; letter-spacing: .04em; }
.cs-convert-output b { color: var(--cs-silver); font-family: var(--cs-mono); font-size: 9px; font-weight: 400; }
.cs-light-demo { margin-top: 14px; }
.cs-light-track { position: relative; height: 42px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--cs-line); padding: 0 13px; background: #05090f; }
.cs-light-source { color: var(--cs-gold); font-size: 20px; }
.cs-light-planet { color: var(--cs-ice); font-size: 13px; }
.cs-light-beam { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(160,185,210,.28) 0 4px, transparent 4px 9px); position: relative; }
.cs-light-track.is-running .cs-light-beam::after { content: ""; position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(255,246,210,.7); animation: cs-beam 8s linear; }
.cs-light-actions { display: flex; align-items: center; gap: 14px; margin-top: 9px; }
.cs-light-actions .mono { color: var(--cs-faint); font-size: 8px; }
.cs-lightyear { overflow-y: auto; }

/* -------------------------------------------------------------------------- */
/* Boundaries                                                                  */
/* -------------------------------------------------------------------------- */
.cs-boundaries { height: 100%; }
.cs-bound-svg { width: 100%; height: auto; border: 1px solid var(--cs-line); background: #05090f; }
.cs-axis-tick line { stroke: rgba(140,165,190,.16); stroke-width: .7; }
.cs-axis-tick text { fill: #677687; font-family: var(--cs-mono); font-size: 8px; }
.cs-axis-tick .cs-axis-sub { fill: #46515e; font-size: 7px; }
.cs-bound-band { transition: opacity .2s; }
.cs-bound-band text { font-family: var(--cs-mono); letter-spacing: .02em; }
.cs-bound-controls { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0; }
.cs-bound-toggle { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--cs-line); color: var(--cs-faint); font-size: 8px; letter-spacing: .03em; }
.cs-bound-toggle span { width: 5px; height: 5px; border-radius: 50%; }
.cs-bound-toggle.is-on { color: var(--cs-silver); border-color: var(--cs-line-strong); }
.cs-bound-detail p { margin: 0; padding: 8px 0; border-top: 1px solid var(--cs-line); color: var(--cs-faint); font-size: 9px; line-height: 1.5; cursor: default; }
.cs-bound-detail p b { color: var(--cs-silver); font-weight: 500; }
.cs-bound-detail p { display: block; }
.cs-bound-detail p:not(:first-child) { display: none; }

/* -------------------------------------------------------------------------- */
/* Apollo timeline                                                             */
/* -------------------------------------------------------------------------- */
.cs-apollo { height: 100%; overflow-y: auto; }
.cs-apollo-hero { display: flex; gap: 16px; align-items: center; flex: none; padding-bottom: 12px; border-bottom: 1px solid var(--cs-line); }
.cs-apollo-hero img { width: 96px; height: 96px; object-fit: cover; filter: contrast(1.1); border: 1px solid var(--cs-line); }
.cs-apollo-hero h4 { margin: 5px 0 4px; color: var(--cs-text); font-size: 17px; font-weight: 400; }
.cs-apollo-hero p { margin: 0; font-size: 9.5px; }
.cs-apollo-track { display: flex; flex-direction: column; margin: 5px 0 0; border-left: 1px solid var(--cs-line-strong); }
.cs-apollo-event { position: relative; display: grid; grid-template-columns: 126px 1fr; gap: 12px; padding: 9px 0 9px 16px; text-align: left; border: 0; color: var(--cs-muted); }
.cs-apollo-event::before { content: ""; position: absolute; left: -3px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--cs-faint); }
.cs-apollo-event.is-active { color: var(--cs-text); background: rgba(255,255,255,.02); }
.cs-apollo-event.is-active::before { background: var(--cs-gold); box-shadow: 0 0 10px rgba(234,183,106,.5); }
.cs-apollo-date { color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-apollo-title { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; }
.cs-apollo-detail { padding: 12px 0 8px; border-top: 1px solid var(--cs-line); }
.cs-apollo-detail .cs-eyebrow { color: var(--cs-gold); font-family: var(--cs-mono); font-size: 8px; }
.cs-apollo-detail h4 { margin: 6px 0; color: var(--cs-text); font-size: 16px; font-weight: 400; }
.cs-apollo-detail p { margin: 0; font-size: 10px; }
.cs-apollo-actions { padding-top: 9px; }
.cs-cosmic { height: 100%; }
.cs-cosmic-head { display: flex; justify-content: space-between; gap: 14px; flex: none; align-items: flex-start; }
.cs-cosmic-head h4 { margin: 6px 0; color: var(--cs-text); font-size: 22px; font-weight: 300; }
.cs-cosmic-head p { margin: 0; max-width: 480px; font-size: 10px; }
.cs-cosmic-presets { display: flex; flex-wrap: wrap; gap: 4px; margin: 15px 0 12px; }
.cs-cosmic-preset { padding: 6px 8px; color: var(--cs-faint); border: 1px solid var(--cs-line); font-size: 8px; }
.cs-cosmic-preset.is-active { color: var(--cs-gold); border-color: rgba(234,183,106,.4); background: rgba(234,183,106,.06); }
.cs-cosmic-track-wrap { padding: 40px 8px 22px; }
.cs-cosmic-track { position: relative; height: 1px; background: linear-gradient(90deg, rgba(126,200,227,.5), rgba(234,183,106,.6)); }
.cs-cosmic-axis { position: absolute; inset: 0; }
.cs-cosmic-marker { position: absolute; top: -4px; left: 0; width: 1px; height: 9px; padding: 0; background: var(--cs-faint); transform: translateX(-50%); }
.cs-cosmic-marker span { position: absolute; top: -7px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--cs-panel-solid); border: 1px solid var(--cs-muted); }
.cs-cosmic-marker em { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); color: var(--cs-faint); font-family: var(--cs-mono); font-size: 7px; font-style: normal; white-space: nowrap; }
.cs-cosmic-marker.is-active { background: var(--cs-gold); height: 14px; }
.cs-cosmic-marker.is-active span { border-color: var(--cs-gold); background: var(--cs-gold); }
.cs-cosmic-marker.is-active em { color: var(--cs-gold); }
.cs-cosmic-labels { display: flex; justify-content: space-between; margin-top: 10px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-cosmic-detail { padding: 12px 0; border-top: 1px solid var(--cs-line); border-bottom: 1px solid var(--cs-line); }
.cs-cosmic-detail .cs-eyebrow { color: var(--cs-gold); font-family: var(--cs-mono); font-size: 8px; }
.cs-cosmic-detail h4 { margin: 5px 0; color: var(--cs-text); font-size: 16px; font-weight: 400; }
.cs-cosmic-detail p { margin: 0; font-size: 10px; }
.cs-cosmic-meta { display: flex; gap: 16px; margin-top: 7px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-cosmic-meta b { color: var(--cs-silver); font-weight: 400; }
.cs-cosmic-verify { margin-top: 10px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; line-height: 1.8; }
.cs-cosmic-verify strong { display: block; color: var(--cs-gold); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
.cs-cosmic-verify b { color: var(--cs-silver); font-weight: 400; }
.cs-calendar-btn.is-active { background: var(--cs-gold); color: #0b0d10; }
.cs-em-note { margin-top: 10px !important; }

/* -------------------------------------------------------------------------- */
/* Gallery                                                                     */
/* -------------------------------------------------------------------------- */
.cs-gallery { height: 100%; }
.cs-gallery-tabs { display: flex; flex-wrap: wrap; gap: 4px; flex: none; margin-bottom: 8px; }
.cs-gallery-tab { padding: 6px 8px; border: 1px solid var(--cs-line); color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-gallery-tab.is-active { color: var(--cs-gold); border-color: rgba(234,183,106,.4); background: rgba(234,183,106,.06); }
.cs-gallery-view { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid var(--cs-line); }
.cs-gallery-view img { width: 100%; flex: 1; min-height: 200px; max-height: 46vh; object-fit: contain; background: #030508; }
.cs-gallery-info { flex: none; padding: 10px; border-top: 1px solid var(--cs-line); }
.cs-gallery-info .cs-eyebrow { color: var(--cs-gold); font-family: var(--cs-mono); font-size: 8px; text-transform: uppercase; }
.cs-gallery-info p { margin: 5px 0; font-size: 9.5px; }
.cs-gallery-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-gallery-meta b { color: var(--cs-silver); font-weight: 400; }

/* -------------------------------------------------------------------------- */
/* Atlas, quiz, sources                                                        */
/* -------------------------------------------------------------------------- */
.cs-slide-modal .cs-image-stage { min-height: 55vh; }
.cs-slide-modal .cs-iv-viewport { min-height: 48vh; }
.cs-atlas-intro { margin: 0 0 16px; font-size: 10.5px; }
.cs-atlas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cs-atlas-cat { display: flex; flex-direction: column; gap: 9px; padding: 13px; border: 1px solid var(--cs-line); background: #080d14; }
.cs-atlas-cat-head { display: flex; justify-content: space-between; gap: 12px; }
.cs-atlas-cat h3 { margin: 5px 0 4px; color: var(--cs-text); font-size: 15px; font-weight: 400; }
.cs-atlas-cat p { margin: 0; font-size: 9px; }
.cs-atlas-cat img { width: 90px; height: 68px; object-fit: cover; border: 1px solid var(--cs-line); opacity: .8; }
.cs-atlas-chips { display: flex; flex-direction: column; gap: 1px; border-top: 1px solid var(--cs-line); }
.cs-atlas-chips button { display: flex; gap: 9px; padding: 6px 0; color: var(--cs-muted); font-size: 9px; text-align: left; border-bottom: 1px solid rgba(150,176,205,.07); }
.cs-atlas-chips button:hover { color: var(--cs-gold); }
.cs-atlas-chips b { color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; font-weight: 400; }
.cs-quiz { max-width: 700px; margin: 0 auto; }
.cs-quiz-head { display: flex; justify-content: space-between; color: var(--cs-faint); font-family: var(--cs-mono); font-size: 8px; }
.cs-quiz-bar { height: 2px; margin: 9px 0 18px; background: var(--cs-line); }
.cs-quiz-bar span { display: block; height: 100%; background: var(--cs-gold); }
.cs-quiz h3 { margin: 0 0 15px; color: var(--cs-text); font-size: 21px; font-weight: 300; line-height: 1.3; }
.cs-quiz-options { display: flex; flex-direction: column; gap: 6px; }
.cs-quiz-option { display: flex; gap: 11px; padding: 11px 12px; border: 1px solid var(--cs-line); color: var(--cs-muted); font-size: 11px; text-align: left; }
.cs-quiz-option span { color: var(--cs-faint); font-family: var(--cs-mono); font-size: 9px; }
.cs-quiz-option:hover { border-color: var(--cs-line-strong); color: var(--cs-silver); }
.cs-quiz-option.is-correct { border-color: #69a885; color: #c8e6d8; background: rgba(80,160,120,.08); }
.cs-quiz-option.is-wrong { border-color: #b46e67; color: #ebc5c0; background: rgba(180,90,80,.08); }
.cs-quiz-feedback { margin-top: 14px; padding: 12px; border-left: 2px solid var(--cs-gold); background: rgba(234,183,106,.05); color: var(--cs-muted); font-size: 10.5px; line-height: 1.6; }
.cs-quiz-feedback b { color: var(--cs-text); }
.cs-quiz-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.cs-quiz-result { text-align: center; padding: 22px 0; }
.cs-quiz-score { margin: 12px 0; color: var(--cs-gold); font-family: var(--cs-mono); font-size: 54px; font-weight: 400; }
.cs-quiz-result p { color: var(--cs-muted); font-size: 11px; }
.cs-sources p { margin: 0 0 16px; font-size: 10.5px; line-height: 1.6; }
.cs-source-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--cs-line); background: var(--cs-line); }
.cs-source-list > div { padding: 12px; background: #080d14; }
.cs-source-list b { display: block; color: var(--cs-silver); font-size: 10px; font-weight: 500; line-height: 1.4; }
.cs-source-list p { margin: 5px 0 0; font-size: 9px; line-height: 1.5; }
.cs-source-list a { display: inline-block; margin-top: 4px; font-size: 8px; color: var(--cs-gold); }
.cs-motion { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 16px 0; padding: 13px; border: 1px solid var(--cs-line); }
.cs-motion b { color: var(--cs-silver); font-size: 10px; font-weight: 500; }
.cs-motion p { margin: 4px 0 0; font-size: 9px; }
.cs-toggle { min-width: 78px; padding: 8px; border: 1px solid var(--cs-line-strong); color: var(--cs-faint); font-size: 8px; text-transform: uppercase; }
.cs-toggle.is-active { color: var(--cs-gold); border-color: var(--cs-gold); background: rgba(234,183,106,.08); }
.cs-source-note { color: var(--cs-faint); font-size: 8px; line-height: 1.6; }
.cs-toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); padding: 9px 14px; border: 1px solid var(--cs-line-strong); background: var(--cs-panel-solid); color: var(--cs-silver); font-size: 10px; z-index: 700; }
.cs-reduced-motion *, .cs-reduced-motion *::before, .cs-reduced-motion *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

@media (max-width: 860px) {
  .cs-atlas { grid-template-columns: 1fr; }
  .cs-source-list { grid-template-columns: 1fr; }
  .cs-stage-body > .cs-image-stage, .cs-stage-body > .cs-scale-stage, .cs-stage-body > .cs-distance { min-height: 0; }
  .cs-iv-canvas img { max-height: 34vh; }
  .cs-iv-viewport { min-height: 160px; }
  .cs-scale-viewport { min-height: 160px; }
  .cs-scale-row { gap: 16px; padding: 12px 16px 6px; }
  .cs-scale-name { font-size: 7px; }
  .cs-em-head { display: block; }
  .cs-toggle { margin-top: 8px; }
  .cs-cosmic-head h4 { font-size: 19px; }
  .cs-apollo-hero img { width: 66px; height: 66px; }
  .cs-apollo-event { grid-template-columns: 100px 1fr; }
  .cs-au-sun { font-size: 34px; }
  .cs-au-earth { font-size: 22px; }
  .cs-cosmic-track-wrap { padding-top: 34px; }
  .cs-quiz h3 { font-size: 18px; }
  .cs-presenting .cs-stage-body { padding: 8px; }
}
.cs-scale-dot { position: relative; }
.cs-bound-detail p:not(:first-child) { display: block; }
.cs-bound-detail p { cursor: default; }
.cs-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.cs-quiz-mark { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--cs-mono); font-size: 8px; }
.cs-top-btn .cs-ico { opacity: .8; }
.cs-top-btn:hover .cs-ico { opacity: 1; }
@media (max-width: 1240px) {
  .cs-top-btn { padding: 0 7px; }
  .cs-top-btn .cs-ico { width: 14px; height: 14px; }
}
.cs-cosmic-marker { width: 18px; height: 30px; top: -14px; background: transparent; display: grid; place-items: center; transform: translateX(-50%); }
.cs-cosmic-marker::before { content: ""; position: absolute; left: 50%; top: 12px; width: 1px; height: 9px; background: currentColor; opacity: .35; }
.cs-cosmic-marker span { position: static; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--cs-panel-solid); border: 1px solid var(--cs-muted); }
.cs-cosmic-marker:hover span { border-color: var(--cs-gold); }
.cs-cosmic-marker.is-active { background: transparent; height: 30px; }
.cs-cosmic-marker.is-active::before { background: var(--cs-gold); opacity: 1; }
.cs-cosmic-marker.is-active span { background: var(--cs-gold); border-color: var(--cs-gold); box-shadow: 0 0 10px rgba(234,183,106,.4); }
.cs-cosmic-marker em { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); color: var(--cs-gold); font-family: var(--cs-mono); font-size: 7px; font-style: normal; white-space: nowrap; }
.cs-cosmic-marker.is-edge em { left: auto; right: 0; transform: none; }
.cs-scale-object { flex-shrink: 0; }
.cs-scale-row { justify-content: center; }
.cs-target { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 11px; pointer-events: none; }
.cs-target-ring { position: relative; width: 34px; height: 34px; border: 1px solid rgba(234,183,106,.75); border-radius: 50%; box-shadow: 0 0 0 5px rgba(234,183,106,.05), 0 0 24px rgba(234,183,106,.16); }
.cs-target-ring::before, .cs-target-ring::after { content: ""; position: absolute; background: rgba(234,183,106,.55); }
.cs-target-ring::before { left: 50%; top: -7px; width: 1px; height: 5px; }
.cs-target-ring::after { top: 50%; left: -7px; height: 1px; width: 5px; }
.cs-target-label { padding: 5px 8px; border: 1px solid var(--cs-line); background: rgba(5,9,14,.74); color: var(--cs-gold); font-family: var(--cs-mono); font-size: 8px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(8px); }
.cs-chip.is-active { color: var(--cs-gold); border-color: rgba(234,183,106,.55); background: rgba(234,183,106,.08); }
@media (max-width: 860px) { .cs-target { top: 46%; } .cs-target-label { font-size: 7px; } }
.cs-presenting .cs-iv-canvas img { max-height: 70vh; }
.cs-presenting .cs-iv-viewport { min-height: 56vh; }
.cs-slide-modal .cs-iv-canvas img { max-height: 66vh; }
.cs-slide-modal .cs-iv-viewport { min-height: 52vh; }
@media (max-width: 860px) {
  .cs-presenting .cs-iv-canvas img { max-height: 54vh; }
  .cs-presenting .cs-iv-viewport { min-height: 40vh; }
  .cs-slide-modal .cs-iv-canvas img { max-height: 42vh; }
}
.cs-present-actions { display: flex; align-items: center; gap: 5px; }
.cs-present-top button { width: auto; min-width: 30px; padding: 0 8px; font-family: var(--cs-mono); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.cs-present-top button[data-cs="present"] { width: 34px; padding: 0; font-size: 18px; }
.cs-scale-row { gap: 12px; }
.cs-scale-object { min-width: 30px; }
.cs-scale-name { max-width: 74px; font-size: 7.5px; }
.cs-scale-dot { min-width: 1px; min-height: 1px; }