:root {
  color-scheme: dark;
  --ink: #020307;
  --panel: rgba(6, 10, 14, 0.68);
  --panel-strong: rgba(9, 15, 21, 0.84);
  --line: rgba(206, 224, 238, 0.16);
  --line-strong: rgba(239, 230, 192, 0.34);
  --text: #f5f0e7;
  --muted: #aebbc5;
  --dim: #71818d;
  --solar: #f4d27d;
  --signal: #93e7ff;
  --planet-accent: #93e7ff;
  --shadow: rgba(0, 0, 0, 0.48);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, #06090d 0%, #020307 58%, #010203 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 96px);
  font-family: "Aptos", "Microsoft YaHei", "Segoe UI", sans-serif;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.viewer-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
  isolation: isolate;
}

@supports (height: 100dvh) {
  html,
  body,
  .viewer-shell {
    height: 100dvh;
    min-height: 100dvh;
  }
}

.viewer-shell::before,
.viewer-shell::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  content: "";
}

.viewer-shell::before {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 5rem 5rem;
  mask-image: linear-gradient(180deg, transparent, black 22%, black 68%, transparent);
}

.viewer-shell::after {
  box-shadow:
    inset 0 0 10rem rgba(0, 0, 0, 0.7),
    inset 0 -6rem 7rem rgba(0, 0, 0, 0.5);
}

#solar-viewer {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

#solar-viewer:active {
  cursor: grabbing;
}

.gesture-video {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.masthead,
.inspector,
.control-panel,
.planet-nav {
  position: absolute;
  z-index: 2;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1.4rem 5rem var(--shadow);
  backdrop-filter: blur(18px) saturate(135%);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.ui-toggle {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  left: 50%;
  z-index: 3;
  min-height: 2.65rem;
  padding: 0 0.9rem;
  color: var(--solar);
  border: 1px solid rgba(239, 230, 192, 0.28);
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.68);
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
  transform: translateX(-50%);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  backdrop-filter: blur(18px) saturate(135%);
  transition: border-color 180ms ease, background 180ms ease;
}

.ui-toggle:hover {
  border-color: var(--line-strong);
  background: rgba(244, 226, 185, 0.12);
}

body.ui-hidden .masthead,
body.ui-hidden .inspector,
body.ui-hidden .control-panel {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.ui-hidden .masthead,
body.ui-hidden .control-panel {
  transform: translateX(-0.5rem);
}

body.ui-hidden .inspector {
  transform: translateX(0.5rem);
}

body.overview-mode .inspector {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0.5rem);
}

.masthead {
  top: clamp(1rem, 2vw, 1.5rem);
  left: clamp(1rem, 2vw, 1.5rem);
  width: min(21.5rem, calc(100vw - 2rem));
  padding: 0.82rem 0.92rem 0.9rem;
  border-radius: 8px;
}

.eyebrow {
  margin: 0 0 0.28rem;
  color: var(--signal);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
  font-size: clamp(1.62rem, 2.5vw, 2.55rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0;
}

.masthead .byline {
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.48;
}

.inspector {
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  width: min(22rem, 30vw);
  padding: 0.86rem;
  border-radius: 8px;
  border-color: color-mix(in srgb, var(--planet-accent), var(--line) 64%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--planet-accent), transparent 88%), rgba(4, 8, 12, 0.34) 58%),
    var(--panel-strong);
  box-shadow:
    0 1.2rem 4rem var(--shadow),
    0 0 2.4rem color-mix(in srgb, var(--planet-accent), transparent 88%);
}

.inspector::before {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--planet-accent), transparent);
  opacity: 0.72;
}

.inspector-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.54rem;
  color: var(--dim);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#planet-index {
  display: inline-flex;
  min-width: 2.05rem;
  height: 1.45rem;
  align-items: center;
  justify-content: center;
  color: #061016;
  border-radius: 999px;
  background: var(--planet-accent);
  box-shadow: 0 0 1.2rem color-mix(in srgb, var(--planet-accent), transparent 54%);
}

#texture-state {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--planet-accent), #ffffff 32%);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h2 {
  font-family: Georgia, "Times New Roman", "Microsoft YaHei", serif;
  font-size: clamp(1.58rem, 2.65vw, 2.2rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
}

.latin {
  margin-top: 0.16rem;
  color: color-mix(in srgb, var(--planet-accent), #ffffff 28%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.summary {
  position: relative;
  margin-top: 0.78rem;
  padding: 0.72rem 0.78rem 0.76rem;
  color: color-mix(in srgb, var(--planet-accent), #f7fbff 78%);
  border: 1px solid color-mix(in srgb, var(--planet-accent), transparent 68%);
  border-left-width: 3px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--planet-accent), transparent 82%), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 0.82rem;
  line-height: 1.56;
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.58rem 0.7rem;
  margin: 0.86rem 0 0;
}

.facts div {
  min-width: 0;
  padding: 0.28rem 0 0.24rem 0.58rem;
  border-left: 1px solid color-mix(in srgb, var(--planet-accent), transparent 54%);
}

dt {
  color: var(--dim);
  font-size: 0.66rem;
  font-weight: 700;
}

dd {
  margin: 0.2rem 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-panel {
  left: clamp(1rem, 2vw, 1.5rem);
  bottom: calc(6.35rem + env(safe-area-inset-bottom, 0px));
  display: grid;
  width: min(15.6rem, calc(100vw - 2rem));
  gap: 0.2rem;
  padding: 0.56rem;
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.78);
}

