/* Galaxy view — layered over the real homepage. Nothing on screen but the sky and quiet names. */
#gxCanvas {
  position: fixed; inset: 0; z-index: 400;
  display: block; width: 100vw; height: 100vh; height: 100dvh;
  background: #020308; outline: none; touch-action: none;
  opacity: 0; visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}
/* the light theme prints the sky as an engraved plate on the page's own paper */
html[data-theme="light"] #gxCanvas { background: #f3efe4; }
html.gx-on:not(.gx-hero) #gxCanvas,
html.gx-on.gx-entering #gxCanvas { opacity: 1; visibility: visible; transition: opacity 1.15s ease; }

html.gx-on, html.gx-on body { overflow: hidden; }
html.gx-on #main { position: static !important; z-index: auto !important; transform: none !important; filter: none !important; contain: none !important; }
/* The footer, in galaxy view, is a quiet strip along the bottom of the hero: the links and the colophon, no panorama.
   It goes with the hero; scrolling on still enters the galaxy. Its right end stays clear of HIDDEN TRACK. */
html.gx-on body > footer.public-shell-footer {
  position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex !important; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0;
  width: min(1180px, calc(100% - 48px)); margin: 0 auto; border-top: 0;
  padding: 0 0 calc(14px + env(safe-area-inset-bottom)) !important;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
html.gx-on.gx-hero:not(.gx-entering) body > footer.public-shell-footer {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .9s ease .25s, visibility 0s;
}
html.gx-on body > footer.public-shell-footer > :is(.lunar-footer-scene, .brand, p, #footer-build-number) { display: none !important; }
html.gx-on body > footer.public-shell-footer > nav { justify-content: flex-start; gap: 0 2px; margin-left: -12px; }
html.gx-on body > footer.public-shell-footer > nav a { min-height: 34px; min-width: 0; padding: 0 12px; }
html.gx-on body > footer.public-shell-footer > nav .back-top { display: none !important; }
html.gx-on body > footer.public-shell-footer > small {
  max-width: none; margin: 0; padding: 0; text-align: left; white-space: nowrap;
  color: var(--ink-faint); font: 400 10px/1.6 var(--font-mono); letter-spacing: .16em; opacity: .75;
}
html.gx-on body > footer.public-shell-footer .footer-stealth-door { padding: 0 .3em; border: 0; background: none; color: inherit; font: inherit; cursor: default; }
@media (max-width: 760px) {
  /* narrow: centred above the hero's scroll cue and the music button, which share the bottom edge */
  html.gx-on body > footer.public-shell-footer { align-items: center; width: calc(100% - 32px); padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
  html.gx-on body > footer.public-shell-footer > nav { justify-content: center; margin-left: 0; }
  html.gx-on body > footer.public-shell-footer > nav a { padding: 0 8px; letter-spacing: .14em; }
  html.gx-on body > footer.public-shell-footer > small { text-align: center; white-space: normal; max-width: none; letter-spacing: .12em; }
  /* the hero fits the screen above the strip: text at the top, the probe in whatever room is left, so a short phone
     gets a smaller probe rather than links written across it */
  html.gx-on.gx-hero .public-observatory-shell .hero {
    height: 100svh; min-height: 0; grid-template-rows: auto minmax(0, 1fr);
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
  html.gx-on.gx-hero .public-observatory-shell .hero-probe { width: auto; max-width: 110%; height: 100%; min-height: 0; margin: 0; align-self: center; }
  /* on phones the music button docks into the footer; over the hero it keeps its own corner instead of lifting the
     strip into the probe */
  html.gx-on body > footer.public-shell-footer .music-easter.is-footer-docked { position: fixed; right: 22px; bottom: calc(46px + env(safe-area-inset-bottom)); margin: 0; }
}
html.gx-on.gx-hero #main > :not(.hero) { display: none !important; }
html.gx-on:not(.gx-hero) #main > :not(.gx-active) { display: none !important; }
html.gx-on.gx-hero .hero { min-height: 100vh; min-height: 100svh; }
/* the hero cannot scroll here, so on a short window the probe is sized by the height as well as the width */
@media (min-width: 761px) {
  html.gx-on.gx-hero .public-observatory-shell .hero-probe { max-width: calc(100svh - 150px); }
}
html.gx-on.gx-hero:not(.gx-entering) .hero > * { animation: gx-hero-in .9s ease both; }
html.gx-on.gx-entering .hero > * {
  opacity: 0; transform: translateY(-44px) scale(.985);
  transition: opacity .7s ease, transform .95s cubic-bezier(.6, 0, .2, 1);
}
@keyframes gx-hero-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- first visit: the two views side by side ---------- */
.gx-choose {
  position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + clamp(16px, 4vh, 48px)) clamp(16px, 4vw, 56px) calc(env(safe-area-inset-bottom) + clamp(16px, 4vh, 48px));
  color: var(--ink); background: var(--bg);
  opacity: 0; transition: opacity .45s ease;
}
.gx-choose.is-open { opacity: 1; }
.gx-choose.is-leaving { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
html.gx-choosing .music-easter, html.gx-choosing body > footer.public-shell-footer { visibility: hidden !important; }
.gx-choose-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gx-choose-halves { flex: 1; min-height: 0; display: flex; gap: clamp(10px, 1.4vw, 18px); }
.gx-choose-half {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0; border: 1px solid var(--line-strong); color: inherit; background: none; cursor: pointer; text-align: left;
  overflow: hidden;
  transition: flex-grow .7s var(--ease-out), border-color .4s, opacity .5s, transform .7s var(--ease-out);
}
.gx-choose.is-open .gx-choose-half { animation: gx-choose-in .8s var(--ease-out) both; }
.gx-choose.is-open .gx-choose-half.is-list { animation-delay: .09s; }
@keyframes gx-choose-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.gx-choose.is-aiming .gx-choose-half.is-aimed { flex-grow: 1.32; border-color: var(--signal); }
.gx-choose.is-aiming .gx-choose-half:not(.is-aimed) { flex-grow: .68; }
.gx-choose-half:focus-visible { outline: none; }
.gx-choose-half:focus-visible:not(.is-aimed) { outline: 1px solid var(--signal); outline-offset: 3px; }
/* the half not being aimed at falls back */
.gx-choose-view { transition: filter .5s, opacity .5s; }
.gx-choose.is-aiming .gx-choose-half.is-galaxy:not(.is-aimed) .gx-choose-view { filter: brightness(.5) saturate(.6); }
.gx-choose.is-aiming .gx-choose-half.is-list:not(.is-aimed) .gx-choose-view { opacity: .45; }
.gx-choose.is-locked .gx-choose-half { flex-grow: .001 !important; opacity: 0; }
.gx-choose[data-locked="galaxy"] .gx-choose-half.is-galaxy, .gx-choose[data-locked="list"] .gx-choose-half.is-list { flex-grow: 1 !important; opacity: 1; border-color: var(--signal); }
.gx-choose-view { position: absolute; inset: 0; overflow: hidden; }
/* the galaxy half shows the sky as the theme prints it: night, or the plate's negative on paper */
.gx-choose-sky { background: radial-gradient(120% 90% at 50% 40%, #0b0f1c, #03040a 70%); }
html[data-theme="light"] .gx-choose-sky { background: #f3efe4; }
html[data-theme="light"] .gx-choose-disc { filter: grayscale(1) invert(1) contrast(1.25) brightness(1.04); mix-blend-mode: multiply; opacity: .9; }
.gx-choose-disc {
  position: absolute; left: 50%; top: 50%; width: min(118%, 92vh); aspect-ratio: 1; translate: -50% -50%;
  background: url('/assets/galaxy/galaxy-m.webp') center / cover no-repeat;
  mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
  transform: perspective(900px) rotateX(58deg) rotate(0deg); opacity: .82;
  animation: gx-disc-turn 160s linear infinite; transition: opacity .6s, scale .9s var(--ease-out);
}
@keyframes gx-disc-turn { to { transform: perspective(900px) rotateX(58deg) rotate(-360deg); } }
.gx-choose-half.is-galaxy.is-aimed .gx-choose-disc { opacity: 1; scale: 1.06; }
.gx-choose[data-locked="galaxy"] .gx-choose-disc { scale: 1.5; opacity: 1; transition: scale .9s cubic-bezier(.5, 0, .2, 1), opacity .4s; }
/* the list half: the page's own sections going by */
.gx-choose-index { background: var(--panel); }
.gx-mini-track { position: absolute; left: 12%; right: 12%; top: 0; display: flex; flex-direction: column; animation: gx-mini-scroll 46s linear infinite; }
@keyframes gx-mini-scroll { to { transform: translateY(-50%); } }
.gx-mini-row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 4px 10px; padding: 18px 0 20px; border-top: 1px solid var(--line); }
.gx-mini-row b { color: var(--signal-text); font: 500 9px/1 var(--font-mono); letter-spacing: .18em; }
.gx-mini-row i { color: var(--ink-faint); font: normal 500 9px/1 var(--font-mono); letter-spacing: .14em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gx-mini-row strong { grid-column: 1 / -1; font: 600 clamp(17px, 1.6vw, 22px)/1.25 var(--font-title); letter-spacing: .02em; }
.gx-mini-lines { grid-column: 1 / -1; height: 26px; background: linear-gradient(var(--line-strong) 0 0) 0 4px / 86% 1px no-repeat, linear-gradient(var(--line-strong) 0 0) 0 13px / 64% 1px no-repeat, linear-gradient(var(--line) 0 0) 0 22px / 74% 1px no-repeat; }
.gx-mini-row.is-footer { grid-template-columns: 1fr; padding-bottom: 46px; }
.gx-mini-moon { height: 64px; background: url('/assets/observatory/lunar-observatory-compact.webp') center bottom / contain no-repeat; opacity: .9; }
.gx-choose-half.is-list.is-aimed .gx-mini-track { animation-duration: 30s; }
.gx-choose-index::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--panel), transparent 22%, transparent 62%, var(--panel) 92%); pointer-events: none; }
/* a reticle locks onto the half being aimed at */
.gx-choose-reticle { position: absolute; inset: 14px; z-index: 3; pointer-events: none; opacity: 0; scale: 1.04; transition: opacity .35s, scale .5s var(--ease-out); }
.gx-choose-reticle i { position: absolute; width: 18px; height: 18px; border: 0 solid var(--signal); }
.gx-choose-reticle .is-tl { left: 0; top: 0; border-width: 1px 0 0 1px; }
.gx-choose-reticle .is-tr { right: 0; top: 0; border-width: 1px 1px 0 0; }
.gx-choose-reticle .is-bl { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.gx-choose-reticle .is-br { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.gx-choose-half.is-galaxy .gx-choose-reticle i { border-color: #d6ff73; }
.gx-choose-half.is-aimed .gx-choose-reticle, .gx-choose[data-locked] .gx-choose-half .gx-choose-reticle { opacity: 1; scale: 1; }
@media (max-width: 760px) {
  .gx-choose-halves { flex-direction: column; }
  .gx-choose-disc { width: min(150%, 70vh); }
  .gx-mini-track { left: 8%; right: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .gx-choose, .gx-choose-half, .gx-choose-disc, .gx-choose-reticle { transition: none !important; animation: none !important; }
  .gx-mini-track { animation: none; }
}

/* ---------- a section opened from the galaxy keeps its own design ---------- */
html.gx-on #main > .gx-active {
  position: fixed !important; inset: 0; z-index: 450;
  margin: 0 !important; max-width: none !important;
  overflow-y: auto; overscroll-behavior: contain;
  padding-top: calc(var(--header-h, 56px) + 32px) !important;
  background: transparent;
}
html.gx-on #main > .gx-active h2[tabindex="-1"]:focus { outline: none; }
/* The sky stays behind the content, softened rather than covered. */
.gx-veil {
  position: fixed; inset: 0; z-index: 440; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 46%, rgba(2, 3, 8, .38), rgba(2, 3, 8, .82) 72%);
  backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0);
  opacity: 0; transition: opacity .7s ease, backdrop-filter .7s ease, -webkit-backdrop-filter .7s ease;
}
html.gx-open .gx-veil { opacity: 1; backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
html[data-theme="light"].gx-open .gx-veil { background: rgba(243, 239, 228, .9); }
/* 收藏 landed: the panel is laid out unseen while the camera comes down, then the room stands in the night desert. */
html.gx-landing #main > .gx-active { opacity: 0; pointer-events: none; }
html:is(.gx-landing, .gx-landed) .gx-veil { opacity: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:is(.gx-landing, .gx-landed) .room-stage { border-color: transparent; }
/* On the light theme's plate the way down is engraved; once the room is shown it stands on the page's paper, as it does
   in the list view, and the engraved desert comes back as the camera leaves. */
html[data-theme="light"].gx-landed .gx-veil { opacity: 1; background: #f3efe4; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- header: only what is needed, receding until touched ---------- */
html.gx-on:not(.gx-hero) .site-header {
  background: linear-gradient(rgba(2, 3, 8, .55), rgba(2, 3, 8, 0)) !important;
  border-bottom-color: transparent !important; backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.gx-on:not(.gx-hero):not(.gx-open) .site-header > * { opacity: .5; transition: opacity .4s ease; }
html.gx-on:not(.gx-hero):not(.gx-open) .site-header:is(:hover, :focus-within) > * { opacity: 1; }
html.gx-on:not(.gx-hero) .site-header :is(.desktop-nav, .mystery-button) { display: none !important; }
html.gx-on:not(.gx-hero) .music-easter { display: none !important; }
/* On the light theme's plate the header does not recede: its name and buttons are inked at nearly full strength, over a
   wash of paper, each with a hairline edge of paper so it reads over the engraving as well as over open paper. */
html[data-theme="light"].gx-on:not(.gx-hero) .site-header {
  background: linear-gradient(rgba(243, 239, 228, .82), rgba(243, 239, 228, 0)) !important;
}
html[data-theme="light"].gx-on:not(.gx-hero):not(.gx-open) .site-header > * { opacity: .92; }
html[data-theme="light"].gx-on:not(.gx-hero):not(.gx-open) .site-header:is(:hover, :focus-within) > * { opacity: 1; }
html[data-theme="light"].gx-on:not(.gx-hero) .site-header :is(.brand, .icon-button, .menu-button) {
  color: #1d232a; filter: drop-shadow(0 0 1px #f3efe4) drop-shadow(0 0 2.5px rgba(243, 239, 228, .9));
}
html[data-theme="light"].gx-on:not(.gx-hero) .site-header .menu-button span { background: #1d232a; }

/* ---------- labels: no text on the sky ----------
   Labels exist for the keyboard and for screen readers. Pointer users only ever see a faint name
   while hovering a body up close; planet names appear only on keyboard focus. Clicks fall through
   to the canvas, which does its own picking. */
.gx-labels { position: fixed; inset: 0; z-index: 410; pointer-events: none; overflow: hidden; }
html:not(.gx-on) .gx-labels, html.gx-hero .gx-labels, html.gx-open .gx-labels { visibility: hidden; }
.gx-label {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0;
  color: inherit; background: none; border: 0; cursor: pointer;
  font: inherit; pointer-events: none; will-change: transform;
}
.gx-label[hidden] { display: none; }
.gx-tag {
  position: absolute; pointer-events: none; white-space: nowrap;
  color: rgba(240, 242, 236, .78);
  text-shadow: 0 0 6px rgba(0, 0, 0, .95), 0 1px 14px rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .45s ease;
}
.gx-tag b { font-weight: inherit; }
.gx-label:not(.gx-label--planet).is-hover .gx-tag, .gx-label:focus-visible .gx-tag { opacity: 1; }
.gx-label:focus-visible { outline: none; }
.gx-label:focus-visible .gx-tag { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }

/* on the plate: ink, with a halo of paper */
html[data-theme="light"] .gx-tag { color: rgba(29, 35, 42, .86); text-shadow: 0 0 5px rgba(243, 239, 228, .95), 0 1px 12px rgba(243, 239, 228, .8); }
html[data-theme="light"] .gx-label.is-room .gx-tag { color: #875a0d; }
html[data-theme="light"] .gx-label.is-quiet .gx-tag { color: #186f9e; }

/* planets: a caption centred under the disc (keyboard focus only) */
.gx-label--planet .gx-tag {
  left: 0; top: 30px; transform: translateX(-50%);
  font: 500 13px/1 var(--font-title, serif); letter-spacing: .32em; padding-left: .32em;
}
/* section stars: a thin reticle locks on while hovered or focused; its ticks turn into place */
.gx-label--planet::before, .gx-label--planet::after {
  content: ''; position: absolute; pointer-events: none; opacity: 0; color: rgba(240, 244, 250, .82);
  /* a dark hairline halo keeps it legible over the bright disc as well as over empty space */
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, .85)) drop-shadow(0 0 3px rgba(0, 0, 0, .35));
  transition: opacity .22s ease, transform .42s cubic-bezier(.2, .8, .2, 1);
}
.gx-label--planet::before { left: -15px; top: -15px; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; transform: scale(1.45); }
.gx-label--planet::after {
  left: -23px; top: -23px; width: 46px; height: 46px; transform: scale(1.2) rotate(45deg);
  background: linear-gradient(currentColor, currentColor) 50% 0 / 1px 7px no-repeat, linear-gradient(currentColor, currentColor) 50% 100% / 1px 7px no-repeat,
    linear-gradient(currentColor, currentColor) 0 50% / 7px 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 50% / 7px 1px no-repeat;
}
.gx-label--planet:is(.is-hover, :focus-visible)::before, .gx-label--planet:is(.is-hover, :focus-visible)::after { opacity: 1; transform: none; }
/* on the plate the reticle is ink; the plate clears the paper under its circle, and its ticks carry a paper edge */
html[data-theme="light"] .gx-label--planet::before { color: #1d232a; filter: none; border-width: 1.25px; }
html[data-theme="light"] .gx-label--planet::after { color: #1d232a; filter: drop-shadow(0 0 .7px #f3efe4) drop-shadow(0 0 .7px #f3efe4) drop-shadow(0 0 .7px #f3efe4); }
/* satellites, surface sites, friends: a caption beside the body */
.gx-label:not(.gx-label--planet) .gx-tag {
  left: calc(var(--r, 6px) + 9px); top: 0; transform: translateY(-50%);
  font: 400 12px/1.2 var(--font-sans); letter-spacing: .04em;
}
.gx-label.is-left .gx-tag { left: auto; right: calc(var(--r, 6px) + 9px); }
.gx-label--region .gx-tag { font: 500 12.5px/1.2 var(--font-title, serif); letter-spacing: .14em; }
.gx-label.is-room .gx-tag { font: 500 13px/1.2 var(--font-title, serif); letter-spacing: .16em; color: rgba(255, 226, 180, .86); }
.gx-label.is-quiet .gx-tag { font-size: 11.5px; color: rgba(214, 236, 255, .85); }
.gx-label--friend .gx-tag { left: 22px; letter-spacing: .08em; }


/* ---------- the rare status line ---------- */
.gx-toast {
  position: fixed; z-index: 480; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 6px); padding: 0; max-width: calc(100vw - 32px);
  font: 400 12px/1.5 var(--font-sans); letter-spacing: .06em; color: rgba(232, 236, 228, .8);
  text-shadow: 0 0 8px rgba(0, 0, 0, .9);
  opacity: 0; pointer-events: none; transition: opacity .5s ease, transform .5s ease;
}
.gx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
html[data-theme="light"] .gx-toast { color: rgba(29, 35, 42, .82); text-shadow: 0 0 8px rgba(243, 239, 228, .95); }
/* ---------- the loading window: the way in waits for the whole preparation once, and says how far it has come ----------
   It opens under the hero's button when that is what was pressed, else in the middle of the screen. The line fills by
   the scene's real milestones (galaxy.js, loadShare); a faint scan runs along what is left, so a long step still reads
   as work in progress. */
.gx-loading {
  position: fixed; z-index: 430; left: 50%; top: 58%; translate: -50% -50%;
  width: min(296px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 16px 13px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); border: 1px solid var(--line-strong); clip-path: var(--notch);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s ease, transform .5s var(--ease-out);
}
.gx-loading.is-anchored { left: var(--gx-load-x); top: var(--gx-load-y); translate: none; }
.gx-loading.is-on { opacity: 1; transform: none; }
.gx-loading-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.gx-loading-head span { font: 500 12px/1 var(--font-sans); letter-spacing: .3em; color: var(--ink); }
.gx-loading-head b { font: 500 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--signal-text); font-variant-numeric: tabular-nums; }
.gx-loading-bar { position: relative; display: block; height: 7px; overflow: hidden;
  /* the scale: a hairline with a tick every tenth */
  background: linear-gradient(var(--line-strong) 0 0) 0 3px / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(10% - .1px)) 0 0 / 100% 7px no-repeat; }
.gx-loading-bar i { position: absolute; left: 0; top: 2px; width: 100%; height: 3px; background: var(--signal-text);
  transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .6s var(--ease-out); }
.gx-loading-bar::after { content: ''; position: absolute; top: 3px; left: 0; width: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink), transparent); opacity: .5; animation: gx-load-scan 1.8s linear infinite; }
@keyframes gx-load-scan { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
.gx-loading-step { margin: 10px 0 0; font: 400 12px/1.4 var(--font-sans); letter-spacing: .08em; color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) {
  .gx-loading, .gx-loading-bar i { transition: none; }
  .gx-loading-bar::after { display: none; }
}

/* ---------- the hero's link: into the galaxy rather than to the journal ---------- */
.hero .text-link .gx-cta-label { display: none; font-weight: 700; }
html.gx-on .hero .text-link > b { display: none; }
html.gx-on .hero .text-link .gx-cta-label { display: inline; }

/* ---------- the crosshair over the sky ----------
   Over a body that can be clicked, the site's crosshair (observatory.js) folds its ring into the dot and leaves the
   body's own reticle or caption to say so. On the light theme's plate it is ink with an edge of paper, so it shows on
   open paper and on the darkest engraving alike. */
html.gx-pointing .obs-cursor-ring { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-color: transparent !important; box-shadow: none !important; }
html[data-theme="light"].gx-on .obs-cursor-dot { background: #1d232a; box-shadow: 0 0 0 1.5px rgba(243, 239, 228, .95); }
html[data-theme="light"].gx-on .obs-cursor-ring {
  border-color: rgba(29, 35, 42, .9); box-shadow: 0 0 0 1px rgba(243, 239, 228, .85), inset 0 0 0 1px rgba(243, 239, 228, .85);
}
html[data-theme="light"].gx-on .obs-cursor-ring i { background: #1d232a; box-shadow: 0 0 0 1px rgba(243, 239, 228, .9); }

/* ---------- header toggle: orbit <-> list ---------- */
html.gx-editing .gx-toggle { display: none !important; }
.gx-toggle svg { width: 20px; height: 20px; overflow: visible; }
.gx-toggle .gx-i {
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round;
  transform-box: view-box; transform-origin: 12px 12px;
  transition: transform .6s cubic-bezier(.65, 0, .25, 1), opacity .35s ease;
}
.gx-toggle ellipse { vector-effect: non-scaling-stroke; }
.gx-toggle .gx-i-moon { fill: currentColor; stroke: none; transition: opacity .3s ease; }
.gx-toggle .gx-i-planet { fill: currentColor; stroke: none; }
/* list state (default) */
.gx-toggle .gx-i-orbit { transform: scaleY(.07) rotate(20deg); }
.gx-toggle .gx-i-moon { opacity: 0; }
.gx-toggle .gx-i-planet { transform: scale(0); opacity: 0; }
.gx-toggle .gx-i-top, .gx-toggle .gx-i-bottom { transform: none; opacity: 1; }
/* galaxy state */
.gx-toggle.is-galaxy .gx-i-orbit { transform: none; }
.gx-toggle.is-galaxy .gx-i-moon { opacity: 1; transition-delay: .25s; }
.gx-toggle.is-galaxy .gx-i-planet { transform: none; opacity: 1; }
.gx-toggle.is-galaxy .gx-i-top { transform: translateY(5.5px) scaleX(0); opacity: 0; }
.gx-toggle.is-galaxy .gx-i-bottom { transform: translateY(-5.5px) scaleX(0); opacity: 0; }
.gx-toggle.is-galaxy:hover .gx-i-orbit { transform: rotate(-16deg); }

@media (max-width: 760px) {
  .gx-label--planet .gx-tag { font-size: 12px; letter-spacing: .26em; padding-left: .26em; }
  .gx-label:not(.gx-label--planet) .gx-tag { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  #gxCanvas, .gx-veil, .gx-toggle .gx-i, .gx-tag, .gx-label--planet::before, .gx-label--planet::after { transition: none; }
  .gx-label { animation: none; }
}

/* ---------- opening a transmission from its mark: the view dims to the page's own ground, which the article opens on;
   coming back to the kept page, the ground lifts again ---------- */
.gx-depart {
  position: fixed; inset: 0; z-index: 3000;
  pointer-events: none;
  background: var(--bg);
  opacity: 0;
  transition: opacity .8s ease;
}
.gx-depart.is-on { opacity: 1; transition: opacity .5s cubic-bezier(.4, 0, .6, 1); }
html.gx-departing #gxCanvas { cursor: progress; }
@media (prefers-reduced-motion: reduce) { .gx-depart { transition: none; } }