/* ===================================================================
   AETHER-Ω — PLANETARY OBSERVATORY
   =================================================================== */
@font-face{
  font-family:"Aether Serif";
  src:url("../fonts/aether-serif.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
:root{
  --bg:#04060c;
  --ink:#f2f1ea;
  --muted:#8b8e99;
  --dim:#5b5f6b;
  --line:rgba(255,255,255,.10);
  --accent:#d6ff6b;
  --accent-rgb:214,255,107;
  --font-display:"Bahnschrift","Segoe UI Variable Display","Arial Narrow",Impact,sans-serif;
  --font-body:"Segoe UI Variable Text","Segoe UI",system-ui,sans-serif;
  --font-mono:"Cascadia Code",Consolas,"SFMono-Regular",monospace;
  --font-cn:"Aether Serif","Songti SC","Source Han Serif SC","Noto Serif CJK SC","STSong",serif;
  --pad:clamp(20px,3.4vw,58px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;background:#04060c;}
body{
  background:#04060c;
  color:var(--ink);
  font-family:var(--font-body);
  overflow-x:hidden;
  min-height:100svh;
  cursor:crosshair;
}
::selection{background:var(--accent);color:#04060c;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

#world{
  position:fixed;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:0;
  background:radial-gradient(ellipse 120% 100% at 50% 46%,#070b16 0%,#04060c 58%,#020308 100%);
}

/* ── atmosphere overlays ─────────────────────────────────────── */
.vignette,.grain{position:fixed;inset:0;pointer-events:none;z-index:1;}
.vignette{
  background:
    radial-gradient(ellipse 78% 70% at 50% 46%,transparent 40%,rgba(2,3,7,.55) 100%),
    linear-gradient(0deg,rgba(2,3,8,.92) 0%,rgba(2,3,8,.45) 16%,transparent 34%),
    linear-gradient(180deg,rgba(2,3,8,.72) 0%,transparent 22%);
}
.grain{
  opacity:.035;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── projected sky labels ────────────────────────────────────── */
.labels{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.lbl{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;gap:6px;
  white-space:nowrap;
  font-family:var(--font-mono);
  transition:opacity .45s var(--ease);
  will-change:transform;
  padding:2px 6px 2px 5px;
  border-left:1px solid rgba(var(--accent-rgb),.45);
  background:linear-gradient(90deg,rgba(3,5,10,.62),rgba(3,5,10,.05));
}
.lbl i{
  width:3px;height:3px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 7px rgba(var(--accent-rgb),.9);
  flex:none;
}
.lbl b{font-weight:400;font-size:8px;letter-spacing:.08em;color:rgba(255,255,255,.86);}
.lbl span{font-size:6.5px;letter-spacing:.14em;color:rgba(255,255,255,.34);}
.lbl--cons{
  border-left-color:rgba(255,255,255,.16);
  background:none;
}
.lbl--cons i{background:transparent;box-shadow:none;width:0;}
.lbl--cons b{
  font-size:7.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.lbl--cons span{font-size:6px;letter-spacing:.22em;color:rgba(255,255,255,.20);}
.lbl--r1 b{color:rgba(255,255,255,.62);}
.lbl--star b{color:rgba(255,255,255,.92);}
.lbl--moon{border-left-color:rgba(124,231,255,.6);background:linear-gradient(90deg,rgba(3,8,12,.72),rgba(3,8,12,.05));}
.lbl--moon i{background:#7ce7ff;box-shadow:0 0 8px rgba(124,231,255,.9);}
.lbl--moon b{color:#a9eeff;}

/* ── true-scale readout ──────────────────────────────────────── */
.scaleinfo{
  position:fixed;left:var(--pad);top:92px;z-index:6;
  font-family:var(--font-mono);font-size:7px;letter-spacing:.18em;
  color:rgba(var(--accent-rgb),.9);
  padding:5px 9px;
  border-left:1px solid rgba(var(--accent-rgb),.7);
  background:linear-gradient(90deg,rgba(4,6,12,.7),rgba(4,6,12,0));
  opacity:0;transform:translateX(-6px);
  transition:opacity .4s,transform .4s;
  pointer-events:none;
}
body.is-true .scaleinfo{opacity:1;transform:none;}

/* ── pole marker ─────────────────────────────────────────────── */
.pole-mark{
  position:fixed;left:0;top:0;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:opacity .4s var(--ease);
  will-change:transform;
}
.pole-mark span{
  width:1px;height:26px;background:linear-gradient(180deg,transparent,var(--accent),transparent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.7);
}
.pole-mark b{
  font-family:var(--font-mono);font-size:6px;font-weight:400;letter-spacing:.26em;
  color:var(--accent);white-space:nowrap;
}
.pole-mark em{
  font-style:normal;font-family:var(--font-mono);font-size:6px;letter-spacing:.16em;
  color:rgba(255,255,255,.42);white-space:nowrap;
}

/* ── top hud ─────────────────────────────────────────────────── */
.hud{
  position:fixed;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:24px;
  padding:18px var(--pad);
  font-family:var(--font-mono);font-size:7px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
  background:linear-gradient(180deg,rgba(3,5,10,.72),transparent);
}
.hud__back{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--ink);letter-spacing:.16em;
}
.hud__back b{
  display:grid;place-items:center;
  width:26px;height:26px;
  border:1px solid rgba(var(--accent-rgb),.45);
  color:var(--accent);
  font-weight:400;font-size:11px;
  box-shadow:0 0 18px rgba(var(--accent-rgb),.12), inset 0 0 14px rgba(var(--accent-rgb),.08);
  transition:background .3s,border-color .3s;
}
.hud__back:hover b{background:rgba(var(--accent-rgb),.12);border-color:var(--accent);}
.hud__mid{
  display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.5);
}
.hud__mid i{width:4px;height:4px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);animation:pulse 2s infinite;}
.hud__right{margin-left:auto;display:flex;align-items:center;gap:18px;}
.hud__right .fps b{color:var(--accent);font-weight:400;}
.hud__right .sep{width:1px;height:11px;background:rgba(255,255,255,.14);}
.hud__save{
  font-family:var(--font-mono);font-size:6.5px;letter-spacing:.18em;
  color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 8px;
  transition:color .25s,border-color .25s,background .25s;
}
.hud__save:hover{color:#04060c;background:var(--accent);border-color:var(--accent);}
.hud__save.is-on{color:#04060c;background:var(--accent);border-color:var(--accent);}
.hud-scale{
  font-family:var(--font-mono);font-size:6px;letter-spacing:.18em;
  color:var(--accent);opacity:0;transition:opacity .35s;
}
body.is-true .hud-scale{opacity:1;}

/* ── data panel ──────────────────────────────────────────────── */
.panel{
  position:fixed;
  right:var(--pad);top:132px;
  z-index:5;
  width:268px;
  padding:14px 16px 12px;
  background:linear-gradient(160deg,rgba(7,10,18,.74),rgba(4,6,12,.44));
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 26px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
}
.panel::before,.panel::after{
  content:"";position:absolute;width:8px;height:8px;border:1px solid rgba(var(--accent-rgb),.5);
}
.panel::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.panel::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.panel__head{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:6.5px;letter-spacing:.22em;
  color:rgba(255,255,255,.38);
  padding-bottom:9px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.panel__head b{margin-left:auto;font-weight:400;color:var(--accent);font-size:6px;}
.panel__row{
  display:flex;align-items:baseline;gap:10px;
  padding:5px 0;
  font-family:var(--font-mono);font-size:7px;letter-spacing:.1em;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.panel__row:last-of-type{border-bottom:0;}
.panel__row span{color:rgba(255,255,255,.3);flex:none;}
.panel__row b{
  margin-left:auto;text-align:right;font-weight:400;
  color:rgba(242,241,234,.9);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.panel__row b em{font-style:normal;color:var(--accent);}
.panel__note{
  margin-top:10px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:10.5px;line-height:1.8;color:rgba(255,255,255,.42);
  font-family:var(--font-body);letter-spacing:0;
}

/* ── hero type ───────────────────────────────────────────────── */
.hero{
  position:fixed;
  left:var(--pad);bottom:170px;
  z-index:5;
  width:min(52%,620px);
  pointer-events:none;
  transition:opacity .6s var(--ease),transform .6s var(--ease);
}
body.is-sky .hero{opacity:.16;transform:translateY(10px);}
body.is-sky .facts{opacity:0;pointer-events:none;transform:translateY(8px);}
body.is-sky .timebar{bottom:54px;}
.hero__no{
  font-family:var(--font-mono);font-size:7.5px;letter-spacing:.28em;
  color:var(--accent);text-transform:uppercase;
  margin-bottom:10px;
  display:flex;align-items:center;gap:10px;
}
.hero__no i{width:30px;height:1px;background:rgba(var(--accent-rgb),.6);}
.hero__title{line-height:.9;margin-bottom:16px;}
.hero__cn{
  display:block;
  font-family:var(--font-cn);font-weight:600;
  font-size:clamp(54px,7.6vw,116px);
  letter-spacing:.06em;
  background:linear-gradient(96deg,#fff 0%,#fff 38%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 46px rgba(var(--accent-rgb),.18)) drop-shadow(0 6px 30px rgba(0,0,0,.7));
}
.hero__en{
  display:block;margin-top:-.04em;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(17px,2.35vw,34px);
  letter-spacing:.4em;text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.30);
}
.hero__lead{
  max-width:46ch;
  font-size:clamp(12px,.96vw,13.5px);
  line-height:1.9;
  color:rgba(242,241,234,.60);
  text-shadow:0 2px 24px rgba(0,0,0,.9);
}
.hero__tag{
  display:block;margin-top:12px;
  font-family:var(--font-mono);font-size:6.5px;letter-spacing:.24em;
  color:rgba(255,255,255,.26);
}

/* ── facts row ───────────────────────────────────────────────── */
.facts{
  position:fixed;
  left:var(--pad);right:var(--pad);bottom:102px;
  z-index:5;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:rgba(255,255,255,.07);
  border-top:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.07);
  pointer-events:none;
}
.fact{
  background:rgba(4,6,12,.62);
  padding:10px 12px 9px;
  display:flex;flex-direction:column;gap:4px;
  backdrop-filter:blur(8px);
}
.fact span{font-family:var(--font-mono);font-size:6px;letter-spacing:.2em;color:rgba(255,255,255,.28);}
.fact b{
  font-family:var(--font-mono);font-size:clamp(13px,1.35vw,18px);font-weight:400;
  color:#f0efe8;letter-spacing:.01em;font-variant-numeric:tabular-nums;
}
.fact b i{font-style:normal;font-size:.56em;letter-spacing:.1em;color:var(--accent);margin-left:3px;}

/* ── planet strip ────────────────────────────────────────────── */
.strip{
  position:fixed;left:0;right:0;bottom:0;z-index:6;
  display:flex;align-items:center;gap:0;
  padding:0 var(--pad);
  height:56px;
  background:linear-gradient(180deg,rgba(3,5,10,.2),rgba(3,5,10,.86));
  border-top:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}
.strip__item{
  position:relative;
  display:flex;align-items:center;gap:7px;
  height:100%;
  padding:0 clamp(8px,1.1vw,16px);
  font-family:var(--font-mono);font-size:7px;letter-spacing:.18em;
  color:rgba(255,255,255,.34);
  text-transform:uppercase;
  transition:color .3s;
  flex:1 1 0;
  justify-content:center;
  min-width:0;
}
.strip__item i{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.5;
  transition:opacity .3s,box-shadow .3s;
  flex:none;
}
.strip__item b{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.strip__item em{font-style:normal;font-size:9.5px;color:rgba(255,255,255,.24);letter-spacing:.06em;}
.strip__item:hover{color:rgba(255,255,255,.8);}
.strip__item.is-on{color:var(--accent);}
.strip__item.is-on i{opacity:1;box-shadow:0 0 10px var(--accent);}
.strip__item.is-on::after{
  content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 12px var(--accent);
}
.strip__sep{width:1px;height:16px;background:rgba(255,255,255,.08);flex:none;}

/* ── time bar ───────────────────────────────────────────────── */
.timebar{
  position:fixed;left:0;right:0;bottom:54px;z-index:6;
  height:48px;
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  padding:0 var(--pad);
  background:linear-gradient(180deg,rgba(4,6,12,.55),rgba(4,6,12,.9));
  border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(12px);
  font-family:var(--font-mono);
}
.timebar__meta{
  display:flex;align-items:baseline;gap:10px;
  font-size:6.5px;letter-spacing:.18em;color:rgba(255,255,255,.3);
  white-space:nowrap;
  min-width:230px;
}
.timebar__meta b{color:rgba(255,255,255,.92);font-size:9px;font-weight:400;letter-spacing:.1em;font-variant-numeric:tabular-nums;}
.timebar__meta i{
  font-style:normal;color:var(--accent);font-size:6.5px;letter-spacing:.14em;
  border-left:1px solid rgba(255,255,255,.12);padding-left:10px;
}
.timebar input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:80px;height:22px;background:none;cursor:ew-resize;
}
.timebar input[type=range]::-webkit-slider-runnable-track{
  height:1px;background:linear-gradient(90deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.16));
}
.timebar input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:9px;height:9px;margin-top:-4px;
  background:var(--accent);border-radius:50%;
  box-shadow:0 0 12px rgba(var(--accent-rgb),.9);
}
.timebar input[type=range]::-moz-range-track{height:1px;background:rgba(255,255,255,.2);}
.timebar input[type=range]::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--accent);}
.timebar__ctl{display:flex;gap:1px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.07);}
.tbtn{
  padding:6px 9px;
  font-family:var(--font-mono);font-size:6.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.42);
  background:rgba(4,6,12,.8);
  transition:color .25s,background .25s;
}
.tbtn:hover{color:#fff;}
.tbtn.is-on{color:#04060c;background:var(--accent);}
.tbtn--play{min-width:26px;color:var(--accent);}

.modes{
  position:fixed;right:var(--pad);top:86px;z-index:6;
  display:flex;gap:1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}
.mode{
  padding:8px 11px;
  font-family:var(--font-mono);font-size:6.5px;letter-spacing:.18em;
  color:rgba(255,255,255,.4);
  background:rgba(4,6,12,.8);
  transition:color .25s,background .25s;
}
.mode:hover{color:#fff;}
.mode.is-on{color:#04060c;background:var(--accent);}

/* ── zoom indicator ──────────────────────────────────────────── */
.zoombar{
  position:fixed;right:calc(var(--pad) - 2px);top:50%;transform:translateY(-50%);
  z-index:5;display:flex;flex-direction:column;align-items:center;gap:9px;
  pointer-events:none;opacity:.6;transition:opacity .4s;
}
body.is-close .zoombar{opacity:.95;}
body.is-sky .zoombar{opacity:0;}
.zoombar__track{
  position:relative;width:1px;height:132px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.2));
}
.zoombar__track i{
  position:absolute;left:-1.5px;bottom:0;width:4px;height:22%;
  background:var(--accent);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.85);
  transition:height .12s linear;
}
.zoombar b{
  font-family:var(--font-mono);font-size:6px;font-weight:400;letter-spacing:.1em;
  color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;
}
.zoombar em{
  font-style:normal;font-family:var(--font-mono);font-size:5px;
  letter-spacing:.22em;color:rgba(255,255,255,.22);
}



/* ── observer panel (sky mode) ───────────────────────────────── */
.skypanel{
  position:fixed;left:var(--pad);top:50%;transform:translateY(-50%) translateX(-10px);
  z-index:6;width:206px;padding:12px 14px 14px;
  background:linear-gradient(160deg,rgba(7,10,18,.78),rgba(4,6,12,.5));
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
}
body.is-sky .skypanel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%);}
.skypanel__head{
  font-family:var(--font-mono);font-size:6px;letter-spacing:.24em;
  color:rgba(255,255,255,.34);padding-bottom:8px;margin-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.skypanel__row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:6.5px;letter-spacing:.14em;
  color:rgba(255,255,255,.3);margin-bottom:2px;
}
.skypanel__row b{color:var(--accent);font-weight:400;font-size:9px;letter-spacing:.06em;}
.skypanel input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:18px;background:none;cursor:ew-resize;margin-bottom:8px;
}
.skypanel input[type=range]::-webkit-slider-runnable-track{height:1px;background:rgba(255,255,255,.16);}
.skypanel input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.8);
}
.skypanel input[type=range]::-moz-range-track{height:1px;background:rgba(255,255,255,.16);}
.skypanel input[type=range]::-moz-range-thumb{width:8px;height:8px;border:0;border-radius:50%;background:var(--accent);}
.skypanel__note{
  font-family:var(--font-body);font-size:9px;line-height:1.7;letter-spacing:0;
  color:rgba(255,255,255,.3);margin-top:2px;
}

/* ── cardinal points ─────────────────────────────────────────── */
.card-pt{
  position:fixed;left:0;top:0;z-index:3;pointer-events:none;
  font-family:var(--font-mono);font-size:8px;letter-spacing:.2em;
  color:rgba(120,170,255,.85);
  transform:translate(-50%,-50%);
  text-shadow:0 0 10px rgba(60,110,255,.5);
  opacity:0;transition:opacity .4s;
}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── sky mode tweaks ─────────────────────────────────────────── */
body.is-sky .panel{background:linear-gradient(160deg,rgba(7,10,18,.82),rgba(4,6,12,.5));}
body.is-sky .vignette{
  background:
    radial-gradient(ellipse 90% 80% at 50% 40%,transparent 46%,rgba(2,3,7,.62) 100%),
    linear-gradient(0deg,rgba(2,3,8,.96) 0%,rgba(2,3,8,.6) 22%,transparent 46%);
}

/* ── intro ───────────────────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:40;
  display:grid;place-items:center;
  background:#04060c;
  transition:opacity 1s var(--ease),visibility 1s;
}
.boot.is-done{opacity:0;visibility:hidden;}
.boot__inner{text-align:center;font-family:var(--font-mono);}
.boot__mark{
  font-family:var(--font-cn);font-size:44px;color:var(--accent);
  margin-bottom:10px;letter-spacing:.1em;
}
.boot__name{font-size:8px;letter-spacing:.4em;color:rgba(255,255,255,.5);text-transform:uppercase;}
.boot__bar{width:150px;height:1px;background:rgba(255,255,255,.12);margin:20px auto 10px;overflow:hidden;}
.boot__bar i{display:block;height:100%;width:0;background:var(--accent);box-shadow:0 0 10px var(--accent);transition:width .3s;}
.boot__pct{font-size:7px;letter-spacing:.2em;color:rgba(255,255,255,.35);}

/* ── reveal ──────────────────────────────────────────────────── */
.hud,.hero,.panel,.facts,.strip,.modes{opacity:0;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
html.is-ready .hud,html.is-ready .hero,html.is-ready .panel,html.is-ready .facts,
html.is-ready .strip,html.is-ready .modes{opacity:1;}
.hero{transform:translateY(16px);}
html.is-ready .hero{transform:none;}

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width:1100px){
  .panel{width:236px;}
  .hero{width:min(58%,560px);}
}
@media (max-width:900px){
  .panel{display:none;}
  .hero{width:min(78%,620px);bottom:200px;}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));}
  .strip__item em{display:none;}
  .strip__item b{display:none;}
  .strip__item{padding:0 6px;}
  .strip__item.is-on b{display:inline;}
  body.is-sky .hero{opacity:.1;}
  .timebar__meta{min-width:0;}
  .timebar__meta > span:first-child{display:none;}
}
@media (max-width:620px){
  .hero{bottom:210px;width:calc(100% - 40px);}
  .hero__cn{font-size:clamp(44px,14vw,72px);}
  .hero__lead{font-size:11.5px;line-height:1.8;}
  .hero__tag{font-size:5.5px;letter-spacing:.16em;}
  .facts{bottom:112px;}
  .fact{padding:7px 9px;}
  .fact b{font-size:12px;}
  .timebar{bottom:56px;gap:10px;padding:0 20px;}
  .timebar__meta{font-size:6px;gap:6px;}
  .timebar__meta b{font-size:8px;}
  .timebar__meta i{font-size:5.5px;padding-left:6px;}
  .timebar__ctl .tbtn[data-time="-365"],
  .timebar__ctl .tbtn[data-time="365"]{display:none;}
  .tbtn{padding:6px 7px;}
  .modes{top:64px;bottom:auto;right:20px;}
  .mode{padding:7px 9px;font-size:6px;}
  .skypanel{left:20px;right:20px;width:auto;top:auto;bottom:118px;transform:translateY(8px);}
  body.is-sky .skypanel{transform:none;}
  .hud__mid span{display:none;}
  .hud__right .sep,.hud__right .date{display:none;}
  .card-pt{font-size:7px;}
}
@media (prefers-reduced-motion:reduce){
  .hud__mid i{animation:none;}
  .hero,.facts,.gate,.chapter{transition:none;}
}