.toggle {
  position: relative;
  display: flex;
  min-height: 2.32rem;
  align-items: center;
  cursor: pointer;
  color: #dbe4ea;
  font-size: 0.78rem;
  font-weight: 700;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.toggle span {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.toggle span::after {
  width: 2.56rem;
  height: 1.38rem;
  flex: 0 0 auto;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 180ms ease, border-color 180ms ease;
}

.toggle span::before {
  position: absolute;
  right: 1.36rem;
  width: 0.98rem;
  height: 0.98rem;
  content: "";
  border-radius: 999px;
  background: #f8fbff;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.42);
  transition: transform 180ms ease;
}

.toggle input:checked + span::after {
  border-color: rgba(147, 231, 255, 0.72);
  background: linear-gradient(135deg, #b7f0ff, #f3d17c);
}

.toggle input:checked + span::before {
  transform: translateX(1.14rem);
}

.time-chip {
  display: flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  margin-top: 0.2rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--dim);
  font-size: 0.68rem;
  font-weight: 800;
}

.time-chip strong {
  color: color-mix(in srgb, var(--planet-accent), var(--solar) 42%);
  font-size: 0.68rem;
  white-space: nowrap;
}

.planet-nav {
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: calc(clamp(1rem, 2vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  left: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-height: 4.25rem;
  padding: 0.62rem;
  border-radius: 8px;
  background: rgba(5, 9, 13, 0.76);
}

.overview-button,
.planet-button {
  min-height: 2.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.overview-button {
  flex: 0 0 auto;
  padding: 0 0.88rem;
  color: var(--solar);
  font-size: 0.82rem;
  font-weight: 800;
}

.fullscreen-button {
  color: var(--signal);
}

.planet-list {
  display: grid;
  grid-auto-columns: minmax(5.35rem, 1fr);
  grid-auto-flow: column;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.planet-button {
  position: relative;
  display: flex;
  min-width: 5.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  padding: 0 0.62rem;
  color: #eef6fb;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.planet-button::before {
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  background: var(--planet-color);
  box-shadow: 0 0 1rem color-mix(in srgb, var(--planet-color), transparent 45%);
}

.planet-button span {
  color: var(--dim);
  font-size: 0.64rem;
  font-weight: 900;
}

.overview-button:hover,
.planet-button:hover,
.overview-button.is-active,
.planet-button.is-active {
  border-color: var(--line-strong);
  background: rgba(244, 226, 185, 0.12);
  transform: translateY(-1px);
}

.planet-button.is-active {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--planet-color), #ffffff 24%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color), transparent 76%), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.045);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 1.4rem color-mix(in srgb, var(--planet-color), transparent 84%);
}

.moon-nav-option {
  position: absolute;
  top: var(--moon-option-top, -3rem);
  left: var(--moon-option-left, 50%);
  z-index: 3;
  display: inline-flex;
  min-width: 5.1rem;
  min-height: 2.45rem;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  padding: 0 0.72rem;
  color: #eef6fb;
  border: 1px solid color-mix(in srgb, var(--planet-color), #ffffff 18%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color), transparent 72%), rgba(255, 255, 255, 0.035)),
    rgba(5, 9, 13, 0.88);
  box-shadow:
    0 0.85rem 2.4rem rgba(0, 0, 0, 0.38),
    0 0 1.1rem color-mix(in srgb, var(--planet-color), transparent 82%);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 850;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.36rem);
  transition: opacity 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.moon-nav-option::before {
  width: 0.58rem;
  height: 0.58rem;
  flex: 0 0 auto;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: var(--planet-color);
  box-shadow: 0 0 0.9rem color-mix(in srgb, var(--planet-color), transparent 46%);
}

.moon-nav-option span {
  color: var(--dim);
  font-size: 0.64rem;
  font-weight: 900;
}

.moon-nav-option.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option,
.moon-nav-option:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.moon-nav-option:hover,
.moon-nav-option.is-active {
  border-color: var(--line-strong);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color), transparent 64%), rgba(255, 255, 255, 0.055)),
    rgba(5, 9, 13, 0.94);
}

@media (max-width: 980px) {
  .masthead {
    width: min(21rem, calc(100vw - 2rem));
  }

  .inspector {
    top: auto;
    right: 1rem;
    bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
    width: min(25rem, calc(100vw - 2rem));
  }

  .control-panel {
    top: 1rem;
    right: 1rem;
    bottom: auto;
    left: auto;
    width: min(15rem, calc(100vw - 2rem));
  }
}

@media (max-width: 680px) {
  .ui-toggle {
    top: 1.38rem;
    right: 1rem;
    bottom: auto;
    left: auto;
    min-height: 2.35rem;
    padding: 0 0.82rem;
    transform: none;
    font-size: 0.78rem;
  }

  .masthead {
    width: auto;
    right: 1rem;
    padding: 0.86rem 6.3rem 0.92rem 0.92rem;
  }

  h1 {
    font-size: 1.72rem;
  }

  .masthead .byline {
    font-size: 0.84rem;
  }

  .control-panel {
    top: 8.95rem;
    right: 1rem;
    left: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
  }

  .toggle {
    min-height: 2.1rem;
    font-size: 0.78rem;
  }

  .toggle span {
    justify-content: center;
  }

  .toggle span::before,
  .toggle span::after {
    display: none;
  }

  .toggle input:checked + span {
    color: var(--solar);
  }

  .inspector {
    right: 1rem;
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
    left: 1rem;
    width: auto;
    padding: 0.88rem;
  }

  h2 {
    font-size: 1.62rem;
  }

  .summary {
    display: -webkit-box;
    overflow: hidden;
    padding: 0.62rem 0.68rem;
    font-size: 0.76rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .facts div {
    padding: 0.42rem 0 0.08rem 0.54rem;
  }

  dt {
    font-size: 0.66rem;
  }

  dd {
    font-size: 0.73rem;
  }

  .time-chip {
    grid-column: 1 / -1;
    margin-top: 0;
    padding-top: 0.38rem;
  }

  .gesture-toggle,
  .gesture-state {
    grid-column: 1 / -1;
  }

  .planet-nav {
    position: fixed;
    right: 0.65rem;
    bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    left: 0.65rem;
    min-height: 0;
    align-items: center;
    gap: 0.42rem;
    padding: 0.42rem;
    border-color: rgba(206, 224, 238, 0.2);
    background: rgba(5, 9, 13, 0.82);
  }

  .overview-button {
    min-width: 3.7rem;
    min-height: 2.5rem;
    padding: 0 0.52rem;
    font-size: 0.74rem;
  }

  .planet-list {
    grid-auto-columns: 4.35rem;
    gap: 0.4rem;
    padding-bottom: 0.06rem;
    scroll-snap-type: x proximity;
  }

  .planet-button {
    min-width: 4.35rem;
    min-height: 2.5rem;
    gap: 0.28rem;
    padding: 0 0.36rem;
    font-size: 0.74rem;
    scroll-snap-align: start;
  }

  .planet-button::before {
    width: 0.52rem;
    height: 0.52rem;
  }

  .planet-button span {
    font-size: 0.58rem;
  }

  .moon-nav-option {
    min-width: 4.5rem;
    min-height: 2.32rem;
    padding: 0 0.52rem;
    font-size: 0.74rem;
  }
}

@media (max-width: 380px) {
  .overview-button {
    min-width: 3.35rem;
  }

  .planet-list {
    grid-auto-columns: 4.05rem;
  }

  .planet-button {
    min-width: 4.05rem;
    font-size: 0.7rem;
  }
}

/* Cosmic panel refactor: layered observatory UI over the live Three.js scene. */
:root {
  --ink: #02040a;
  --panel: rgba(8, 13, 24, 0.72);
  --panel-strong: rgba(10, 17, 31, 0.9);
  --panel-solid: rgba(12, 18, 32, 0.94);
  --line: rgba(167, 210, 255, 0.16);
  --line-strong: rgba(151, 219, 255, 0.36);
  --text: #f7fbff;
  --muted: #b7c6d8;
  --dim: #718299;
  --solar: #ffd37a;
  --signal: #79e7ff;
  --deep-signal: #6f8cff;
  --planet-accent: #79e7ff;
  --shadow: rgba(0, 0, 0, 0.52);
  --panel-radius: 8px;
  --panel-blur: blur(22px) saturate(142%);
  --focus-ring: 0 0 0 3px rgba(121, 231, 255, 0.22);
}

html,
body {
  background:
    radial-gradient(circle at 50% 36%, rgba(54, 76, 125, 0.2), transparent 34rem),
    linear-gradient(180deg, #070a13 0%, #030611 56%, #010208 100%);
  font-family: Inter, "Aptos", "Microsoft YaHei", "Segoe UI", sans-serif;
}

button {
  touch-action: manipulation;
}

button:focus-visible,
.toggle input:focus-visible + span {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.viewer-shell::before {
  opacity: 0.48;
  background-image:
    linear-gradient(rgba(121, 231, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(121, 231, 255, 0.045) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 1px, transparent 1.4px);
  background-position: center, center, 0 0;
  background-size: 6rem 6rem, 6rem 6rem, 5.5rem 5.5rem;
  mask-image: linear-gradient(180deg, transparent, black 14%, black 78%, transparent);
}

.viewer-shell::after {
  box-shadow:
    inset 0 0 9rem rgba(0, 0, 0, 0.64),
    inset 0 -8rem 8rem rgba(0, 0, 0, 0.58),
    inset 0 5rem 8rem rgba(4, 9, 22, 0.48);
}

.masthead,
.inspector,
.control-panel,
.planet-nav,
.ui-toggle,
.moon-nav-option {
  border-radius: var(--panel-radius);
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    linear-gradient(135deg, rgba(121, 231, 255, 0.055), rgba(111, 140, 255, 0.035) 44%, rgba(255, 211, 122, 0.035)),
    var(--panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1.25rem 3.6rem rgba(0, 0, 0, 0.42);
  backdrop-filter: var(--panel-blur);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.ui-toggle {
  top: clamp(1rem, 1.8vw, 1.35rem);
  min-width: 6.9rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  color: var(--text);
  border-color: rgba(121, 231, 255, 0.24);
  background:
    linear-gradient(135deg, rgba(121, 231, 255, 0.16), rgba(255, 211, 122, 0.08)),
    rgba(5, 10, 20, 0.72);
  font-size: 0.8rem;
  letter-spacing: 0;
}

.ui-toggle:hover {
  border-color: rgba(255, 211, 122, 0.48);
  background:
    linear-gradient(135deg, rgba(121, 231, 255, 0.22), rgba(255, 211, 122, 0.14)),
    rgba(9, 16, 30, 0.84);
}

.masthead {
  width: min(22.5rem, calc(100vw - 2rem));
  padding: 1rem 1.05rem;
  border-left: 3px solid rgba(121, 231, 255, 0.62);
}

.masthead::after,
.inspector::after,
.control-panel::after,
.planet-nav::after {
  position: absolute;
  inset: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.045);
  border-radius: calc(var(--panel-radius) - 2px);
  pointer-events: none;
  content: "";
}

.eyebrow {
  margin-bottom: 0.38rem;
  color: var(--signal);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

h1 {
  color: var(--text);
  font-family: "Aptos Display", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: clamp(1.72rem, 2.55vw, 2.65rem);
  font-weight: 760;
  text-shadow: 0 0 1.9rem rgba(121, 231, 255, 0.18);
}

.masthead .byline {
  margin-top: 0.58rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.inspector {
  width: min(23.75rem, 31vw);
  padding: 1rem;
  border-color: color-mix(in srgb, var(--planet-accent), var(--line) 58%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-accent), transparent 84%), rgba(6, 11, 22, 0.74) 62%),
    var(--panel-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    0 1.25rem 4rem rgba(0, 0, 0, 0.48),
    0 0 2.2rem color-mix(in srgb, var(--planet-accent), transparent 90%);
}

.inspector::before {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--planet-accent), #ffffff 16%), transparent);
  opacity: 0.9;
}

.inspector-topline {
  gap: 1rem;
  margin-bottom: 0.7rem;
  color: var(--dim);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

#planet-index {
  min-width: 2.35rem;
  height: 1.55rem;
  color: #04111b;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background:
    linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--planet-accent), #ffd37a 26%));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    0 0 1.25rem color-mix(in srgb, var(--planet-accent), transparent 48%);
}

#texture-state {
  color: color-mix(in srgb, var(--planet-accent), #ffffff 34%);
}

h2 {
  color: var(--text);
  font-family: "Aptos Display", "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: clamp(1.78rem, 2.8vw, 2.36rem);
  font-weight: 760;
}

.latin {
  margin-top: 0.2rem;
  color: color-mix(in srgb, var(--planet-accent), #ffffff 36%);
  letter-spacing: 0.12em;
}

.summary {
  margin-top: 0.86rem;
  padding: 0.1rem 0 0.1rem 0.78rem;
  color: #ddeaff;
  border: 0;
  border-left: 2px solid color-mix(in srgb, var(--planet-accent), #ffffff 8%);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0.86rem;
  line-height: 1.62;
}

.facts {
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.facts div {
  min-height: 4rem;
  padding: 0.68rem 0.72rem;
  border-top: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-left: 0;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--planet-accent), transparent 94%), rgba(255, 255, 255, 0.018));
}

dt {
  color: #8fa4bd;
  font-size: 0.66rem;
  letter-spacing: 0;
}

dd {
  margin-top: 0.32rem;
  color: #f9fcff;
  font-size: 0.84rem;
  letter-spacing: 0;
}

.control-panel {
  width: min(17.4rem, calc(100vw - 2rem));
  gap: 0.35rem;
  padding: 0.7rem;
  border-color: rgba(121, 231, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.022)),
    rgba(6, 11, 22, 0.86);
}

.toggle {
  min-height: 2.55rem;
  padding: 0 0.18rem;
  color: #e8f3ff;
  font-size: 0.8rem;
}

.toggle span {
  padding: 0 0.08rem;
}

.toggle span::after {
  width: 2.72rem;
  height: 1.45rem;
  border-color: rgba(143, 164, 189, 0.36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03)),
    rgba(0, 0, 0, 0.18);
}

.toggle span::before {
  right: 1.5rem;
  width: 1rem;
  height: 1rem;
  background: #d9e9f8;
}

.toggle input:checked + span {
  color: #ffffff;
}

.toggle input:checked + span::after {
  border-color: rgba(121, 231, 255, 0.72);
  background: linear-gradient(135deg, rgba(121, 231, 255, 0.96), rgba(111, 140, 255, 0.76));
}

.toggle input:checked + span::before {
  transform: translateX(1.24rem);
}

.time-chip {
  min-height: 2.42rem;
  margin-top: 0.28rem;
  padding: 0.58rem 0.18rem 0.08rem;
  border-top-color: rgba(121, 231, 255, 0.16);
  color: #8fa4bd;
}

.time-chip strong {
  color: #ffd37a;
}

.gesture-toggle {
  min-height: 2.36rem;
  color: #e8f3ff;
  border: 1px solid rgba(121, 231, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.024)),
    rgba(255, 255, 255, 0.038);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}

.gesture-toggle:hover,
.gesture-toggle.is-active {
  color: #ffffff;
  border-color: rgba(121, 231, 255, 0.54);
  background:
    linear-gradient(135deg, rgba(121, 231, 255, 0.18), rgba(255, 211, 122, 0.08)),
    rgba(255, 255, 255, 0.055);
}

.gesture-toggle:disabled {
  cursor: progress;
  opacity: 0.62;
}

.gesture-state {
  margin: 0;
  padding: 0.1rem 0.18rem 0.18rem;
  color: #8fa4bd;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
}

.planet-nav {
  min-height: 4.55rem;
  gap: 0.7rem;
  padding: 0.68rem;
  border-color: rgba(121, 231, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.025)),
    rgba(6, 11, 22, 0.78);
}

.overview-button,
.planet-button,
.moon-nav-option {
  min-height: 2.75rem;
  border-color: rgba(167, 210, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.038);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.overview-button {
  padding: 0 1rem;
  color: #f8fbff;
  font-size: 0.82rem;
}

.fullscreen-button {
  color: #bfefff;
}

.planet-list {
  grid-auto-columns: minmax(5.8rem, 1fr);
  gap: 0.6rem;
}

.planet-list::-webkit-scrollbar {
  height: 0.42rem;
}

.planet-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(121, 231, 255, 0.24);
}

.planet-button {
  min-width: 5.8rem;
  color: #edf7ff;
  font-size: 0.82rem;
}

.planet-button::before,
.moon-nav-option::before {
  border-color: rgba(255, 255, 255, 0.58);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--planet-color), transparent 84%),
    0 0 1rem color-mix(in srgb, var(--planet-color), transparent 35%);
}

.overview-button:hover,
.planet-button:hover,
.overview-button.is-active,
.planet-button.is-active {
  border-color: color-mix(in srgb, var(--planet-color, var(--signal)), #ffffff 14%);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.032)),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color, var(--signal)), transparent 78%), rgba(255, 211, 122, 0.07)),
    rgba(255, 255, 255, 0.052);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 1.3rem color-mix(in srgb, var(--planet-color, var(--signal)), transparent 84%);
}

.planet-button.is-active {
  border-color: color-mix(in srgb, var(--planet-color), #ffffff 24%);
}

.moon-nav-option {
  min-width: 5.35rem;
  color: #f0f8ff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.028)),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color), transparent 72%), rgba(255, 211, 122, 0.08)),
    rgba(6, 11, 22, 0.92);
}

.moon-nav-option:hover,
.moon-nav-option.is-active {
  border-color: rgba(255, 255, 255, 0.36);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 980px) {
  .inspector {
    width: min(25.5rem, calc(100vw - 2rem));
  }

  .control-panel {
    width: min(16.8rem, calc(100vw - 2rem));
  }
}

@media (max-width: 680px) {
  .ui-toggle {
    top: 0.8rem;
    right: 0.8rem;
    min-width: 5.9rem;
    min-height: 2.45rem;
    padding: 0 0.78rem;
  }

  .masthead {
    top: 0.8rem;
    right: 0.8rem;
    left: 0.8rem;
    padding: 0.84rem 6.15rem 0.84rem 0.92rem;
  }

  .control-panel {
    top: 9.15rem;
    right: 0.8rem;
    left: 0.8rem;
    width: auto;
    gap: 0.35rem;
    padding: 0.52rem;
  }

  .toggle {
    min-height: 2.28rem;
    padding: 0;
  }

  .toggle span {
    min-height: 2.28rem;
    padding: 0 0.34rem;
    border: 1px solid rgba(121, 231, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
  }

  .toggle input:checked + span {
    border-color: rgba(121, 231, 255, 0.38);
    background: rgba(121, 231, 255, 0.12);
  }

  .inspector {
    right: 0.8rem;
    bottom: calc(5.95rem + env(safe-area-inset-bottom, 0px));
    left: 0.8rem;
    padding: 0.9rem;
  }

  .summary {
    padding-left: 0.66rem;
  }

  .facts div {
    min-height: 3.58rem;
    padding: 0.56rem 0.58rem;
  }

  .planet-nav {
    right: 0.55rem;
    bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    left: 0.55rem;
    min-height: 3.8rem;
    gap: 0.42rem;
    padding: 0.45rem;
  }

  .overview-button {
    min-width: 3.8rem;
    min-height: 2.62rem;
  }

  .planet-list {
    grid-auto-columns: 4.8rem;
    gap: 0.42rem;
  }

  .planet-button {
    min-width: 4.8rem;
    min-height: 2.62rem;
  }
}

@media (max-width: 380px) {
  .masthead {
    padding-right: 5.7rem;
  }

  .planet-list {
    grid-auto-columns: 4.38rem;
  }

  .planet-button {
    min-width: 4.38rem;
  }
}

/* Rollback fit guard: keep the simpler UI contained on narrow screens. */
@media (max-width: 680px) {
  .control-panel {
    right: 0.8rem;
    left: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: calc(100vw - 1.6rem);
    overflow: hidden;
  }

  .toggle {
    min-width: 0;
  }

  .toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .time-chip {
    min-width: 0;
  }

  .gesture-toggle,
  .gesture-state {
    grid-column: 1 / -1;
  }

  .time-chip strong {
    min-width: 0;
    white-space: normal;
    text-align: right;
  }
}

/* Gesture fit guard: keep the extra camera controls clear of the inspector. */
@media (max-width: 980px) {
  .control-panel {
    top: 1rem;
    right: 1rem;
    bottom: auto;
    left: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(22rem, calc(50vw - 1.5rem));
    gap: 0.34rem;
  }

  .toggle {
    min-height: 2.08rem;
    padding: 0;
    font-size: 0.72rem;
  }

  .toggle span {
    min-height: 2.08rem;
    justify-content: center;
    padding: 0 0.28rem;
    overflow: hidden;
    border: 1px solid rgba(121, 231, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .toggle span::before,
  .toggle span::after {
    display: none;
  }

  .toggle input:checked + span {
    color: var(--solar);
    border-color: rgba(121, 231, 255, 0.38);
    background: rgba(121, 231, 255, 0.12);
  }

  .gesture-state,
  .time-chip {
    grid-column: 1 / -1;
  }

  .gesture-toggle {
    min-height: 2.12rem;
  }

  .gesture-state {
    padding: 0;
    font-size: 0.62rem;
  }

  .time-chip {
    min-height: 1.9rem;
    margin-top: 0;
    padding-top: 0.35rem;
  }
}

/* Mobile fit pass: keep the rollback UI readable without top-panel overlap. */
@media (max-width: 680px) {
  .ui-toggle {
    top: 0.68rem;
    right: 0.68rem;
    left: auto;
    min-width: 5.35rem;
    min-height: 2.16rem;
    padding: 0 0.62rem;
    transform: none;
    font-size: 0.72rem;
  }

  .masthead {
    top: 0.68rem;
    right: 6.38rem;
    left: 0.68rem;
    width: auto;
    max-width: none;
    min-height: 4.1rem;
    max-height: 4.6rem;
    overflow: hidden;
    padding: 0.56rem 0.72rem 0.58rem;
  }

  .masthead::after,
  .control-panel::after,
  .planet-nav::after {
    inset: 0.34rem;
  }

  .eyebrow {
    margin-bottom: 0.2rem;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
  }

  h1 {
    font-size: clamp(1.48rem, 7.2vw, 1.9rem);
    line-height: 0.98;
  }

  .masthead .byline {
    margin-top: 0.2rem;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 0.58rem;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .control-panel {
    top: 5.35rem;
    right: 0.68rem;
    bottom: auto;
    left: 0.68rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    max-width: none;
    gap: 0.3rem;
    padding: 0.42rem;
  }

  .toggle,
  .gesture-toggle {
    min-height: 2.08rem;
    font-size: 0.68rem;
  }

  .toggle span {
    min-height: 2.08rem;
    justify-content: center;
    padding: 0 0.16rem;
  }

  .gesture-toggle {
    grid-column: auto;
    padding: 0 0.16rem;
  }

  .gesture-state {
    display: none;
  }

  .time-chip {
    grid-column: 1 / -1;
    display: flex;
    min-height: 1.55rem;
    margin-top: 0;
    padding: 0.22rem 0.18rem 0;
    font-size: 0.6rem;
  }

  .time-chip strong {
    min-width: 0;
    font-size: 0.62rem;
    white-space: nowrap;
  }

  body.ui-hidden .masthead,
  body.ui-hidden .control-panel {
    transform: translateY(-0.35rem);
  }

  .inspector {
    top: auto;
    right: 0.68rem;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px));
    left: 0.68rem;
    width: auto;
    max-height: min(38dvh, 16.5rem);
    overflow: auto;
    padding: 0.72rem;
  }

  h2 {
    font-size: clamp(1.36rem, 7vw, 1.78rem);
  }

  .summary {
    margin-top: 0.58rem;
    font-size: 0.76rem;
    line-height: 1.48;
  }

  .facts {
    margin-top: 0.7rem;
  }

  .facts div {
    min-height: 3.18rem;
    padding: 0.46rem 0.5rem;
  }

  dt {
    font-size: 0.6rem;
  }

  dd {
    font-size: 0.74rem;
  }

  .planet-nav {
    right: 0.55rem;
    bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
    left: 0.55rem;
    min-height: 3.65rem;
    align-items: center;
    gap: 0.34rem;
    padding: 0.38rem;
  }

  .overview-button {
    flex: 0 0 3.55rem;
    min-width: 3.55rem;
    min-height: 2.45rem;
    padding: 0 0.35rem;
    font-size: 0.76rem;
  }

  .fullscreen-button {
    flex-basis: 3.35rem;
  }

  .planet-list {
    flex: 1 1 auto;
    grid-auto-columns: 4.45rem;
    gap: 0.34rem;
    width: auto;
    min-width: 0;
    padding-bottom: 0.1rem;
  }

  .planet-button,
  .moon-nav-option {
    min-height: 2.45rem;
    font-size: 0.72rem;
  }

  .planet-button {
    min-width: 4.45rem;
    gap: 0.25rem;
    padding: 0 0.42rem;
  }

  .planet-button span,
  .moon-nav-option span {
    font-size: 0.58rem;
  }

  .planet-button::before,
  .moon-nav-option::before {
    width: 0.52rem;
    height: 0.52rem;
  }
}

@media (max-width: 380px) {
  .ui-toggle {
    min-width: 5.05rem;
    padding: 0 0.52rem;
  }

  .masthead {
    right: 5.95rem;
  }

  .control-panel {
    top: 5.35rem;
    gap: 0.26rem;
  }

  .time-chip {
    display: none;
  }

  .overview-button {
    flex-basis: 3.25rem;
    min-width: 3.25rem;
    font-size: 0.72rem;
  }

  .planet-list {
    grid-auto-columns: 4.1rem;
  }

  .planet-button {
    min-width: 4.1rem;
    padding: 0 0.34rem;
  }
}

/* Liquid glass pass: inspired by rdev/liquid-glass-react, adapted for the static Three.js atlas. */
:root {
  --glass-panel: rgba(12, 19, 31, 0.38);
  --glass-panel-strong: rgba(13, 21, 35, 0.5);
  --glass-button: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(222, 247, 255, 0.28);
  --glass-border-hot: color-mix(in srgb, var(--planet-accent), #ffffff 28%);
  --glass-highlight: rgba(255, 255, 255, 0.64);
  --glass-shadow: rgba(0, 0, 0, 0.44);
  --glass-radius-lg: 22px;
  --glass-radius-md: 16px;
  --glass-radius-sm: 13px;
  --glass-blur: blur(26px) saturate(178%) contrast(1.08);
}

.liquid-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.viewer-shell::before {
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(154, 226, 255, 0.052) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 226, 166, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, transparent 0 44%, rgba(255, 255, 255, 0.035) 48% 52%, transparent 56% 100%);
  background-size: 5.5rem 5.5rem, 5.5rem 5.5rem, 15rem 15rem;
}

.masthead,
.inspector,
.control-panel,
.planet-nav {
  --glass-x: 52%;
  --glass-y: 18%;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius-lg);
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.18), transparent 9rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035) 34%, rgba(255, 255, 255, 0.014) 64%),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-accent), transparent 86%), rgba(255, 211, 122, 0.04)),
    var(--glass-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.045),
    0 1.35rem 4.2rem var(--glass-shadow),
    0 0 2.4rem color-mix(in srgb, var(--planet-accent), transparent 88%);
  backdrop-filter: var(--glass-blur);
}

