/* Oorbit portal (portal/portal.js). While <html> has .oorbit-portal the
 * portal's own canvas (Earth, stars, destinations) covers the homepage, which
 * keeps running underneath; OChat and Oorbi stay above it. The homepage's
 * panels stay out of the way until Oorbit World is chosen. */

/* Hidden from the first paint, so your planet never flashes up before Earth. */
html.oorbit-portal .orbital-canvas {
  visibility: hidden;
}

html.oorbit-portal #profile-onboarding,
html.oorbit-portal .planet-ui,
html.oorbit-portal #eye-view-nav,
html.oorbit-portal .moon-editor,
html.oorbit-portal #universe-label-layer,
html.oorbit-portal #universe-label,
/* Effect panels park just off screen and peek out on narrow screens. */
html.oorbit-portal #ocean-fx-panel,
html.oorbit-portal #planet-fx-panel,
html.oorbit-portal #cloud-fx-panel,
html.oorbit-portal #clock-fx-panel,
html.oorbit-portal #light-fx-panel,
html.oorbit-portal #gfx-panel,
html.oorbit-portal #fx-chain-panel,
html.oorbit-portal #pitch-detect-panel,
html.oorbit-portal #beat-intel-panel {
  display: none !important;
}

.oorbit-portal-layer {
  position: fixed;
  inset: 0;
  /* Above the homepage UI (eye-view nav is 12000), below OChat and Oorbi (18000). */
  z-index: 17000;
  pointer-events: none;
  font-family: "Syne", "Inter", system-ui, sans-serif;
  color: #eafff8;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.oorbit-portal-layer.is-leaving {
  opacity: 0;
}