/* ── close-up: chrome recedes (last in the file so it wins) ─── */
body.is-close .hero{opacity:.10;transform:translateY(8px);}
body.is-close .facts{opacity:.18;}
body.is-close .labels{opacity:.55;}
body.is-close .panel{opacity:.35;}

/* ── embedded tile (used by compare.html) ────────────────────── */
html.is-embed .hud,
html.is-embed .panel,
html.is-embed .facts,
html.is-embed .timebar,
html.is-embed .strip,
html.is-embed .modes,
html.is-embed .zoombar,
html.is-embed .skypanel,
html.is-embed .scaleinfo,
html.is-embed .card-pt,
html.is-embed .grain{ display:none !important; }
html.is-embed .vignette{ background:linear-gradient(0deg,rgba(2,3,8,.86) 0%,transparent 38%); }
html.is-embed .hero{
  left:22px;bottom:20px;width:auto;opacity:1;
}
html.is-embed .hero__no{ font-size:6px;margin-bottom:6px; }
html.is-embed .hero__cn{ font-size:38px;letter-spacing:.04em; }
html.is-embed .hero__en{ font-size:10px;letter-spacing:.34em; }
html.is-embed .hero__lead,
html.is-embed .hero__tag{ display:none; }
html.is-embed .labels{ opacity:.45; }
html.is-embed .pole-mark{ display:none; }