.planet-nav {
  overflow: visible;
}

.masthead::after,
.inspector::after,
.control-panel::after,
.planet-nav::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0.16) 1.45rem, rgba(147, 231, 255, 0.1) 3.8rem, transparent 7rem),
    radial-gradient(ellipse at calc(var(--glass-x) + 10%) calc(var(--glass-y) + 8%), rgba(147, 231, 255, 0.2), transparent 6.5rem),
    linear-gradient(118deg, rgba(255, 255, 255, 0.2), transparent 18%, transparent 72%, rgba(255, 255, 255, 0.1));
  opacity: 0;
  mix-blend-mode: screen;
  filter: url("#liquid-glass-distort");
  transition: opacity 180ms ease;
}

.masthead.liquid-interactive:hover::after,
.inspector.liquid-interactive:hover::after,
.control-panel.liquid-interactive:hover::after,
.planet-nav.liquid-interactive:hover::after,
.masthead.liquid-interactive:focus-within::after,
.inspector.liquid-interactive:focus-within::after,
.control-panel.liquid-interactive:focus-within::after,
.planet-nav.liquid-interactive:focus-within::after {
  opacity: 0.72;
}

.masthead > *,
.inspector > *,
.control-panel > *,
.planet-nav > * {
  position: relative;
  z-index: 1;
}