.oorbit-portal-account { position:absolute; transform:translate(-50%,-50%); pointer-events:auto;
  padding:13px 18px; border:1px solid #b4fff088; border-radius:999px;
  background:linear-gradient(125deg,#124b54dd,#08222edb 55%,#222c4acc);
  box-shadow:inset 0 1px 0 #ffffff20,0 0 28px #67f2d514,0 5px 18px #0005;
  color:#eafff8; font:600 12px/1.4 "Inter",system-ui,sans-serif; letter-spacing:.14em;
  cursor:pointer; transition:opacity .6s,box-shadow .25s,border-color .25s; }
.oorbit-portal-account:hover { border-color:#c3fff1; box-shadow:inset 0 1px 0 #ffffff30,0 0 26px #67f2d536; }
.oorbit-portal-account:focus-visible { outline:2px solid #6ff2cf; outline-offset:4px; }
.oorbit-portal-lab-caption { position:absolute; top:70%; left:50%; transform:translateX(-50%);
  width:53%; height:auto; overflow:visible; filter:drop-shadow(0 0 7px var(--lab-glow)); }
.oorbit-portal-lab-caption path { fill:none; stroke:url(#portal-lab-ink); stroke-width:3.4;
  stroke-dasharray:1; stroke-dashoffset:1; animation:portal-lab-draw 1.5s ease .4s forwards; }
@keyframes portal-lab-draw { to {stroke-dashoffset:0;} }
@media (prefers-reduced-motion:reduce) { .oorbit-portal-lab-caption path {animation:none;stroke-dashoffset:0;} }
.oorbit-portal-layer.is-idle .oorbit-portal-target,
.oorbit-portal-layer.is-idle .oorbit-portal-account,
.oorbit-portal-layer.is-idle .oorbit-portal-heading { opacity:0; pointer-events:none; }
.oorbit-portal-heading {transition:opacity .8s;}
.oorbit-portal-target { transition:opacity .6s; }
.oorbit-portal-layer.is-exploring .oorbit-portal-account { display:none; }

.oorbit-portal-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.oorbit-portal-heading {
  position: absolute;
  top: clamp(18px, 6vh, 72px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 960px);
  text-align: center;
  text-shadow: 0 2px 18px rgba(2, 8, 23, 0.8);
}

.oorbit-portal-heading p {
  margin: 0 0 6px;
  font: 600 12px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #6ff2cf;
}

.oorbit-portal-heading h1 {
  margin: 0;
  font-size: clamp(24px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.oorbit-portal-now {
  margin: 10px 0 0 !important;
  font: 500 13px/1.3 "Inter", system-ui, sans-serif !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: rgba(234, 255, 248, 0.72) !important;
}

/* Earth: click it to explore. A thin ring instead of the destinations' halo. */
.oorbit-portal-target.oorbit-portal-earth::before {
  inset: -3%;
  background: none;
  border: 1.5px solid rgba(111, 242, 207, 0.4);
  box-shadow: 0 0 24px rgba(111, 242, 207, 0.25);
}

/* Explore mode: the destinations step aside and the canvas takes the pointer. */
.oorbit-portal-heading,
.oorbit-portal-target {
  transition: opacity 0.5s ease;
}

.oorbit-portal-layer.is-exploring .oorbit-portal-heading,
.oorbit-portal-layer.is-exploring .oorbit-portal-target {
  opacity: 0;
  pointer-events: none;
}

.oorbit-portal-layer.is-exploring .oorbit-portal-canvas {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.oorbit-portal-layer.is-exploring .oorbit-portal-canvas.is-dragging {
  cursor: grabbing;
}

.oorbit-portal-explore {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.oorbit-portal-layer.is-exploring .oorbit-portal-explore {
  opacity: 1;
}

.oorbit-portal-layer.is-exploring .oorbit-portal-back,
.oorbit-portal-layer.is-exploring .oorbit-portal-planet-label {
  pointer-events: auto;
}

.oorbit-portal-back {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(111, 242, 207, 0.4);
  background: rgba(4, 14, 30, 0.72);
  backdrop-filter: blur(10px);
  color: #eafff8;
  font: 600 14px/1.2 "Inter", system-ui, sans-serif;
  cursor: pointer;
}

.oorbit-portal-back:hover,
.oorbit-portal-back:focus-visible {
  border-color: rgba(111, 242, 207, 0.85);
}

.oorbit-portal-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  margin: 0;
  max-width: 92vw;
  text-align: center;
  font: 12px/1.4 "Inter", system-ui, sans-serif;
  color: rgba(234, 255, 248, 0.6);
}

.oorbit-portal-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.oorbit-portal-planet-label {
  position: absolute;
  left: 0;
  top: 0;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(160, 190, 255, 0.28);
  background: rgba(4, 10, 26, 0.55);
  color: rgba(234, 245, 255, 0.85);
  font: 500 12px/1.3 "Inter", system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.oorbit-portal-planet-label:hover,
.oorbit-portal-planet-label:focus-visible {
  color: #fff;
  border-color: rgba(111, 242, 207, 0.8);
}

.oorbit-portal-planet-label.is-hidden {
  display: none;
}

.oorbit-portal-credit {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  pointer-events: auto;
  font: 11px/1.2 "Inter", system-ui, sans-serif;
  color: rgba(234, 255, 248, 0.38);
  text-decoration: none;
  white-space: nowrap;
}

.oorbit-portal-credit:hover,
.oorbit-portal-credit:focus-visible {
  color: rgba(234, 255, 248, 0.75);
  text-decoration: underline;
}

.oorbit-portal-target {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* A soft halo behind each destination that brightens when it is the one you mean. */
.oorbit-portal-target::before {
  content: "";
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 242, 207, 0.22), rgba(111, 242, 207, 0) 68%);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.35s ease;
}

.oorbit-portal-target:hover::before,
.oorbit-portal-target:focus-visible::before,
.oorbit-portal-target.is-active::before {
  opacity: 1;
  transform: scale(1);
}

.oorbit-portal-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  transform: translate(-50%, 6px);
  min-width: max-content;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(111, 242, 207, 0.35);
  background: rgba(4, 14, 30, 0.72);
  backdrop-filter: blur(10px);
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
  pointer-events: none;
}

.oorbit-portal-label strong {
  display: block;
  font-size: 16px;
  font-weight: 700;
}

.oorbit-portal-label small {
  display: block;
  margin-top: 2px;
  font: 12px/1.3 "Inter", system-ui, sans-serif;
  color: rgba(234, 255, 248, 0.7);
}

/* Near a screen edge (phones), the label hangs inward instead of off the screen. */
.oorbit-portal-target.is-edge-left .oorbit-portal-label {
  left: 0;
  transform: translate(0, 6px);
}

.oorbit-portal-target.is-edge-right .oorbit-portal-label {
  left: auto;
  right: 0;
  transform: translate(0, 6px);
}

.oorbit-portal-target.is-edge-left:hover .oorbit-portal-label,
.oorbit-portal-target.is-edge-left:focus-visible .oorbit-portal-label,
.oorbit-portal-target.is-edge-left.is-active .oorbit-portal-label,
.oorbit-portal-target.is-edge-right:hover .oorbit-portal-label,
.oorbit-portal-target.is-edge-right:focus-visible .oorbit-portal-label,
.oorbit-portal-target.is-edge-right.is-active .oorbit-portal-label {
  transform: translate(0, 0);
}

.oorbit-portal-target:hover .oorbit-portal-label,
.oorbit-portal-target:focus-visible .oorbit-portal-label,
.oorbit-portal-target.is-active .oorbit-portal-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Touch screens cannot hover, so the names are always shown there. */
@media (hover: none) {
  .oorbit-portal-target .oorbit-portal-label {
    opacity: 0.92;
    padding: 5px 10px;
  }

  .oorbit-portal-label small {
    display: none;
  }

  .oorbit-portal-target:not(.is-edge-left):not(.is-edge-right) .oorbit-portal-label {
    transform: translate(-50%, 0);
  }

  .oorbit-portal-target.is-edge-left .oorbit-portal-label,
  .oorbit-portal-target.is-edge-right .oorbit-portal-label {
    transform: translate(0, 0);
  }

  .oorbit-portal-label strong {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .oorbit-portal-layer,
  .oorbit-portal-target::before,
  .oorbit-portal-label {
    transition: none;
  }
}

/* The scale meter: a log ruler across the top while exploring. */
.oorbit-portal-meter {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 66vw);
  padding: 10px 22px 8px;
  border-radius: 16px;
  border: 1px solid rgba(111, 242, 207, 0.22);
  background: rgba(4, 12, 28, 0.6);
  backdrop-filter: blur(10px);
  text-align: center;
}

.oorbit-portal-layer.is-exploring .oorbit-portal-meter {
  pointer-events: auto;
}

.oorbit-portal-meter-track {
  position: relative;
  height: 46px;
  margin: 0 6px;
}

.oorbit-portal-meter-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(111, 242, 207, 0.55), rgba(140, 170, 255, 0.55) 60%, rgba(255, 190, 140, 0.55));
}

.oorbit-portal-meter-step {
  position: absolute;
  top: 15px;
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  background: none;
  color: rgba(234, 255, 248, 0.62);
  font: 500 11px/1.2 "Inter", system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.oorbit-portal-meter-step::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 5px auto 4px;
  border-radius: 50%;
  background: rgba(234, 255, 248, 0.7);
}

.oorbit-portal-meter-step:hover,
.oorbit-portal-meter-step:focus-visible {
  color: #fff;
}

/* Every other step names itself above the line, so neighbours never collide. */
.oorbit-portal-meter-step.is-up span {
  position: absolute;
  left: 50%;
  bottom: 17px;
  transform: translateX(-50%);
}

.oorbit-portal-meter-marker {
  position: absolute;
  top: 17px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #6ff2cf;
  box-shadow: 0 0 12px rgba(111, 242, 207, 0.9);
  pointer-events: none;
  z-index: 1;
}

.oorbit-portal-meter-readout {
  margin: 2px 0 0;
  font: 600 13px/1.3 "Inter", system-ui, sans-serif;
  color: #eafff8;
}

@media (max-width: 640px) {
  .oorbit-portal-meter {
    top: 58px;
    width: calc(100vw - 32px);
    padding: 8px 14px 6px;
  }

  .oorbit-portal-meter-track {
    height: 22px;
  }

  .oorbit-portal-meter-track::before {
    top: 10px;
  }

  .oorbit-portal-meter-step {
    top: 3px;
  }

  .oorbit-portal-meter-marker {
    top: 5px;
  }

  .oorbit-portal-meter-step span {
    display: none;
  }
}

/* Zodiac signs and the far universe get their own label styles. */
.oorbit-portal-planet-label.is-sign {
  border-color: rgba(127, 233, 208, 0.4);
  color: #dffcf4;
  font-size: 13px;
}

.oorbit-portal-planet-label.is-sign.is-chosen {
  border-color: rgba(255, 210, 120, 0.9);
  color: #ffe6b0;
  box-shadow: 0 0 18px rgba(255, 200, 110, 0.35);
}

.oorbit-portal-planet-label.is-deep {
  border-color: rgba(200, 180, 255, 0.3);
  color: rgba(236, 230, 255, 0.9);
}

.oorbit-portal-sign {
  position: absolute;
  left: 16px;
  bottom: 64px;
  width: min(340px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 210, 120, 0.4);
  background: rgba(10, 10, 24, 0.78);
  backdrop-filter: blur(12px);
  color: #f4f1ff;
  font: 13px/1.45 "Inter", system-ui, sans-serif;
  pointer-events: auto;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.oorbit-portal-sign.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.oorbit-portal-sign h2 {
  margin: 0 0 8px;
  font: 700 20px/1.2 "Syne", "Inter", system-ui, sans-serif;
  color: #ffe6b0;
}

.oorbit-portal-sign dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0 0 8px;
}

.oorbit-portal-sign dt {
  color: rgba(244, 241, 255, 0.6);
}

.oorbit-portal-sign dd {
  margin: 0;
}

.oorbit-portal-sign p {
  margin: 0;
  color: rgba(244, 241, 255, 0.7);
  font-size: 12px;
}

.oorbit-portal-sign-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: none;
  color: rgba(244, 241, 255, 0.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Credits: one small link that opens the list the licences ask for. */
.oorbit-portal-credit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.oorbit-portal-credit-toggle {
  border: 0;
  background: none;
  padding: 2px 6px;
  color: rgba(234, 255, 248, 0.42);
  font: 11px/1.2 "Inter", system-ui, sans-serif;
  cursor: pointer;
}

.oorbit-portal-credit-toggle:hover,
.oorbit-portal-credit-toggle:focus-visible,
.oorbit-portal-credit-toggle[aria-expanded="true"] {
  color: rgba(234, 255, 248, 0.85);
}

.oorbit-portal-credit-list {
  margin: 0;
  padding: 10px 14px;
  list-style: none;
  border-radius: 12px;
  border: 1px solid rgba(111, 242, 207, 0.25);
  background: rgba(4, 12, 28, 0.82);
  backdrop-filter: blur(10px);
  font: 11px/1.6 "Inter", system-ui, sans-serif;
  white-space: normal;
  max-width: min(520px, calc(100vw - 32px));
  text-align: left;
}

.oorbit-portal-credit-list a {
  color: rgba(234, 255, 248, 0.75);
}

/* The Earth Clock menu, opened from Oorbi. */
.oorbit-clock-menu {
  position: absolute;
  top: 160px;
  right: 16px;
  width: min(300px, calc(100vw - 32px));
  padding: 14px 16px 16px;
  border-radius: 18px;
  border: 1px solid rgba(127, 168, 255, 0.35);
  background: rgba(6, 12, 30, 0.8);
  backdrop-filter: blur(14px);
  color: #eaf2ff;
  font: 13px/1.4 "Inter", system-ui, sans-serif;
  pointer-events: auto;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.oorbit-clock-menu.is-hidden {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.oorbit-clock-menu header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.oorbit-clock-menu header strong {
  flex: 1;
  font: 700 15px/1.2 "Syne", "Inter", system-ui, sans-serif;
}

.oorbit-clock-close {
  border: 0;
  background: none;
  color: rgba(234, 242, 255, 0.7);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.oorbit-clock-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
}

.oorbit-clock-switch input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.oorbit-clock-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
  transition: background 0.2s ease;
}

.oorbit-clock-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.oorbit-clock-switch input:checked + span {
  background: #2fbf93;
}

.oorbit-clock-switch input:checked + span::after {
  transform: translateX(16px);
}

.oorbit-clock-digital {
  margin: 0 0 12px;
  font: 600 26px/1.1 "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
  text-align: center;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(127, 168, 255, 0.6);
}

.oorbit-clock-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.oorbit-clock-presets button {
  padding: 6px 4px 5px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: 600 11px/1.2 "Inter", system-ui, sans-serif;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--swatch);
}

.oorbit-clock-presets button.is-on {
  border-color: var(--swatch);
  background: rgba(255, 255, 255, 0.1);
}

.oorbit-clock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  margin-bottom: 10px;
}

.oorbit-clock-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
}

.oorbit-clock-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 12px;
}

.oorbit-clock-row select,
.oorbit-clock-row input[type="range"] {
  width: 100%;
  accent-color: #7fa8ff;
}

.oorbit-clock-row select {
  padding: 4px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(6, 12, 30, 0.9);
  color: inherit;
}

.oorbit-clock-colours {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.oorbit-clock-colours label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: rgba(234, 242, 255, 0.7);
}

.oorbit-clock-colours input {
  width: 34px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  background: none;
  cursor: pointer;
}

/* The time, under Earth, while exploring with the clock on. */
.oorbit-clock-readout {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font: 600 18px/1.2 "Space Mono", ui-monospace, monospace;
  color: #ffffff;
  text-shadow: 0 0 14px rgba(127, 168, 255, 0.7);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.oorbit-clock-readout.is-on {
  opacity: 1;
}

/* Oorbi's page buttons: the clock shows lit when it is on. */
.orbit-glass-buddy-actions [data-buddy-extra].is-active {
  box-shadow: 0 0 0 2px rgba(111, 242, 207, 0.85), 0 0 14px rgba(111, 242, 207, 0.6);
}

/* ── C529: the world's open data (layers.js) ───────────────────────────── */
.oorbit-world-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.oorbit-world-label {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font: 600 11px/1.2 "Inter", system-ui, sans-serif; color: rgba(236, 244, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.6);
}
.oorbit-world-label.is-country { font: 700 12px/1.2 "Space Mono", ui-monospace, monospace; letter-spacing: 0.18em; color: rgba(255, 230, 170, 0.85); }
.oorbit-world-tip {
  position: absolute; left: 0; top: 0; padding: 4px 9px; border-radius: 8px; pointer-events: none;
  background: rgba(8, 12, 26, 0.86); border: 1px solid rgba(143, 216, 255, 0.35); color: #fff;
  font: 600 12px/1.2 "Inter", system-ui, sans-serif; white-space: nowrap; z-index: 6;
}
.oorbit-world-tip.is-hidden { display: none; }
.oorbit-world-card {
  --kind: #8fd8ff;
  /* Below Oorbi, who sits top right. */
  position: absolute; right: 16px; top: 176px; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 236px); overflow: auto;
  padding: 16px 18px 14px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--kind) 45%, transparent);
  background: linear-gradient(180deg, rgba(14, 20, 40, 0.92), rgba(6, 9, 22, 0.9)); backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 30px color-mix(in srgb, var(--kind) 18%, transparent);
  color: #f2f6ff; font: 13px/1.5 "Inter", system-ui, sans-serif; pointer-events: auto; z-index: 7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.oorbit-world-card.is-hidden { opacity: 0; transform: translateX(14px); pointer-events: none; }
.oorbit-world-card-img { display: block; width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; margin: 0 0 12px; }
.oorbit-world-card-kicker { margin: 0; font: 700 10px/1.3 "Space Mono", ui-monospace, monospace; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kind); }
.oorbit-world-card h2 { margin: 4px 0 2px; font: 700 22px/1.15 "Syne", "Inter", system-ui, sans-serif; color: #fff; }
.oorbit-world-card-desc { margin: 0 0 8px; color: rgba(230, 238, 255, 0.7); font-style: italic; }
.oorbit-world-card-text { margin: 0 0 12px; color: rgba(242, 246, 255, 0.92); }
.oorbit-world-card-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.oorbit-world-card-actions a, .oorbit-world-card-actions button {
  flex: 1; height: 36px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; text-decoration: none;
  font: 700 12px/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.1em; color: #fff;
  border: 1px solid color-mix(in srgb, var(--kind) 60%, transparent); background: color-mix(in srgb, var(--kind) 18%, rgba(8, 12, 26, 0.8));
}
.oorbit-world-card-actions a.go { background: color-mix(in srgb, var(--kind) 34%, rgba(8, 12, 26, 0.8)); }
.oorbit-world-card-credit { margin: 0; font-size: 10.5px; color: rgba(230, 238, 255, 0.5); }
.oorbit-world-card-credit a, .oorbit-world-credit a { color: rgba(170, 215, 255, 0.85); }
.oorbit-world-card-close {
  position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 18px; line-height: 1; z-index: 1;
}
.oorbit-world-menu {
  position: absolute; left: 16px; top: 84px; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto;
  padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(143, 216, 255, 0.28);
  background: linear-gradient(180deg, rgba(14, 22, 42, 0.94), rgba(6, 9, 22, 0.92)); backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); color: #f2f6ff; font: 13px/1.45 "Inter", system-ui, sans-serif; pointer-events: auto; z-index: 8;
}
.oorbit-world-menu.is-hidden { display: none; }
.oorbit-world-menu-head { position: relative; margin-bottom: 6px; cursor: grab; touch-action: none; user-select: none; }
.oorbit-world-menu-head:active { cursor: grabbing; }
.oorbit-world-menu-head p { margin: 0; font: 700 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(170, 200, 230, 0.7); }
.oorbit-world-menu-head h2 { margin: 4px 0 0; font: 800 24px/1 "Syne", "Inter", system-ui, sans-serif; letter-spacing: 0.04em; color: #fff; }
.oorbit-world-menu section { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(143, 216, 255, 0.12); }
.oorbit-world-menu h3 { margin: 0 0 8px; font: 700 10px/1 "Space Mono", ui-monospace, monospace; letter-spacing: 0.18em; text-transform: uppercase; color: #8fd8ff; }
.oorbit-world-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.oorbit-world-chip {
  --dot: transparent;
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(143, 216, 255, 0.2); background: rgba(8, 14, 28, 0.8); color: rgba(220, 232, 248, 0.8);
  font: 600 11.5px/1 "Inter", system-ui, sans-serif;
}
.oorbit-world-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); display: var(--dot-display, inline-block); }
.oorbit-world-chip[aria-pressed="true"] { border-color: rgba(143, 216, 255, 0.7); background: rgba(40, 80, 130, 0.45); color: #fff; }
.oorbit-world-slider { display: grid; grid-template-columns: 105px 1fr 92px; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: rgba(220, 232, 248, 0.75); }
.oorbit-world-slider[hidden] { display: none; }
.oorbit-world-slider input { width: 100%; accent-color: #8fd8ff; }
.oorbit-world-slider output { text-align: right; font: 600 11px/1 "Space Mono", ui-monospace, monospace; color: #fff; }
.oorbit-world-status { margin: 8px 0 0; min-height: 16px; font: 600 11px/1.3 "Space Mono", ui-monospace, monospace; color: #ffd36a; }
.oorbit-world-note { margin: 4px 0 0; font-size: 11.5px; color: rgba(220, 232, 248, 0.6); }
.oorbit-world-credit { margin: 14px 0 0; font-size: 10.5px; line-height: 1.5; color: rgba(220, 232, 248, 0.5); }
@media (max-width: 640px) {
  .oorbit-world-card { right: 8px; left: 8px; width: auto; top: auto; bottom: 70px; max-height: 55vh; }
  .oorbit-world-menu { left: 8px; right: 8px; width: auto; top: 70px; }
}

/* ── C530: search, Earth's own label, the Oorbit World galaxy ──────────── */
.oorbit-world-search { position: absolute; left: 16px; top: 66px; width: min(360px, calc(100vw - 32px)); pointer-events: auto; z-index: 7; }
.oorbit-world-search[hidden] { display: none; }
.oorbit-world-search input {
  width: 100%; height: 38px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(143, 216, 255, 0.3);
  background: rgba(8, 12, 26, 0.82); backdrop-filter: blur(10px); color: #fff; font: 500 13px/1 "Inter", system-ui, sans-serif; outline: none;
}
.oorbit-world-search input:focus { border-color: rgba(143, 216, 255, 0.75); box-shadow: 0 0 18px rgba(95, 208, 255, 0.25); }
.oorbit-world-results { list-style: none; margin: 6px 0 0; padding: 4px; border-radius: 12px; background: rgba(8, 12, 26, 0.92); border: 1px solid rgba(143, 216, 255, 0.2); max-height: 50vh; overflow: auto; }
.oorbit-world-results li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: #eef4ff; font: 13px/1.2 "Inter", system-ui, sans-serif; }
.oorbit-world-results li:hover { background: rgba(95, 208, 255, 0.14); }
.oorbit-world-results li small { color: rgba(200, 220, 240, 0.6); font: 600 10px/1.4 "Space Mono", ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.oorbit-world-results li.more { cursor: default; color: #fff27a; font: 600 11px/1.2 "Space Mono", ui-monospace, monospace; }
.oorbit-world-results li.more:hover { background: none; }
.oorbit-portal-planet-label.is-earth { z-index: 2; border-color: rgba(88, 176, 255, 0.85) !important; color: #d8ecff !important; background: rgba(12, 40, 80, 0.85) !important; }
.oorbit-portal-planet-label.is-oorbit { border-color: rgba(255, 120, 240, 0.85) !important; color: #fff !important; background: linear-gradient(90deg, rgba(120, 30, 140, 0.85), rgba(20, 90, 130, 0.85)) !important; box-shadow: 0 0 18px rgba(255, 120, 240, 0.35); }
@media (max-width: 640px) { .oorbit-world-search { top: 58px; left: 8px; right: 8px; width: auto; } }

/* Time-lapse (C531): the date the planets are at, and the way back to now. */
.oorbit-portal-timelapse {
  position: absolute; left: 50%; top: 108px; transform: translateX(-50%); display: none; pointer-events: auto; z-index: 7;
  padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(143, 216, 255, 0.4); background: rgba(8, 12, 26, 0.82);
  backdrop-filter: blur(10px); color: #eaf6ff; font: 600 12px/1 "Inter", system-ui, sans-serif; cursor: pointer;
}
.oorbit-portal-timelapse.is-on { display: block; }
.oorbit-portal-timelapse:hover { border-color: rgba(143, 216, 255, 0.85); }

/* On the ground as your Oorbi (C531). */
.oorbit-portal-canvas.is-walking, .oorbit-portal-layer.is-exploring .oorbit-portal-canvas.is-walking.is-dragging { cursor: crosshair; }
.oorbit-walk-avatar { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.oorbit-walk-avatar canvas { width: 100% !important; height: 100% !important; display: block; }
.oorbit-walk-shadow { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
.oorbit-walk-avatar.is-hidden, .oorbit-walk-shadow.is-hidden, .oorbit-walk-hint.is-hidden { display: none; }
.oorbit-walk-hint {
  position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%); max-width: calc(100vw - 32px); z-index: 7;
  padding: 8px 14px; border-radius: 12px; background: rgba(8, 12, 26, 0.78); border: 1px solid rgba(143, 216, 255, 0.25);
  color: #dfeefc; font: 500 12px/1.4 "Inter", system-ui, sans-serif; text-align: center; transition: opacity 0.6s ease;
}
.oorbit-walk-hint b { color: #8fd8ff; }
.oorbit-walk-hint.is-quiet { opacity: 0.45; }

/* C535: level, credits, population, power and FPS round Oorbi belong to the game pages, not the homepage portal. */
html.oorbit-portal .orbit-glass-bubble-balance,
html.oorbit-portal .orbit-glass-bubble-population,
html.oorbit-portal .orbit-glass-bubble-power,
html.oorbit-portal .orbit-glass-bubble-level-badge,
html.oorbit-portal .orbit-glass-debug-badge { display: none !important; }

/* ── C534: interactive Living Sun mode ──────────────────────────────── */
.oorbit-sun-card {
  position: absolute;
  right: 18px;
  top: 112px;
  width: min(390px, calc(100vw - 36px));
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 176, 76, 0.42);
  background: linear-gradient(180deg, rgba(28, 13, 7, 0.92), rgba(9, 7, 12, 0.9));
  backdrop-filter: blur(16px);
  color: #fff7ec;
  font: 13px/1.45 "Inter", system-ui, sans-serif;
  pointer-events: auto;
  z-index: 8;
  box-shadow: 0 18px 70px rgba(0,0,0,0.58), 0 0 36px rgba(255, 130, 35, 0.13);
  transition: opacity .28s ease, transform .28s ease;
}
.oorbit-sun-card.is-hidden { opacity: 0; transform: translateX(14px); pointer-events: none; }
.oorbit-sun-close {
  position: absolute; top: 9px; right: 11px; border: 0; background: none;
  color: rgba(255,245,232,.74); font-size: 22px; cursor: pointer;
}
.oorbit-sun-kicker {
  margin: 0 0 3px; font: 700 10px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .18em; color: #ffb04a;
}
.oorbit-sun-card h2 { margin: 0; font: 700 28px/1.08 "Syne","Inter",sans-serif; color: #fff; }
.oorbit-sun-sub { margin: 6px 28px 14px 0; color: rgba(255,239,217,.7); }
.oorbit-sun-stats {
  display: grid; grid-template-columns: minmax(110px, .8fr) 1.2fr; gap: 5px 12px;
  margin: 0 0 14px; padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,190,105,.14);
}
.oorbit-sun-stats dt { color: rgba(255,220,178,.62); }
.oorbit-sun-stats dd { margin: 0; color: #fff5e9; }
.oorbit-sun-section-title {
  margin: 6px 0 7px; font: 700 11px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(255,214,162,.75);
}
.oorbit-sun-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.oorbit-sun-modes .oorbit-world-chip.is-active {
  border-color: rgba(255,177,76,.88); color: #fff4e7; background: rgba(255,145,45,.16);
}
.oorbit-sun-activity { display: grid; gap: 7px; margin: 2px 0 13px; color: rgba(255,238,217,.82); }
.oorbit-sun-activity input { width: 100%; accent-color: #ff9b37; }
.oorbit-sun-flare {
  width: 100%; padding: 11px 12px; border-radius: 12px; border: 1px solid rgba(255,174,73,.5);
  background: linear-gradient(180deg, rgba(255,139,36,.2), rgba(255,82,22,.12));
  color: #fff4df; font: 700 12px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .04em; cursor: pointer;
}
.oorbit-sun-flare:hover,.oorbit-sun-flare:focus-visible { border-color: rgba(255,201,126,.95); background: rgba(255,126,31,.26); }
.oorbit-sun-note { margin: 12px 0 0; color: rgba(255,230,198,.55); font-size: 11px; }
@media (max-width: 700px) {
  .oorbit-sun-card { top: 118px; right: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 150px); }
  .oorbit-sun-stats { grid-template-columns: 1fr 1.1fr; }
}


.oorbit-sun-inside {
  width: 100%;
  margin: 2px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,194,112,.32);
  background: rgba(255,255,255,.035);
  color: rgba(255,240,220,.88);
  font: 700 11px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .045em;
  cursor: pointer;
}
.oorbit-sun-inside.is-active {
  border-color: rgba(255,192,99,.88);
  background: rgba(255,132,40,.16);
  color: #fff6e8;
}
.oorbit-sun-layers {
  display: grid;
  gap: 6px;
  margin: 0 0 13px;
  padding: 10px 11px;
  border-radius: 13px;
  border: 1px solid rgba(255,183,91,.14);
  background: rgba(255,255,255,.025);
}
.oorbit-sun-layers.is-hidden { display: none; }
.oorbit-sun-layer-row { display: grid; gap: 1px; }
.oorbit-sun-layer-row strong { color: #fff1dc; font-size: 12px; }
.oorbit-sun-layer-row span { color: rgba(255,224,186,.58); font-size: 11px; line-height: 1.3; }


.oorbit-sun-live {
  margin: 0 0 13px;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(111,242,207,.2);
  background: rgba(111,242,207,.035);
}
.oorbit-sun-live-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.oorbit-sun-live-head strong {
  color: #8ff6db;
  font: 700 10px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .12em;
}
.oorbit-sun-refresh {
  border: 0;
  background: none;
  color: rgba(230,255,248,.68);
  font: 600 11px/1.2 "Inter", system-ui, sans-serif;
  cursor: pointer;
}
.oorbit-sun-refresh:disabled { opacity: .45; cursor: default; }
.oorbit-sun-live-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4px 10px;
  margin: 0 0 6px;
}
.oorbit-sun-live-grid dt { color: rgba(220,248,241,.58); }
.oorbit-sun-live-grid dd { margin: 0; color: rgba(247,255,252,.92); }
.oorbit-sun-live small { color: rgba(221,247,240,.42); }
.oorbit-sun-live-status { margin: 0; color: rgba(231,249,244,.6); }
.oorbit-sun-sdo {
  width: 100%;
  margin: 1px 0 9px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(127,168,255,.34);
  background: rgba(127,168,255,.05);
  color: rgba(231,239,255,.88);
  font: 700 11px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .04em;
  cursor: pointer;
}
.oorbit-sun-sdo.is-active {
  border-color: rgba(127,168,255,.88);
  background: rgba(89,128,255,.16);
  color: #f4f7ff;
}


/* ── C537: Moon Mode ─────────────────────────────────────────────── */
.oorbit-moon-card {
  position: absolute;
  right: 18px;
  top: 112px;
  width: min(390px, calc(100vw - 36px));
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 18px 18px 16px;
  border-radius: 20px;
  border: 1px solid rgba(190, 204, 230, .34);
  background: linear-gradient(180deg, rgba(17, 20, 29, .94), rgba(7, 9, 15, .92));
  backdrop-filter: blur(16px);
  color: #f5f7fb;
  font: 13px/1.45 "Inter", system-ui, sans-serif;
  pointer-events: auto;
  z-index: 8;
  box-shadow: 0 18px 70px rgba(0,0,0,.58), 0 0 32px rgba(150,180,230,.08);
  transition: opacity .28s ease, transform .28s ease;
}
.oorbit-moon-card.is-hidden { opacity: 0; transform: translateX(14px); pointer-events: none; }
.oorbit-moon-close {
  position: absolute; top: 9px; right: 11px; border: 0; background: none;
  color: rgba(244,247,252,.72); font-size: 22px; cursor: pointer;
}
.oorbit-moon-kicker {
  margin: 0 0 3px;
  font: 700 10px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .18em; color: #c8d5ea;
}
.oorbit-moon-card h2 { margin: 0; font: 700 28px/1.08 "Syne","Inter",sans-serif; color: #fff; }
.oorbit-moon-phase-name { margin: 5px 28px 13px 0; color: rgba(225,234,247,.78); font-weight: 600; }
.oorbit-moon-stats {
  display: grid; grid-template-columns: minmax(110px,.8fr) 1.2fr;
  gap: 5px 12px; margin: 0 0 13px; padding: 12px;
  border-radius: 14px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(196,211,235,.12);
}
.oorbit-moon-stats dt { color: rgba(211,222,239,.58); }
.oorbit-moon-stats dd { margin: 0; color: #f5f7fb; }
.oorbit-moon-phase-track {
  position: relative; height: 8px; margin: 5px 5px 3px;
  border-radius: 999px; background: rgba(255,255,255,.08); overflow: visible;
}
.oorbit-moon-phase-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  background: linear-gradient(90deg, rgba(150,165,190,.28), rgba(232,238,248,.82), rgba(150,165,190,.28));
}
.oorbit-moon-phase-dot {
  position: absolute; top: 50%; width: 13px; height: 13px; margin-left: -6px;
  transform: translateY(-50%); border-radius: 50%; background: #f8fbff;
  box-shadow: 0 0 12px rgba(225,236,255,.7);
}
.oorbit-moon-phase-labels { display: flex; justify-content: space-between; margin: 0 0 12px; color: rgba(220,229,242,.46); font-size: 10px; }
.oorbit-moon-section-title {
  margin: 5px 0 7px; font: 700 11px/1.2 "Space Mono", ui-monospace, monospace;
  letter-spacing: .09em; text-transform: uppercase; color: rgba(220,230,245,.68);
}
.oorbit-moon-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.oorbit-moon-filters .oorbit-world-chip.is-active { border-color: rgba(196,211,235,.76); background: rgba(196,211,235,.12); color: #fff; }
.oorbit-moon-nasa {
  display: grid; gap: 2px; margin: 0 0 11px; padding: 9px 10px;
  border-radius: 12px; border: 1px solid rgba(127,168,255,.2); background: rgba(127,168,255,.04);
}
.oorbit-moon-nasa strong { color: #cddcff; font: 700 10px/1.2 "Space Mono", ui-monospace, monospace; letter-spacing: .08em; }
.oorbit-moon-nasa span { color: rgba(218,229,250,.57); font-size: 11px; }
.oorbit-moon-site {
  display: grid; gap: 3px; margin-top: 8px; padding: 11px;
  border-radius: 13px; border: 1px solid rgba(255,210,125,.22); background: rgba(255,194,92,.045);
}
.oorbit-moon-site small { color: #f1c776; font: 700 9px/1.2 "Space Mono",ui-monospace,monospace; letter-spacing: .1em; }
.oorbit-moon-site strong { font-size: 14px; color: #fff; }
.oorbit-moon-site p { margin: 0; color: rgba(239,241,247,.7); }
.oorbit-moon-site span { color: rgba(233,237,245,.45); font-size: 10px; }
.oorbit-moon-note { margin: 11px 0 0; color: rgba(215,223,236,.5); font-size: 11px; }

.oorbit-moon-marker {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%,-50%);
  padding: 4px 7px;
  border-radius: 999px;
  pointer-events: auto;
  cursor: pointer;
  font: 700 9px/1.1 "Space Mono", ui-monospace, monospace;
  white-space: nowrap;
  z-index: 7;
}
.oorbit-moon-marker.is-hidden { display: none; }
.oorbit-moon-marker.is-apollo {
  color: #ffe7ae; border: 1px solid rgba(255,205,107,.55); background: rgba(37,28,13,.82);
  box-shadow: 0 0 12px rgba(255,184,62,.13);
}
.oorbit-moon-marker.is-feature {
  color: #e9f1ff; border: 1px solid rgba(187,207,239,.36); background: rgba(18,23,34,.78);
}
.oorbit-moon-marker:hover,.oorbit-moon-marker:focus-visible { transform: translate(-50%,-50%) scale(1.06); }

@media (max-width: 700px) {
  .oorbit-moon-card { top: 118px; right: 12px; width: calc(100vw - 24px); max-height: calc(100vh - 150px); }
  .oorbit-moon-stats { grid-template-columns: 1fr 1.1fr; }
  .oorbit-moon-marker { font-size: 8px; padding: 3px 5px; }
}


.oorbit-moon-surface-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}
.oorbit-moon-surface-modes .oorbit-world-chip.is-active {
  border-color: rgba(132, 178, 255, .82);
  background: rgba(91, 133, 215, .14);
  color: #f4f7ff;
}
.oorbit-moon-surface-error {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: rgba(255, 186, 160, .72);
  font-size: 11px;
}


/* C538 · Moon time machine ------------------------------------------------ */
.oorbit-moon-timeline{
  position:fixed; top:16px; left:50%; transform:translateX(-50%);
  width:min(760px,calc(100vw - 36px)); z-index:24;
  padding:12px 14px 11px; border:1px solid rgba(188,216,255,.22);
  border-radius:18px; background:linear-gradient(180deg,rgba(9,18,33,.94),rgba(5,10,20,.88));
  box-shadow:0 18px 55px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
}
.oorbit-moon-timeline-head,.oorbit-moon-time-tabs,.oorbit-moon-time-readout,.oorbit-moon-history-readout{display:flex;align-items:center}
.oorbit-moon-timeline-head{justify-content:space-between;gap:16px}
.oorbit-moon-timeline-head>div:first-child{display:grid;gap:2px}
.oorbit-moon-timeline-head small{font-size:9px;letter-spacing:.2em;color:#9db7d7}
.oorbit-moon-timeline-head strong{font-size:13px;font-weight:720;color:#f4f8ff}
.oorbit-moon-time-tabs{gap:7px;margin-top:9px}
.oorbit-moon-time-tabs .oorbit-world-chip{padding:5px 9px;font-size:9px}
.oorbit-moon-time-control{position:relative;margin-top:9px}
.oorbit-moon-time-range{width:100%;accent-color:#b6d9ff;cursor:ew-resize}
.oorbit-moon-time-readout{justify-content:space-between;font-size:9px;color:#8ea5c2;margin-top:1px}
.oorbit-moon-time-readout strong{font-size:9px;color:#dceaff;text-transform:uppercase;letter-spacing:.1em}
.oorbit-moon-history-readout{gap:8px;margin-top:2px;font-size:10px;color:#aabed8}
.oorbit-moon-history-readout strong{color:#f0f6ff}
.oorbit-moon-history-events{position:relative;height:10px;margin:2px 7px 0}
.oorbit-moon-history-dot{
  position:absolute;top:2px;width:6px;height:6px;margin-left:-3px;padding:0;
  border:0;border-radius:50%;background:#6d829d;box-shadow:0 0 0 2px rgba(4,8,16,.9)
}
.oorbit-moon-history-dot:hover,.oorbit-moon-history-dot.is-active{
  background:#e4f2ff;box-shadow:0 0 0 2px rgba(4,8,16,.9),0 0 12px rgba(155,213,255,.8)
}
.oorbit-moon-event,.oorbit-moon-deep-time{
  margin-top:12px;padding:11px 12px;border:1px solid rgba(176,206,240,.14);
  border-radius:12px;background:rgba(105,137,174,.07)
}
.oorbit-moon-event{display:grid;gap:4px}
.oorbit-moon-event small,.oorbit-moon-deep-time small{font-size:9px;color:#8ea5c2;text-transform:uppercase;letter-spacing:.08em}
.oorbit-moon-event strong,.oorbit-moon-deep-time strong{color:#f3f7ff}
.oorbit-moon-event p,.oorbit-moon-deep-time p{margin:0;font-size:11px;line-height:1.45;color:#b9c8da}
.oorbit-moon-deep-time summary{cursor:pointer;color:#d7e7f9;font-size:11px;font-weight:700}
.oorbit-moon-deep-time>div{display:grid;gap:10px;margin-top:10px}
.oorbit-moon-deep-time>div>div{display:grid;gap:3px;padding-top:8px;border-top:1px solid rgba(255,255,255,.06)}
@media(max-width:700px){
  .oorbit-moon-timeline{top:8px;width:calc(100vw - 16px);padding:10px 11px}
  .oorbit-moon-card{padding-top:138px}
  .oorbit-moon-time-tabs{overflow:auto}
}

.oorbit-moon-marker.is-selected{
  border-color:rgba(220,241,255,.92);
  background:rgba(135,190,235,.28);
  box-shadow:0 0 0 2px rgba(8,18,30,.82),0 0 20px rgba(135,205,255,.7);
}

.oorbit-moon-marker.is-robotic {
  color: #bff5ff;
  border: 1px solid rgba(105,218,238,.52);
  background: rgba(11,31,39,.82);
  box-shadow: 0 0 12px rgba(72,208,231,.14);
}


.oorbit-portal-planet-label.is-satellite {
  font-size: 10px;
  letter-spacing: .035em;
  color: rgba(224,232,244,.82);
  border-color: rgba(175,194,222,.22);
  background: rgba(10,15,25,.62);
  padding: 4px 7px;
}
.oorbit-portal-planet-label.is-satellite:hover,
.oorbit-portal-planet-label.is-satellite:focus-visible {
  color: #fff;
  border-color: rgba(196,215,243,.56);
  background: rgba(20,29,45,.82);
}


.oorbit-moon-museum-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  text-decoration: none;
  border-color: rgba(205,220,245,.48);
  background: linear-gradient(135deg, rgba(119,148,194,.14), rgba(255,255,255,.035));
}
.oorbit-moon-museum-link:hover,
.oorbit-moon-museum-link:focus-visible {
  border-color: rgba(218,231,252,.8);
  background: rgba(179,203,240,.14);
}
.oorbit-moon-museum-copy {
  margin: 0 0 12px;
  color: rgba(218,227,241,.56);
  font-size: 11px;
  line-height: 1.45;
}


.oorbit-journey {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(184,205,236,.3);
  background: rgba(7,11,18,.78);
  backdrop-filter: blur(12px);
  color: #edf4ff;
  font: 700 10px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .06em;
  pointer-events: auto;
  box-shadow: 0 10px 34px rgba(0,0,0,.3);
}
.oorbit-journey.is-hidden { display:none; }
.oorbit-journey button {
  border: 0;
  border-radius: 999px;
  padding: 6px 8px;
  background: rgba(255,255,255,.08);
  color: rgba(240,245,252,.78);
  font: inherit;
  cursor: pointer;
}
.oorbit-journey button:hover,
.oorbit-journey button:focus-visible { background: rgba(255,255,255,.15); color:#fff; }

@media(max-width:700px) {
  .oorbit-journey { right:12px; bottom:12px; max-width:calc(100vw - 24px); }
}


/* C542 · Driving Mode --------------------------------------------------- */
.oorbit-drive-hud{
  position:fixed;inset:0;z-index:23;pointer-events:none;color:#eef7ff;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.oorbit-drive-hud.is-hidden{display:none}
.oorbit-drive-speed{
  position:absolute;right:24px;bottom:24px;display:grid;justify-items:end;
  padding:10px 13px;border:1px solid rgba(184,218,244,.2);border-radius:14px;
  background:rgba(5,11,17,.62);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(0,0,0,.28)
}
.oorbit-drive-speed strong{font-size:30px;line-height:.9;font-variant-numeric:tabular-nums}
.oorbit-drive-speed span{margin-top:4px;font-size:9px;letter-spacing:.2em;color:#9fb6c8}
.oorbit-drive-road{
  position:absolute;left:50%;top:18px;transform:translateX(-50%);
  padding:7px 11px;border-radius:999px;background:rgba(5,11,17,.58);
  border:1px solid rgba(188,218,242,.16);font-size:10px;letter-spacing:.04em;
  color:#cfe0ed;backdrop-filter:blur(10px)
}
.oorbit-drive-help{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  max-width:calc(100vw - 220px);padding:6px 10px;border-radius:10px;
  background:rgba(4,9,14,.46);font-size:9px;letter-spacing:.04em;color:#9fb1c0
}
.oorbit-drive-cockpit{position:absolute;left:50%;bottom:-2px;width:min(780px,68vw);height:150px;transform:translateX(-50%);overflow:hidden}
.oorbit-drive-hood{
  position:absolute;left:50%;bottom:-58px;width:82%;height:126px;transform:translateX(-50%);
  border-radius:52% 52% 8% 8%/36% 36% 12% 12%;
  background:linear-gradient(180deg,rgba(38,44,49,.96),rgba(11,14,17,.99));
  box-shadow:inset 0 2px rgba(255,255,255,.09),0 -8px 34px rgba(0,0,0,.24)
}
.oorbit-drive-hood::before{
  content:"";position:absolute;left:50%;top:15px;width:62%;height:2px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(206,229,241,.24),transparent)
}
.oorbit-drive-wheel{
  position:absolute;left:50%;bottom:-22px;width:118px;height:118px;transform:translateX(-50%);
  border:9px solid rgba(20,24,28,.98);border-radius:50%;box-shadow:0 0 0 2px rgba(154,176,190,.18),0 10px 18px rgba(0,0,0,.38)
}
.oorbit-drive-wheel::before,.oorbit-drive-wheel::after,.oorbit-drive-wheel span{
  content:"";position:absolute;left:50%;top:50%;width:9px;height:48px;border-radius:5px;background:#171b1f;transform-origin:50% 0
}
.oorbit-drive-wheel::before{transform:translate(-50%,-3px) rotate(118deg)}
.oorbit-drive-wheel::after{transform:translate(-50%,-3px) rotate(-118deg)}
.oorbit-drive-wheel span{transform:translate(-50%,-3px)}
canvas.is-driving{cursor:crosshair}
@media(max-width:700px){
  .oorbit-drive-cockpit{width:90vw;height:118px}
  .oorbit-drive-wheel{width:92px;height:92px}
  .oorbit-drive-help{display:none}
  .oorbit-drive-speed{right:12px;bottom:12px}
}


/* OOChat News → World context ----------------------------------------- */
.oorbit-news-world-marker{
  position:absolute;left:0;top:0;z-index:26;display:grid;gap:2px;max-width:min(330px,52vw);
  padding:8px 10px;border:1px solid rgba(132,211,255,.48);border-radius:11px;
  background:linear-gradient(180deg,rgba(7,18,30,.94),rgba(5,11,19,.88));
  color:#eef8ff;text-align:left;box-shadow:0 10px 34px rgba(0,0,0,.32),0 0 22px rgba(73,185,255,.13);
  backdrop-filter:blur(12px);pointer-events:auto;cursor:pointer
}
.oorbit-news-world-marker.is-hidden{display:none}
.oorbit-news-world-marker small{font-size:8px;letter-spacing:.15em;color:#7fd7ff}
.oorbit-news-world-marker strong{max-width:300px;font-size:10px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oorbit-news-world-marker span{font-size:9px;color:#a9c2d3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oorbit-news-world-marker::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:16px;background:linear-gradient(rgba(126,211,255,.72),transparent)}

/* C546: when NASA took the SDO picture, under its switch (it used to be printed across the Sun). */
.oorbit-sun-sdo-time { margin: 6px 2px 2px; font: 600 11px/1.35 "Inter", system-ui, sans-serif; color: rgba(255, 214, 160, 0.78); letter-spacing: 0.01em; }