/* ── deployment hardening ────────────────────────────────────── */
:root{ --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
html,body{ overscroll-behavior:none; }
#world{ touch-action:none; }
.strip{
  height:calc(56px + var(--safe-b));
  padding-bottom:var(--safe-b);
}
.timebar{ bottom:calc(54px + var(--safe-b)); }
@media (max-width:620px){
  .timebar{ bottom:calc(56px + var(--safe-b)); }
  .facts{ bottom:calc(112px + var(--safe-b)); }
}
.hud{ padding-top:calc(18px + var(--safe-t)); }

/* no-WebGL notice */
.nogl{
  position:fixed; inset:0; z-index:60;
  display:none; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:32px; text-align:center;
  background:radial-gradient(ellipse 80% 60% at 50% 40%, #0a0f1a, #04060c 70%);
  font-family:var(--font-body);
}
html.no-webgl .nogl{ display:flex; }
html.no-webgl .labels,
html.no-webgl .zoombar,
html.no-webgl .hero{ display:none !important; }
.nogl b{
  font-family:var(--font-cn); font-weight:600; font-size:26px;
  color:var(--accent); letter-spacing:.1em;
}
.nogl span{
  max-width:46ch; font-size:13px; line-height:1.95;
  color:rgba(242,241,234,.55);
}

/* ── new instruments: mini orbit, mission chip, landmark labels ── */
.panel{
  max-height:calc(100vh - 300px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--accent-rgb),.45) transparent;
}
.panel::-webkit-scrollbar{ width:3px; }
.panel::-webkit-scrollbar-thumb{ background:rgba(var(--accent-rgb),.4); }
#miniOrbit{
  display:block; width:100%; height:102px;
  margin:2px 0 10px; padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mission{
  display:flex; flex-direction:column; gap:3px;
  margin-top:10px; padding:8px 10px;
  border-left:2px solid var(--accent);
  background:linear-gradient(90deg,rgba(var(--accent-rgb),.10),transparent);
}
.mission[hidden]{ display:none; }
.mission b{
  font-family:var(--font-mono); font-size:7.5px; font-weight:400;
  letter-spacing:.1em; color:var(--accent);
}
.mission span{
  font-family:var(--font-mono); font-size:6.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.46);
}
.lbl--land{
  border-left-color:rgba(255,190,120,.75);
  background:linear-gradient(90deg,rgba(14,8,4,.74),rgba(3,5,10,.04));
}
.lbl--land i{ background:#ffbe78; box-shadow:0 0 8px rgba(255,190,120,.9); }
.lbl--land b{ color:#ffd9b0; }
.lbl--planet{
  border-left-color:rgba(170,255,190,.65);
  background:linear-gradient(90deg,rgba(4,12,8,.72),rgba(3,5,10,.04));
}
.lbl--planet i{ background:#aaffbe; box-shadow:0 0 8px rgba(170,255,190,.9); }
.lbl--planet b{ color:#c8ffd6; }

.skypanel__planets{
  margin-top:9px; padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:2px;
}
.sp-row{
  display:flex; align-items:baseline; gap:6px;
  font-family:var(--font-mono); font-size:6.5px; letter-spacing:.08em;
  color:rgba(255,255,255,.26);
}
.sp-row i{ font-style:normal; flex:1; }
.sp-row em{ font-style:normal; color:rgba(255,255,255,.3); }
.sp-row b{ font-weight:400; color:rgba(255,255,255,.22); }
.sp-row.is-up{ color:rgba(255,255,255,.85); }
.sp-row.is-up em{ color:var(--accent); }
.sp-row.is-up b{ color:rgba(255,255,255,.6); }
.hud-precomp{font-family:var(--font-mono);font-size:6px;letter-spacing:.14em;color:rgba(214,255,107,.55);}