.masthead,
.inspector,
.control-panel {
  background-color: var(--glass-panel-strong);
}

.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.toggle span,
.time-chip {
  --glass-x: 50%;
  --glass-y: 20%;
  position: relative;
  overflow: hidden;
  border-color: rgba(222, 247, 255, 0.24);
  border-radius: var(--glass-radius-md);
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.22), transparent 4.6rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.035)),
    color-mix(in srgb, var(--planet-color, var(--planet-accent)), transparent 91%),
    var(--glass-button);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.27),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 0.55rem 1.45rem rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px) saturate(170%);
}

.ui-toggle,
.moon-nav-option {
  position: absolute;
}

.ui-toggle::after,
.overview-button::after,
.planet-button::after,
.moon-nav-option::after,
.gesture-toggle::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0.18) 1.05rem, rgba(147, 231, 255, 0.1) 3.2rem, transparent 5.4rem),
    linear-gradient(120deg, rgba(255, 255, 255, 0.2), transparent 28%, transparent 74%, rgba(147, 231, 255, 0.12));
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(5px) saturate(132%);
  transform: scale(1.08);
  transition: opacity 180ms ease;
}

.ui-toggle:hover::after,
.overview-button:hover::after,
.planet-button:hover::after,
.moon-nav-option:hover::after,
.gesture-toggle:hover::after,
.ui-toggle:focus-visible::after,
.overview-button:focus-visible::after,
.planet-button:focus-visible::after,
.moon-nav-option:focus-visible::after,
.gesture-toggle:focus-visible::after {
  opacity: 0.62;
}

.ui-toggle > *,
.overview-button > *,
.planet-button > *,
.moon-nav-option > *,
.gesture-toggle > * {
  position: relative;
  z-index: 1;
}

.ui-toggle {
  color: #f6fbff;
  border-radius: 18px;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.32), transparent 4.8rem),
    linear-gradient(135deg, rgba(147, 231, 255, 0.28), rgba(255, 211, 122, 0.13)),
    rgba(10, 24, 36, 0.5);
}

.masthead {
  border-left: 1px solid var(--glass-border);
}

.eyebrow {
  color: #8feeff;
  text-shadow: 0 0 1rem rgba(143, 238, 255, 0.32);
}

h1,
h2 {
  text-shadow:
    0 0 1.5rem color-mix(in srgb, var(--planet-accent), transparent 72%),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

.inspector {
  border-color: color-mix(in srgb, var(--planet-accent), var(--glass-border) 50%);
}

.inspector::before {
  position: absolute;
  inset: 0;
  height: auto;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--planet-accent), #ffffff 36%), transparent) top / 100% 1px no-repeat,
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--planet-accent), transparent 76%), transparent 42%);
  opacity: 0.8;
}

#planet-index {
  border-color: rgba(255, 255, 255, 0.48);
  background:
    radial-gradient(circle at 35% 25%, #ffffff, color-mix(in srgb, var(--planet-accent), #ffffff 16%) 46%, color-mix(in srgb, var(--planet-accent), #ffd37a 34%));
}

.facts div {
  border-color: rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--planet-accent), transparent 86%), transparent 80%),
    rgba(255, 255, 255, 0.025);
}

.toggle span::before,
.toggle span::after {
  z-index: 1;
}

.planet-button::before,
.moon-nav-option::before {
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--planet-color), transparent 82%),
    0 0 1.2rem color-mix(in srgb, var(--planet-color), transparent 28%),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.overview-button:hover,
.planet-button:hover,
.moon-nav-option:hover,
.gesture-toggle:hover,
.ui-toggle:hover,
.overview-button.is-active,
.planet-button.is-active,
.moon-nav-option.is-active,
.gesture-toggle.is-active {
  border-color: var(--glass-border-hot);
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.34), transparent 5rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06)),
    color-mix(in srgb, var(--planet-color, var(--planet-accent)), transparent 82%),
    rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.26),
    0 0 1.5rem color-mix(in srgb, var(--planet-color, var(--planet-accent)), transparent 78%);
}

.liquid-interactive {
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    opacity 180ms ease,
    transform 180ms ease;
}

.overview-button.liquid-interactive:hover,
.planet-button.liquid-interactive:hover,
.gesture-toggle.liquid-interactive:hover {
  transform: translateY(-1px) scale(1.012);
}

.overview-button.is-pressing,
.planet-button.is-pressing,
.gesture-toggle.is-pressing {
  transform: translateY(0) scale(0.985);
}

.moon-nav-option.is-visible,
.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option,
.moon-nav-option:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.moon-nav-option.liquid-interactive:hover {
  transform: translateX(-50%) translateY(-1px) scale(1.012);
}

.moon-nav-option.is-pressing {
  transform: translateX(-50%) scale(0.985);
}

.time-chip {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.time-chip span,
.time-chip strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-chip strong {
  display: block;
  text-align: right;
}

.planet-nav {
  align-items: flex-start;
  min-height: 4.75rem;
  padding: 0.74rem 0.82rem 0.98rem;
}

.planet-nav .overview-button,
.planet-nav .planet-button {
  height: 2.9rem;
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
}

.planet-list {
  align-items: center;
  height: 3.35rem;
  padding-bottom: 0.45rem;
}

.planet-list::-webkit-scrollbar {
  height: 0.34rem;
}

.moon-nav-option {
  z-index: 4;
}

@supports not (backdrop-filter: blur(1px)) {
  .masthead,
  .inspector,
  .control-panel,
  .planet-nav,
  .ui-toggle,
  .overview-button,
  .planet-button,
  .moon-nav-option,
  .gesture-toggle,
  .toggle span,
  .time-chip {
    background-color: rgba(10, 18, 32, 0.86);
  }
}

@media (max-width: 680px) {
  :root {
    --glass-radius-lg: 16px;
    --glass-radius-md: 12px;
    --glass-blur: blur(18px) saturate(160%) contrast(1.04);
  }

  .masthead,
  .inspector,
  .control-panel,
  .planet-nav {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 0.95rem 2.2rem rgba(0, 0, 0, 0.34);
  }

  .ui-toggle {
    border-radius: 14px;
  }
}

/* Liquid navigation fit: keep the bottom controls on one visual rail. */
.planet-nav {
  --nav-button-height: 2.9rem;
  --nav-scrollbar-space: 0.42rem;
  align-items: flex-start;
  min-height: calc(var(--nav-button-height) + var(--nav-scrollbar-space) + 1.72rem);
  padding: 0.74rem 0.82rem 0.76rem;
}

.planet-nav .overview-button,
.planet-nav .planet-button,
.planet-nav .moon-nav-option {
  display: inline-flex;
  height: var(--nav-button-height);
  min-height: var(--nav-button-height);
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}

.planet-list {
  height: calc(var(--nav-button-height) + var(--nav-scrollbar-space));
  align-self: flex-start;
  align-items: stretch;
  grid-auto-rows: var(--nav-button-height);
  padding: 0 0 var(--nav-scrollbar-space);
  overflow-x: auto;
  overflow-y: hidden;
}

.planet-list .planet-button {
  align-self: stretch;
}

.planet-nav .overview-button:hover,
.planet-nav .planet-button:hover,
.planet-nav .overview-button.is-active,
.planet-nav .planet-button.is-active,
.planet-nav .overview-button.is-pressing,
.planet-nav .planet-button.is-pressing,
.planet-nav .overview-button.liquid-interactive:hover,
.planet-nav .planet-button.liquid-interactive:hover {
  transform: none;
}

.moon-nav-option {
  width: var(--moon-option-width, 5.35rem);
  min-width: 5.35rem;
  gap: 0.38rem;
  padding: 0 0.62rem;
  color: #eef6fb;
  border-radius: var(--glass-radius-md);
  font-size: 0.82rem;
  font-weight: 800;
}

.moon-nav-option.is-visible {
  border-color: rgba(222, 247, 255, 0.42);
  background-color: rgba(76, 96, 116, 0.62);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.36), transparent 4.8rem),
    linear-gradient(145deg, rgba(190, 217, 235, 0.32), rgba(62, 78, 96, 0.34) 58%, rgba(255, 255, 255, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0.8rem 1.8rem rgba(0, 0, 0, 0.26),
    0 0 1.5rem rgba(190, 217, 235, 0.24);
}

.moon-nav-option span {
  color: var(--dim);
  font-size: 0.64rem;
  font-weight: 900;
}

.moon-nav-option::before {
  width: 0.62rem;
  height: 0.62rem;
}

.planet-nav:has(.moon-nav-option:hover)::after,
.planet-nav:has(.moon-nav-option:focus-visible)::after {
  opacity: 0;
}

.planet-nav.is-moon-option-open::after {
  opacity: 0;
}

.moon-nav-option::after {
  background: none;
  opacity: 0 !important;
}

.moon-nav-option:not(.is-visible) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.36rem);
}

.moon-nav-option.liquid-interactive:hover,
.moon-nav-option.is-pressing {
  transform: translateX(-50%);
}

@media (max-width: 680px) {
  .planet-nav {
    --nav-button-height: 2.45rem;
    --nav-scrollbar-space: 0.32rem;
    min-height: calc(var(--nav-button-height) + var(--nav-scrollbar-space) + 0.76rem);
    padding: 0.38rem;
  }

  .moon-nav-option {
    width: var(--moon-option-width, 4.45rem);
    min-width: 4.45rem;
    gap: 0.25rem;
    padding: 0 0.42rem;
    font-size: 0.72rem;
  }

  .moon-nav-option span {
    font-size: 0.58rem;
  }

  .moon-nav-option::before {
    width: 0.52rem;
    height: 0.52rem;
  }
}

/* Liquid glass clarity pass: thinner base, visible refraction, edge highlights. */
:root {
  --glass-panel: rgba(245, 250, 255, 0.075);
  --glass-panel-strong: rgba(245, 250, 255, 0.105);
  --glass-button: rgba(255, 255, 255, 0.068);
  --glass-button-hot: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(238, 249, 255, 0.36);
  --glass-border-hot: color-mix(in srgb, var(--planet-accent), #ffffff 42%);
  --glass-shadow: rgba(0, 0, 0, 0.34);
  --glass-blur: blur(11px) saturate(190%) contrast(1.14) brightness(1.08);
  --glass-control-blur: blur(8px) saturate(185%) contrast(1.12) brightness(1.06);
  --glass-shift-x: 0px;
  --glass-shift-y: 0px;
}

.masthead,
.inspector,
.control-panel,
.planet-nav {
  border-color: var(--glass-border);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.038) 34%, rgba(255, 255, 255, 0.018) 68%),
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.14), transparent 6.8rem),
    var(--glass-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.56),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 1rem 3.4rem var(--glass-shadow),
    0 0 2rem color-mix(in srgb, var(--planet-accent), transparent 88%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.masthead,
.inspector,
.control-panel {
  background-color: transparent;
}

.planet-nav {
  overflow: visible;
  background-color: rgba(255, 255, 255, 0.045);
}

.masthead::before,
.inspector::before,
.control-panel::before,
.planet-nav::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent) top / 100% 1px no-repeat,
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.105), transparent 5.4rem),
    radial-gradient(ellipse at 50% 118%, rgba(255, 255, 255, 0.07), transparent 62%);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  filter: url("#liquid-glass-distort");
  opacity: 0.58;
  transform: translate3d(var(--glass-shift-x), var(--glass-shift-y), 0);
  will-change: filter, transform, opacity;
}

.planet-nav::before {
  inset: 0;
}

.masthead::after,
.inspector::after,
.control-panel::after,
.planet-nav::after {
  inset: 0;
  border: 0;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.34) 0, rgba(255, 255, 255, 0.13) 1.2rem, rgba(147, 231, 255, 0.055) 3.4rem, transparent 6.4rem),
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 18%, transparent 74%, rgba(255, 255, 255, 0.12));
  opacity: 0;
  filter: blur(1.6px) saturate(118%);
  transform: translate3d(var(--glass-shift-x), var(--glass-shift-y), 0);
  transition: opacity 150ms ease;
}

.masthead.liquid-interactive:hover::after,
.inspector.liquid-interactive:hover::after,
.control-panel.liquid-interactive:hover::after,
.planet-nav.liquid-interactive:hover::after,
.masthead.liquid-interactive:focus-within::after,
.inspector.liquid-interactive:focus-within::after,
.control-panel.liquid-interactive:focus-within::after,
.planet-nav.liquid-interactive:focus-within::after {
  opacity: 0.42;
}

.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.toggle span,
.time-chip {
  border-color: rgba(238, 249, 255, 0.26);
  background-color: var(--glass-button);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.16), transparent 4.4rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.045) 38%, rgba(255, 255, 255, 0.018)),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color, var(--planet-accent)), transparent 84%), rgba(255, 211, 122, 0.035));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0.6rem 1.55rem rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: var(--glass-control-blur);
  backdrop-filter: var(--glass-control-blur);
}

.ui-toggle::after,
.overview-button::after,
.planet-button::after,
.moon-nav-option::after,
.gesture-toggle::after {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.42) 0, rgba(255, 255, 255, 0.18) 1rem, rgba(147, 231, 255, 0.065) 3rem, transparent 5.4rem),
    linear-gradient(118deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 72%, rgba(255, 255, 255, 0.12));
  opacity: 0 !important;
  mix-blend-mode: screen;
  filter: url("#liquid-glass-distort") blur(1.4px) saturate(116%);
  transform: translate3d(var(--glass-shift-x), var(--glass-shift-y), 0) scale(1.04);
  transition: opacity 140ms ease;
}

.ui-toggle:hover::after,
.overview-button:hover::after,
.planet-button:hover::after,
.moon-nav-option:hover::after,
.gesture-toggle:hover::after,
.ui-toggle:focus-visible::after,
.overview-button:focus-visible::after,
.planet-button:focus-visible::after,
.moon-nav-option:focus-visible::after,
.gesture-toggle:focus-visible::after,
.ui-toggle.is-pressing::after,
.overview-button.is-pressing::after,
.planet-button.is-pressing::after,
.moon-nav-option.is-pressing::after,
.gesture-toggle.is-pressing::after {
  opacity: 0.52 !important;
}

.overview-button:hover,
.planet-button:hover,
.moon-nav-option:hover,
.gesture-toggle:hover,
.ui-toggle:hover,
.overview-button.is-active,
.planet-button.is-active,
.moon-nav-option.is-active,
.gesture-toggle.is-active {
  border-color: var(--glass-border-hot);
  background-color: var(--glass-button-hot);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.22), transparent 4.8rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.064)),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color, var(--planet-accent)), transparent 76%), rgba(255, 211, 122, 0.06));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.24),
    0 0 1.4rem color-mix(in srgb, var(--planet-color, var(--planet-accent)), transparent 80%);
}

.moon-nav-option.is-visible {
  border-color: rgba(238, 249, 255, 0.45);
  background-color: rgba(255, 255, 255, 0.078);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.24), transparent 4.8rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.052) 55%, rgba(255, 255, 255, 0.022)),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color), transparent 76%), rgba(255, 211, 122, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 0.8rem 1.9rem rgba(0, 0, 0, 0.24),
    0 0 1.5rem color-mix(in srgb, var(--planet-color), transparent 80%);
}

.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option,
.planet-nav.is-moon-option-open .moon-nav-option,
.moon-nav-option:hover,
.moon-nav-option.is-active,
.moon-nav-option:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.planet-button::before,
.moon-nav-option::before {
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--planet-color), transparent 78%),
    0 0 1.15rem color-mix(in srgb, var(--planet-color), transparent 30%),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.liquid-interactive {
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease,
    filter 150ms ease,
    transform 150ms ease,
    visibility 150ms ease;
}

.overview-button.liquid-interactive:hover,
.planet-button.liquid-interactive:hover,
.gesture-toggle.liquid-interactive:hover,
.ui-toggle.liquid-interactive:hover {
  transform: translate3d(0, -1px, 0) scale(1.012);
}

.moon-nav-option.liquid-interactive:hover,
.moon-nav-option.is-pressing {
  transform: translateX(-50%) translateY(-1px) scale(1.012);
}

.overview-button.is-pressing,
.planet-button.is-pressing,
.gesture-toggle.is-pressing,
.ui-toggle.is-pressing {
  transform: translate3d(0, 0, 0) scale(0.982);
}

.moon-nav-option.is-pressing {
  transform: translateX(-50%) scale(0.985);
}

.time-chip {
  border-top-color: rgba(238, 249, 255, 0.18);
  border-radius: var(--glass-radius-md);
  padding-right: 0.48rem;
  padding-left: 0.48rem;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead,
  .inspector,
  .control-panel,
  .planet-nav,
  .ui-toggle,
  .overview-button,
  .planet-button,
  .moon-nav-option,
  .gesture-toggle,
  .toggle span,
  .time-chip {
    background-color: rgba(10, 18, 32, 0.72);
  }
}

@media (max-width: 680px) {
  :root {
    --glass-blur: blur(8px) saturate(175%) contrast(1.08) brightness(1.04);
    --glass-control-blur: blur(6px) saturate(170%) contrast(1.06) brightness(1.04);
  }

  .masthead,
  .inspector,
  .control-panel,
  .planet-nav {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.48),
      inset 0 -1px 0 rgba(255, 255, 255, 0.08),
      0 0.82rem 2.1rem rgba(0, 0, 0, 0.3);
  }
}

/* Inspector-standard glass pass: every UI surface follows the blue planet-info panel. */
:root {
  --atlas-glass-bg: rgba(7, 31, 56, 0.46);
  --atlas-glass-bg-soft: rgba(11, 39, 66, 0.36);
  --atlas-glass-button: rgba(186, 216, 233, 0.19);
  --atlas-glass-button-hot: rgba(202, 231, 246, 0.27);
  --atlas-glass-line: rgba(93, 198, 255, 0.58);
  --atlas-glass-line-strong: rgba(0, 145, 255, 0.92);
  --atlas-glass-text: #dff5ff;
  --atlas-glass-dim: #8fd8ff;
  --atlas-glass-gold: #ffd877;
  --glass-panel: var(--atlas-glass-bg);
  --glass-button: var(--atlas-glass-button);
  --glass-button-hot: var(--atlas-glass-button-hot);
  --glass-border: var(--atlas-glass-line);
  --glass-border-hot: var(--atlas-glass-line-strong);
  --glass-blur: blur(12px) saturate(178%) contrast(1.12) brightness(1.04);
  --glass-control-blur: blur(10px) saturate(172%) contrast(1.1) brightness(1.03);
}

.masthead,
.inspector,
.control-panel,
.planet-nav {
  color: var(--atlas-glass-text);
  border-color: var(--atlas-glass-line);
  background-color: transparent;
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(142, 226, 255, 0.34), transparent 7.4rem),
    linear-gradient(145deg, rgba(225, 246, 255, 0.22), rgba(91, 179, 233, 0.08) 34%, rgba(4, 21, 39, 0.34) 68%),
    linear-gradient(180deg, rgba(9, 35, 62, 0.42), rgba(3, 15, 29, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(235, 252, 255, 0.58),
    inset 0 -1px 0 rgba(93, 198, 255, 0.16),
    inset 0 0 0 1px rgba(0, 145, 255, 0.2),
    0 1rem 3rem rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(0, 145, 255, 0.08),
    0 0 2.2rem rgba(0, 145, 255, 0.14);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.masthead::before,
.inspector::before,
.control-panel::before,
.planet-nav::before {
  background:
    linear-gradient(90deg, transparent, rgba(216, 247, 255, 0.72), transparent) top / 100% 1px no-repeat,
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.14), transparent 5.8rem),
    radial-gradient(ellipse at 50% 110%, rgba(0, 145, 255, 0.16), transparent 62%);
  opacity: 0.62;
}

.masthead::after,
.inspector::after,
.control-panel::after,
.planet-nav::after {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.36) 0, rgba(111, 218, 255, 0.18) 1.3rem, rgba(0, 145, 255, 0.08) 3.6rem, transparent 6.6rem),
    linear-gradient(115deg, rgba(255, 255, 255, 0.18), transparent 20%, transparent 74%, rgba(131, 224, 255, 0.14));
}

.masthead.liquid-interactive:hover::after,
.inspector.liquid-interactive:hover::after,
.control-panel.liquid-interactive:hover::after,
.planet-nav.liquid-interactive:hover::after,
.masthead.liquid-interactive:focus-within::after,
.inspector.liquid-interactive:focus-within::after,
.control-panel.liquid-interactive:focus-within::after,
.planet-nav.liquid-interactive:focus-within::after {
  opacity: 0.48;
}

.eyebrow,
.latin,
#texture-state,
dt,
.time-chip span,
.gesture-state {
  color: var(--atlas-glass-dim);
}

h1,
h2,
dd,
.time-chip strong {
  color: var(--atlas-glass-text);
}

.time-chip strong,
.overview-button.is-active,
.planet-button.is-active,
.toggle input:checked + span,
.gesture-toggle.is-active {
  color: var(--atlas-glass-gold);
}

.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.toggle span,
.time-chip {
  color: var(--atlas-glass-text);
  border-color: rgba(135, 217, 255, 0.5);
  background-color: var(--atlas-glass-button);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.17), transparent 4.4rem),
    linear-gradient(145deg, rgba(243, 252, 255, 0.25), rgba(91, 179, 233, 0.08) 42%, rgba(4, 21, 39, 0.25)),
    linear-gradient(180deg, rgba(8, 34, 61, 0.16), rgba(2, 12, 24, 0.28));
  box-shadow:
    inset 0 1px 0 rgba(244, 253, 255, 0.5),
    inset 0 -1px 0 rgba(93, 198, 255, 0.13),
    0 0.55rem 1.45rem rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: var(--glass-control-blur);
  backdrop-filter: var(--glass-control-blur);
}

.overview-button:hover,
.planet-button:hover,
.moon-nav-option:hover,
.gesture-toggle:hover,
.ui-toggle:hover,
.overview-button.is-active,
.planet-button.is-active,
.moon-nav-option.is-active,
.gesture-toggle.is-active {
  border-color: var(--atlas-glass-line-strong);
  background-color: var(--atlas-glass-button-hot);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.24), transparent 4.8rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.32), rgba(0, 145, 255, 0.12)),
    linear-gradient(135deg, color-mix(in srgb, var(--planet-color, var(--planet-accent)), transparent 82%), rgba(2, 15, 31, 0.24));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(93, 198, 255, 0.16),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.24),
    0 0 1.3rem rgba(0, 145, 255, 0.18);
}

#planet-index {
  color: #06223a;
  border-color: rgba(219, 247, 255, 0.78);
  background:
    radial-gradient(circle at 35% 25%, #ffffff, #c7edff 52%, #84cfff);
}

.facts div {
  border-color: rgba(99, 189, 235, 0.18);
  background:
    radial-gradient(circle at 20% 0%, rgba(105, 216, 255, 0.12), transparent 76%),
    rgba(6, 29, 53, 0.24);
}

.summary {
  border-left-color: rgba(142, 226, 255, 0.72);
}

.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option,
.planet-nav.is-moon-option-open .moon-nav-option,
.moon-nav-option:hover,
.moon-nav-option:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option.is-active,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option.is-active,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.moon-nav-option.is-visible {
  border-color: var(--atlas-glass-line-strong);
  background-color: rgba(186, 216, 233, 0.2);
}

@media (max-width: 680px) {
  :root {
    --glass-blur: blur(9px) saturate(165%) contrast(1.08) brightness(1.02);
    --glass-control-blur: blur(7px) saturate(160%) contrast(1.06) brightness(1.02);
  }
}

/* Transparent glass pass: remove the blue UI tint and keep all controls clear. */
:root {
  --atlas-clear-bg: rgba(255, 255, 255, 0.026);
  --atlas-clear-bg-deep: rgba(3, 5, 9, 0.08);
  --atlas-clear-button: rgba(255, 255, 255, 0.068);
  --atlas-clear-button-hot: rgba(255, 255, 255, 0.11);
  --atlas-clear-line: rgba(255, 255, 255, 0.34);
  --atlas-clear-line-strong: rgba(255, 255, 255, 0.66);
  --atlas-clear-text: rgba(250, 253, 255, 0.94);
  --atlas-clear-muted: rgba(233, 241, 247, 0.66);
  --glass-panel: var(--atlas-clear-bg);
  --glass-button: var(--atlas-clear-button);
  --glass-button-hot: var(--atlas-clear-button-hot);
  --glass-border: var(--atlas-clear-line);
  --glass-border-hot: var(--atlas-clear-line-strong);
  --glass-blur: blur(10px) saturate(132%) contrast(1.05) brightness(1.03);
  --glass-control-blur: blur(8px) saturate(128%) contrast(1.04) brightness(1.02);
}

.masthead,
.inspector,
.control-panel,
.planet-nav {
  color: var(--atlas-clear-text);
  border-color: var(--atlas-clear-line);
  background-color: transparent;
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.1), transparent 7.2rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.028) 38%, rgba(255, 255, 255, 0.01) 68%),
    linear-gradient(180deg, var(--atlas-clear-bg), var(--atlas-clear-bg-deep));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.055),
    0 1rem 3rem rgba(0, 0, 0, 0.32);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.masthead::before,
.inspector::before,
.control-panel::before,
.planet-nav::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.78), transparent) top / 100% 1px no-repeat,
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.08), transparent 5.6rem),
    radial-gradient(ellipse at 50% 112%, rgba(255, 255, 255, 0.042), transparent 62%);
  opacity: 0.46;
}

.masthead::after,
.inspector::after,
.control-panel::after,
.planet-nav::after {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.24) 0, rgba(255, 255, 255, 0.09) 1.25rem, rgba(255, 255, 255, 0.036) 3.6rem, transparent 6.5rem),
    linear-gradient(115deg, rgba(255, 255, 255, 0.12), transparent 20%, transparent 74%, rgba(255, 255, 255, 0.08));
}

.masthead.liquid-interactive:hover::after,
.inspector.liquid-interactive:hover::after,
.control-panel.liquid-interactive:hover::after,
.planet-nav.liquid-interactive:hover::after,
.masthead.liquid-interactive:focus-within::after,
.inspector.liquid-interactive:focus-within::after,
.control-panel.liquid-interactive:focus-within::after,
.planet-nav.liquid-interactive:focus-within::after {
  opacity: 0.34;
}

.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.toggle span,
.time-chip {
  color: var(--atlas-clear-text);
  border-color: rgba(255, 255, 255, 0.36);
  background-color: var(--atlas-clear-button);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.1), transparent 4.4rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.028) 42%, rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.52),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0.55rem 1.45rem rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: var(--glass-control-blur);
  backdrop-filter: var(--glass-control-blur);
}

.overview-button:hover,
.planet-button:hover,
.moon-nav-option:hover,
.gesture-toggle:hover,
.ui-toggle:hover,
.overview-button.is-active,
.planet-button.is-active,
.moon-nav-option.is-active,
.gesture-toggle.is-active {
  color: #fff;
  border-color: var(--atlas-clear-line-strong);
  background-color: var(--atlas-clear-button-hot);
  background-image:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.16), transparent 4.8rem),
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.045)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(0, 0, 0, 0.08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    0 0.75rem 1.8rem rgba(0, 0, 0, 0.22);
}

.eyebrow,
.latin,
#texture-state,
dt,
.time-chip span,
.gesture-state,
.planet-button span,
.moon-nav-option span {
  color: var(--atlas-clear-muted);
}

h1,
h2,
dd,
.time-chip strong,
.toggle input:checked + span,
.gesture-toggle.is-active {
  color: var(--atlas-clear-text);
}

#planet-index {
  color: rgba(9, 18, 27, 0.92);
  border-color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 35% 25%, #ffffff, rgba(255, 255, 255, 0.82) 52%, rgba(255, 255, 255, 0.46));
}

.facts div {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.052), transparent 76%),
    rgba(255, 255, 255, 0.012);
}

.summary {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.moon-nav-option.is-active:not(.is-visible):not(:hover):not(:focus-visible) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.36rem);
}

.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option,
.planet-nav.is-moon-option-open .moon-nav-option,
.moon-nav-option:hover,
.moon-nav-option:focus-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option.is-active,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option.is-active,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.moon-nav-option.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
  border-color: var(--atlas-clear-line-strong);
  background-color: rgba(255, 255, 255, 0.09);
}

@media (max-width: 680px) {
  :root {
    --glass-blur: blur(10px) saturate(135%) contrast(1.05) brightness(1.02);
    --glass-control-blur: blur(8px) saturate(132%) contrast(1.04) brightness(1.02);
  }
}

/* Stable interaction pass: hover should change light only, never move UI. */
.overview-button.liquid-interactive:hover,
.planet-button.liquid-interactive:hover,
.gesture-toggle.liquid-interactive:hover,
.overview-button.is-pressing,
.planet-button.is-pressing,
.gesture-toggle.is-pressing {
  transform: none;
}

.moon-nav-option.liquid-interactive:hover,
.moon-nav-option.is-pressing,
.moon-nav-option.is-visible,
.planet-nav:has([data-body-id="earth"]:hover) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus) .moon-nav-option,
.planet-nav:has([data-body-id="earth"]:focus-visible) .moon-nav-option,
.planet-nav.is-moon-option-open .moon-nav-option {
  transform: translateX(-50%);
}

@media (min-width: 681px) {
  .ui-toggle.liquid-interactive:hover,
  .ui-toggle.is-pressing {
    transform: translateX(-50%);
  }
}

@media (max-width: 680px) {
  .ui-toggle.liquid-interactive:hover,
  .ui-toggle.is-pressing {
    transform: none;
  }
}

/* Residual glare reset: pointer-driven light must disappear after leaving UI. */
.masthead.liquid-interactive:not(:hover)::after,
.inspector.liquid-interactive:not(:hover)::after,
.control-panel.liquid-interactive:not(:hover)::after,
.planet-nav.liquid-interactive:not(:hover)::after {
  opacity: 0 !important;
}

.ui-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.overview-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.planet-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.moon-nav-option.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.gesture-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after {
  opacity: 0 !important;
}

/* Cursor glare disabled: keep glass, remove pointer-following light spots. */
.masthead,
.inspector,
.control-panel,
.planet-nav {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.028) 38%, rgba(255, 255, 255, 0.01) 68%),
    linear-gradient(180deg, var(--atlas-clear-bg), var(--atlas-clear-bg-deep));
}

.masthead::before,
.inspector::before,
.control-panel::before,
.planet-nav::before {
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.62), transparent) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%);
  opacity: 0.42;
}

.masthead::after,
.inspector::after,
.control-panel::after,
.planet-nav::after,
.ui-toggle::after,
.overview-button::after,
.planet-button::after,
.moon-nav-option::after,
.gesture-toggle::after {
  background: none !important;
  opacity: 0 !important;
}

.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.toggle span,
.time-chip {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.028) 42%, rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(0, 0, 0, 0.08));
}

.overview-button:hover,
.planet-button:hover,
.moon-nav-option:hover,
.gesture-toggle:hover,
.ui-toggle:hover,
.overview-button.is-active,
.planet-button.is-active,
.moon-nav-option.is-active,
.gesture-toggle.is-active {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.045)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(0, 0, 0, 0.08));
}

/* Static refraction pass: liquid glass without cursor glare. */
:root {
  --liquid-refraction-filter: url("#liquid-glass-refraction");
  --liquid-refraction-panel: blur(0.7px) saturate(172%) contrast(1.18) brightness(1.08);
  --liquid-refraction-control: blur(0.45px) saturate(168%) contrast(1.15) brightness(1.06);
}

.masthead,
.inspector,
.control-panel,
.planet-nav,
.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.time-chip {
  isolation: isolate;
}

.masthead,
.inspector,
.control-panel,
.planet-nav {
  background-color: rgba(255, 255, 255, 0.026);
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.032) 40%, rgba(255, 255, 255, 0.012) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.026), rgba(3, 5, 9, 0.08));
  -webkit-backdrop-filter: blur(12px) saturate(154%) contrast(1.1) brightness(1.05);
  backdrop-filter: blur(12px) saturate(154%) contrast(1.1) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 1px 0 0 rgba(255, 255, 255, 0.18),
    inset -1px 0 0 rgba(180, 221, 255, 0.09),
    0 1rem 3rem rgba(0, 0, 0, 0.32);
}

.masthead::before,
.inspector::before,
.control-panel::before,
.planet-nav::before {
  inset: -3px;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 24%, transparent 68%, rgba(170, 220, 255, 0.08)),
    linear-gradient(90deg, rgba(255, 92, 92, 0.075), transparent 18%, transparent 82%, rgba(88, 166, 255, 0.09));
  opacity: 0.54;
  -webkit-backdrop-filter: var(--liquid-refraction-panel);
  backdrop-filter: var(--liquid-refraction-panel);
  filter: var(--liquid-refraction-filter) saturate(118%);
  transform: none !important;
  will-change: auto;
}

.masthead::after,
.inspector::after,
.control-panel::after,
.planet-nav::after {
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(96deg, rgba(255, 88, 88, 0.11), transparent 16%, transparent 84%, rgba(88, 164, 255, 0.13)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34%, rgba(255, 255, 255, 0.04) 74%, rgba(255, 255, 255, 0.12));
  opacity: 0.58 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.24),
    inset 0 0.9rem 1.5rem rgba(255, 255, 255, 0.05),
    inset 0 -1.1rem 1.4rem rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: var(--liquid-refraction-panel);
  backdrop-filter: var(--liquid-refraction-panel);
  filter: var(--liquid-refraction-filter) saturate(116%);
  mix-blend-mode: screen;
  transform: none !important;
  will-change: auto;
}

.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.toggle span,
.time-chip {
  background-color: rgba(255, 255, 255, 0.054);
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.034) 44%, rgba(255, 255, 255, 0.012)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(0, 0, 0, 0.08));
  -webkit-backdrop-filter: blur(9px) saturate(152%) contrast(1.08) brightness(1.04);
  backdrop-filter: blur(9px) saturate(152%) contrast(1.08) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    inset 0 -1px 0 rgba(255, 255, 255, 0.09),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(160, 214, 255, 0.08),
    0 0.55rem 1.45rem rgba(0, 0, 0, 0.18);
}

.ui-toggle::after,
.overview-button::after,
.planet-button::after,
.moon-nav-option::after,
.gesture-toggle::after {
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background:
    linear-gradient(96deg, rgba(255, 88, 88, 0.105), transparent 18%, transparent 82%, rgba(88, 164, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%, rgba(255, 255, 255, 0.07));
  opacity: 0.46 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    inset 0 0.62rem 0.9rem rgba(255, 255, 255, 0.045),
    inset 0 -0.7rem 0.95rem rgba(0, 0, 0, 0.13);
  -webkit-backdrop-filter: var(--liquid-refraction-control);
  backdrop-filter: var(--liquid-refraction-control);
  filter: var(--liquid-refraction-filter) saturate(114%);
  mix-blend-mode: screen;
  transform: none !important;
}

.overview-button:hover,
.planet-button:hover,
.moon-nav-option:hover,
.gesture-toggle:hover,
.ui-toggle:hover,
.overview-button.is-active,
.planet-button.is-active,
.moon-nav-option.is-active,
.gesture-toggle.is-active {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.034), rgba(0, 0, 0, 0.08));
}

.overview-button:hover::after,
.planet-button:hover::after,
.moon-nav-option:hover::after,
.gesture-toggle:hover::after,
.ui-toggle:hover::after,
.overview-button.is-active::after,
.planet-button.is-active::after,
.moon-nav-option.is-active::after,
.gesture-toggle.is-active::after {
  opacity: 0.6 !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead::before,
  .inspector::before,
  .control-panel::before,
  .planet-nav::before,
  .masthead::after,
  .inspector::after,
  .control-panel::after,
  .planet-nav::after,
  .ui-toggle::after,
  .overview-button::after,
  .planet-button::after,
  .moon-nav-option::after,
  .gesture-toggle::after {
    filter: none;
  }
}

/* Override the previous anti-glare rules without reintroducing cursor tracking. */
.masthead.liquid-interactive::after,
.inspector.liquid-interactive::after,
.control-panel.liquid-interactive::after,
.planet-nav.liquid-interactive::after,
.masthead.liquid-interactive:not(:hover)::after,
.inspector.liquid-interactive:not(:hover)::after,
.control-panel.liquid-interactive:not(:hover)::after,
.planet-nav.liquid-interactive:not(:hover)::after {
  background:
    linear-gradient(96deg, rgba(255, 88, 88, 0.11), transparent 16%, transparent 84%, rgba(88, 164, 255, 0.13)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 34%, rgba(255, 255, 255, 0.04) 74%, rgba(255, 255, 255, 0.12)) !important;
  opacity: 0.58 !important;
}

.ui-toggle.liquid-interactive::after,
.overview-button.liquid-interactive::after,
.planet-button.liquid-interactive::after,
.moon-nav-option.liquid-interactive::after,
.gesture-toggle.liquid-interactive::after,
.ui-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.overview-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.planet-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.moon-nav-option.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.gesture-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after {
  background:
    linear-gradient(96deg, rgba(255, 88, 88, 0.105), transparent 18%, transparent 82%, rgba(88, 164, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 42%, rgba(255, 255, 255, 0.07)) !important;
  opacity: 0.46 !important;
}

/* Neutral tuning: keep refraction, remove the colored glass cast. */
:root {
  --liquid-refraction-panel: blur(0.65px) saturate(138%) contrast(1.14) brightness(1.05);
  --liquid-refraction-control: blur(0.42px) saturate(134%) contrast(1.12) brightness(1.04);
}

.masthead,
.inspector,
.control-panel,
.planet-nav {
  background-color: rgba(255, 255, 255, 0.018);
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.026) 42%, rgba(255, 255, 255, 0.008) 74%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.016), rgba(3, 5, 9, 0.072));
}

.masthead::before,
.inspector::before,
.control-panel::before,
.planet-nav::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.105), transparent 26%, transparent 68%, rgba(255, 255, 255, 0.048)),
    linear-gradient(90deg, rgba(255, 120, 120, 0.028), transparent 20%, transparent 80%, rgba(120, 176, 255, 0.034));
  opacity: 0.44;
  mix-blend-mode: normal;
}

.masthead.liquid-interactive::after,
.inspector.liquid-interactive::after,
.control-panel.liquid-interactive::after,
.planet-nav.liquid-interactive::after,
.masthead.liquid-interactive:not(:hover)::after,
.inspector.liquid-interactive:not(:hover)::after,
.control-panel.liquid-interactive:not(:hover)::after,
.planet-nav.liquid-interactive:not(:hover)::after {
  background:
    linear-gradient(96deg, rgba(255, 120, 120, 0.035), transparent 17%, transparent 83%, rgba(120, 176, 255, 0.045)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), transparent 36%, rgba(255, 255, 255, 0.028) 74%, rgba(255, 255, 255, 0.095)) !important;
  opacity: 0.4 !important;
  mix-blend-mode: normal;
}

.ui-toggle,
.overview-button,
.planet-button,
.moon-nav-option,
.gesture-toggle,
.toggle span,
.time-chip {
  background-color: rgba(255, 255, 255, 0.042);
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.128), rgba(255, 255, 255, 0.028) 44%, rgba(255, 255, 255, 0.008)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(0, 0, 0, 0.072));
}

.ui-toggle.liquid-interactive::after,
.overview-button.liquid-interactive::after,
.planet-button.liquid-interactive::after,
.moon-nav-option.liquid-interactive::after,
.gesture-toggle.liquid-interactive::after,
.ui-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.overview-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.planet-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.moon-nav-option.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.gesture-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after {
  background:
    linear-gradient(96deg, rgba(255, 120, 120, 0.03), transparent 20%, transparent 80%, rgba(120, 176, 255, 0.038)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.135), transparent 44%, rgba(255, 255, 255, 0.05)) !important;
  opacity: 0.34 !important;
  mix-blend-mode: normal;
}

.overview-button:hover::after,
.planet-button:hover::after,
.moon-nav-option:hover::after,
.gesture-toggle:hover::after,
.ui-toggle:hover::after,
.overview-button.is-active::after,
.planet-button.is-active::after,
.moon-nav-option.is-active::after,
.gesture-toggle.is-active::after {
  opacity: 0.42 !important;
}

/* Colorless refraction: no blue/purple cast, only clear warped glass. */
.masthead::before,
.inspector::before,
.control-panel::before,
.planet-nav::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent 26%, transparent 68%, rgba(255, 255, 255, 0.045)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.034), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.038));
  opacity: 0.4;
}

.masthead.liquid-interactive::after,
.inspector.liquid-interactive::after,
.control-panel.liquid-interactive::after,
.planet-nav.liquid-interactive::after,
.masthead.liquid-interactive:not(:hover)::after,
.inspector.liquid-interactive:not(:hover)::after,
.control-panel.liquid-interactive:not(:hover)::after,
.planet-nav.liquid-interactive:not(:hover)::after {
  background:
    linear-gradient(96deg, rgba(255, 255, 255, 0.048), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.052)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 38%, rgba(255, 255, 255, 0.024) 74%, rgba(255, 255, 255, 0.084)) !important;
  opacity: 0.36 !important;
}

.ui-toggle.liquid-interactive::after,
.overview-button.liquid-interactive::after,
.planet-button.liquid-interactive::after,
.moon-nav-option.liquid-interactive::after,
.gesture-toggle.liquid-interactive::after,
.ui-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.overview-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.planet-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.moon-nav-option.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.gesture-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after {
  background:
    linear-gradient(96deg, rgba(255, 255, 255, 0.045), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.05)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 46%, rgba(255, 255, 255, 0.045)) !important;
  opacity: 0.3 !important;
}


/* Liquid glass cleanup: source-style warp layer only, no glare or duplicated content. */
.masthead.liquid-interactive,
.inspector.liquid-interactive,
.control-panel.liquid-interactive,
.planet-nav.liquid-interactive,
.ui-toggle.liquid-interactive,
.overview-button.liquid-interactive,
.planet-button.liquid-interactive,
.moon-nav-option.liquid-interactive,
.gesture-toggle.liquid-interactive {
  isolation: isolate;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.masthead.liquid-interactive,
.inspector.liquid-interactive,
.control-panel.liquid-interactive {
  overflow: hidden;
}

.overview-button.liquid-interactive,
.planet-button.liquid-interactive,
.gesture-toggle.liquid-interactive {
  position: relative;
}

.ui-toggle.liquid-interactive,
.overview-button.liquid-interactive,
.planet-button.liquid-interactive,
.moon-nav-option.liquid-interactive,
.gesture-toggle.liquid-interactive {
  overflow: hidden;
}

.masthead.liquid-interactive::before,
.inspector.liquid-interactive::before,
.control-panel.liquid-interactive::before,
.planet-nav.liquid-interactive::before,
.masthead.liquid-interactive::after,
.inspector.liquid-interactive::after,
.control-panel.liquid-interactive::after,
.planet-nav.liquid-interactive::after,
.ui-toggle.liquid-interactive::after,
.overview-button.liquid-interactive::after,
.planet-button.liquid-interactive::after,
.moon-nav-option.liquid-interactive::after,
.gesture-toggle.liquid-interactive::after {
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* Moon flyout guard: the nav rail must expose the popped-out moon control. */
.planet-nav.liquid-interactive {
  z-index: 4;
  overflow: visible !important;
}

.planet-nav.liquid-interactive > .liquid-glass-warp {
  overflow: hidden;
}

.moon-nav-option.liquid-interactive {
  z-index: 7;
  overflow: visible !important;
}

.moon-nav-option.liquid-interactive > .liquid-glass-warp {
  overflow: hidden;
}

.moon-nav-option.liquid-interactive .liquid-glass-content {
  gap: 0.38rem;
  color: #eef6fb !important;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

.moon-nav-option.liquid-interactive .liquid-glass-content > span {
  color: var(--atlas-clear-muted);
  font-size: 0.64rem;
  font-weight: 900;
}

.moon-nav-option.liquid-interactive.is-visible,
.planet-nav.liquid-interactive:has([data-body-id="earth"]:hover) .moon-nav-option,
.planet-nav.liquid-interactive:has([data-body-id="earth"]:focus) .moon-nav-option,
.planet-nav.liquid-interactive:has([data-body-id="earth"]:focus-visible) .moon-nav-option,
.planet-nav.liquid-interactive.is-moon-option-open .moon-nav-option,
.moon-nav-option.liquid-interactive:hover,
.moon-nav-option.liquid-interactive:focus-visible {
  visibility: visible;
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateX(-50%) !important;
}

@media (max-width: 680px) {
  .moon-nav-option.liquid-interactive .liquid-glass-content {
    gap: 0.25rem;
    font-size: 0.72rem;
  }

  .moon-nav-option.liquid-interactive .liquid-glass-content > span {
    font-size: 0.58rem;
  }
}

.liquid-glass-warp {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  transform: none !important;
  transform-origin: center;
  backface-visibility: hidden;
  contain: paint;
  will-change: auto;
}

.liquid-glass-warp.is-panel {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.11), transparent 58%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0.026) 42%, rgba(255, 255, 255, 0.006) 76%),
    rgba(255, 255, 255, 0.012);
  -webkit-backdrop-filter: blur(16px) saturate(152%) contrast(1.1) brightness(1.05);
  backdrop-filter: blur(16px) saturate(152%) contrast(1.1) brightness(1.05);
  filter: url("#liquid-glass-panel-source");
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

.liquid-glass-warp.is-control {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.12), transparent 62%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 44%, rgba(255, 255, 255, 0.006)),
    rgba(255, 255, 255, 0.022);
  -webkit-backdrop-filter: blur(10px) saturate(146%) contrast(1.08) brightness(1.04);
  backdrop-filter: blur(10px) saturate(146%) contrast(1.08) brightness(1.04);
  filter: url("#liquid-glass-control-source");
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.masthead.liquid-interactive,
.inspector.liquid-interactive,
.control-panel.liquid-interactive,
.planet-nav.liquid-interactive {
  border-top-color: rgba(255, 255, 255, 0.34);
  background-color: rgba(255, 255, 255, 0.012) !important;
  background-image: none !important;
  box-shadow:
    0 1rem 3rem rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.14),
    inset 1px 0 0 rgba(255, 255, 255, 0.12),
    inset -1px 0 0 rgba(255, 255, 255, 0.12);
}

.ui-toggle.liquid-interactive,
.overview-button.liquid-interactive,
.planet-button.liquid-interactive,
.moon-nav-option.liquid-interactive,
.gesture-toggle.liquid-interactive {
  background-color: rgba(255, 255, 255, 0.018) !important;
  background-image: none !important;
  box-shadow:
    0 0.55rem 1.45rem rgba(0, 0, 0, 0.17),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.toggle span,
.time-chip {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.liquid-interactive > :not(.liquid-glass-warp),
.liquid-glass-content,
.planet-button.liquid-interactive::before,
.moon-nav-option.liquid-interactive::before {
  position: relative;
  z-index: 1;
}

.ui-toggle.liquid-interactive:hover::after,
.overview-button.liquid-interactive:hover::after,
.planet-button.liquid-interactive:hover::after,
.moon-nav-option.liquid-interactive:hover::after,
.gesture-toggle.liquid-interactive:hover::after,
.ui-toggle.liquid-interactive:focus-visible::after,
.overview-button.liquid-interactive:focus-visible::after,
.planet-button.liquid-interactive:focus-visible::after,
.moon-nav-option.liquid-interactive:focus-visible::after,
.gesture-toggle.liquid-interactive:focus-visible::after,
.ui-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.overview-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.planet-button.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.moon-nav-option.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after,
.gesture-toggle.liquid-interactive:not(:hover):not(:focus-visible):not(.is-pressing)::after {
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* Final moon flyout z-order: keep it above the nav content layer. */
.planet-nav.liquid-interactive > .moon-nav-option.liquid-interactive {
  position: absolute;
  z-index: 7 !important;
  overflow: visible !important;
}

.planet-nav.liquid-interactive > .moon-nav-option.liquid-interactive.is-visible,
.planet-nav.liquid-interactive.is-moon-option-open > .moon-nav-option.liquid-interactive,
.planet-nav.liquid-interactive:has([data-body-id="earth"]:hover) > .moon-nav-option.liquid-interactive,
.planet-nav.liquid-interactive:has([data-body-id="earth"]:focus) > .moon-nav-option.liquid-interactive,
.planet-nav.liquid-interactive:has([data-body-id="earth"]:focus-visible) > .moon-nav-option.liquid-interactive,
.planet-nav.liquid-interactive > .moon-nav-option.liquid-interactive:hover,
.planet-nav.liquid-interactive > .moon-nav-option.liquid-interactive:focus-visible {
  visibility: visible;
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateX(-50%) !important;
}

/* Compact height guard: keep panels separated from the bottom planet rail. */
@media (max-height: 560px) {
  .planet-nav {
    --nav-button-height: 2.45rem;
    --nav-scrollbar-space: 0.32rem;
    min-height: calc(var(--nav-button-height) + var(--nav-scrollbar-space) + 0.76rem) !important;
    gap: 0.42rem !important;
    padding: 0.38rem !important;
  }

  .planet-nav .overview-button,
  .planet-nav .planet-button,
  .planet-nav .moon-nav-option {
    height: var(--nav-button-height) !important;
    min-height: var(--nav-button-height) !important;
  }

  .planet-list {
    height: calc(var(--nav-button-height) + var(--nav-scrollbar-space)) !important;
    grid-auto-rows: var(--nav-button-height) !important;
    padding-bottom: var(--nav-scrollbar-space) !important;
  }

  .summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .facts {
    gap: 0.38rem 0.48rem;
    margin-top: 0.48rem;
  }

  .facts div {
    padding: 0.24rem 0 0.08rem 0.48rem;
  }
}

@media (min-width: 681px) and (max-height: 560px) {
  .masthead {
    top: 0.75rem !important;
    left: 0.75rem !important;
    width: min(21rem, calc(50vw - 1.5rem)) !important;
    max-height: 7.2rem !important;
    padding: 0.72rem 0.82rem !important;
  }

  .control-panel {
    top: 0.75rem !important;
    right: 0.75rem !important;
    bottom: auto !important;
    left: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: min(22rem, calc(50vw - 1.5rem)) !important;
    max-height: 7.7rem !important;
    gap: 0.3rem !important;
    padding: 0.52rem !important;
  }

  .inspector {
    top: 8.65rem !important;
    right: auto !important;
    bottom: calc(5.55rem + env(safe-area-inset-bottom, 0px)) !important;
    left: 0.75rem !important;
    width: min(25rem, calc(50vw - 1.5rem)) !important;
    max-height: none !important;
    padding: 0.72rem !important;
  }

  .summary {
    margin-top: 0.46rem;
    padding: 0.42rem 0.52rem;
    font-size: 0.72rem;
    line-height: 1.35;
    -webkit-line-clamp: 1;
  }

  .time-chip {
    min-height: 1.8rem;
    margin-top: 0;
    padding-top: 0.3rem;
  }

  .gesture-state {
    display: none;
  }
}

@media (max-width: 680px) and (max-height: 560px) {
  .masthead {
    max-height: 3.55rem !important;
    min-height: 0 !important;
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .masthead .byline,
  .masthead .orbit-mini {
    display: none !important;
  }

  .eyebrow {
    margin-bottom: 0.1rem !important;
    font-size: 0.56rem !important;
  }

  h1 {
    font-size: 1.22rem !important;
    line-height: 1.08 !important;
  }

  .control-panel {
    top: 4.45rem !important;
    max-height: 5.3rem !important;
    overflow: hidden !important;
  }

  .inspector {
    top: 11.15rem !important;
    bottom: calc(5.65rem + env(safe-area-inset-bottom, 0px)) !important;
    max-height: none !important;
    padding: 0.64rem !important;
  }

  .inspector-topline {
    margin-bottom: 0.38rem;
  }

  .summary {
    margin-top: 0.44rem;
    padding: 0.42rem 0.52rem;
    font-size: 0.7rem;
    line-height: 1.34;
    -webkit-line-clamp: 1;
  }

  .facts {
    margin-top: 0.42rem;
  }
}

/* Scene backdrop cleanup: remove the diagonal fallback texture visible before WebGL finishes painting. */
.viewer-shell::before {
  opacity: 0.12 !important;
  background-image:
    linear-gradient(rgba(154, 226, 255, 0.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 226, 255, 0.022) 1px, transparent 1px) !important;
  background-size: 7.5rem 7.5rem !important;
}

/* 2D overview: companion flyout and ordered solar system map. */
.overview-2d-option {
  position: absolute !important;
  top: var(--overview-2d-option-top, -3rem);
  left: var(--overview-2d-option-left, 3.2rem);
  z-index: 7;
  width: var(--overview-2d-option-width, 5.8rem);
  min-width: var(--overview-2d-option-width, 5.8rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(0.36rem) !important;
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease, border-color 160ms ease;
}

.overview-2d-option.is-visible,
.planet-nav.is-overview-2d-option-open > .overview-2d-option,
.planet-nav:has(#overview-button:hover) > .overview-2d-option,
.planet-nav:has(#overview-button:focus-visible) > .overview-2d-option,
.planet-nav:has(#overview-2d-button:hover) > .overview-2d-option,
.planet-nav:has(#overview-2d-button:focus-visible) > .overview-2d-option {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) !important;
}

.overview-2d-panel {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  align-items: center;
  justify-items: center;
  padding: clamp(1rem, 2.4vw, 2rem);
  padding-bottom: calc(6.8rem + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.22);
  pointer-events: auto;
}

.overview-2d-panel[hidden] {
  display: none !important;
}

.overview-2d-card {
  position: relative;
  z-index: 0;
  width: min(72rem, calc(100vw - 2rem));
  max-height: min(32rem, calc(100vh - 9rem));
  overflow: hidden;
  color: var(--text);
  border: 1px solid rgba(222, 247, 255, 0.28);
  border-radius: var(--glass-radius-lg, 22px);
  background-color: rgba(255, 255, 255, 0.014);
  box-shadow:
    0 1.2rem 4rem rgba(0, 0, 0, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.overview-2d-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.78rem, 1.4vw, 1.05rem) clamp(0.9rem, 1.8vw, 1.25rem) 0.65rem;
}

.overview-2d-header > div {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 0.28rem 0.58rem 0.34rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.012);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(135%);
}

.overview-2d-header h2 {
  position: relative;
  z-index: 2;
  color: #f7fbff;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  text-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.7);
}

.overview-2d-header .eyebrow {
  position: relative;
  z-index: 2;
  color: rgba(225, 244, 255, 0.86);
  text-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.72);
}

.overview-2d-close {
  min-height: 2.35rem;
  padding: 0 0.9rem;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--glass-radius-sm, 13px);
  background-color: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 800;
}

.overview-2d-canvas-wrap {
  position: relative;
  z-index: 1;
  margin: 0 clamp(0.9rem, 1.8vw, 1.25rem) clamp(0.9rem, 1.8vw, 1.25rem);
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: calc(var(--glass-radius-md, 16px) - 2px);
  background: rgba(0, 0, 0, 0.18);
  scrollbar-width: thin;
}

#overview-2d-canvas {
  display: block;
  width: max(100%, 56rem);
  height: clamp(16rem, 35vh, 22rem);
}

@media (max-width: 680px) {
  .overview-2d-panel {
    align-items: end;
    padding: 0.72rem;
    padding-bottom: calc(5.9rem + env(safe-area-inset-bottom, 0px));
  }

  .overview-2d-card {
    width: 100%;
    max-height: min(30rem, calc(100vh - 7.4rem));
  }

  .overview-2d-header {
    padding: 0.72rem 0.78rem 0.5rem;
  }

  .overview-2d-close {
    min-height: 2.1rem;
    padding: 0 0.72rem;
    font-size: 0.7rem;
  }

  .overview-2d-canvas-wrap {
    margin: 0 0.72rem 0.72rem;
  }

  #overview-2d-canvas {
    width: 54rem;
    height: 15.5rem;
  }
}

/* Prevent the static HTML controls from painting before the scene and glass layers are ready. */
html.app-booting .ui-toggle,
html.app-booting .masthead,
html.app-booting .inspector,
html.app-booting .control-panel,
html.app-booting .planet-nav,
html.app-booting .overview-2d-panel {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}