body[data-theme="orbit"] {
  /* integration fix: the opaque sky sits under the star canvas, not over it */
  --scene-bg: linear-gradient(#030b14, #071421 75%, #102634) fixed #030b14;
  --scene-art:
    radial-gradient(ellipse 84% 57% at 50% 136%,
      #040d17 96.5%,
      rgb(116 219 242 / 14%) 97.5%,
      rgb(196 246 255 / 86%) 98.5%,
      rgb(74 176 209 / 65%) 99.3%,
      #163344 99.8%, transparent 100%),
    radial-gradient(ellipse at 66% 35%, rgb(26 55 79 / 22%), transparent 45%);
  --scene-overlay: none;
  --scene-detail: none;

  --text: #eaf4f9;
  --muted: #c0d0dc;
  --faint: #94abb9;
  --link: #e7f4fa;
  --line: rgb(185 225 239 / 44%);
  --focus-color: #bdeeff;

  --player-bg: rgb(7 19 31 / 16%);
  --player-border: rgb(196 237 248 / 76%);
  --player-shadow: rgb(0 5 13 / 55%);
  --player-glow: 0 0 24px rgb(139 219 244 / 18%), inset 0 0 19px rgb(178 230 248 / 9%);
  --screen-bg: rgb(5 16 27 / 72%);

  --glass-bg: rgb(19 38 52 / 55%);
  --glass-border: rgb(190 229 242 / 35%);
  --glass-text: #edf8fc;
  --glass-shadow: rgb(0 7 18 / 38%);

  --live-color: #f05a57;
  --heart-color: #e2f5ff;
  --heart-mine: #ffffff;
  --heart-glow: rgb(170 230 255 / 72%);

  --meta-x: -510px;
  --drift: 18px;
  --delay: 0s;
}

body[data-theme="orbit"] .scene::before {
  inset: auto;
  left: 10vw;
  top: 37vh;
  width: 100vw;
  height: 36vh;
  border: 1px solid rgb(188 233 246 / 52%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgb(130 214 242 / 19%);
  transform: rotate(-26deg);
}

body[data-theme="orbit"] .scene::after {
  background:
    radial-gradient(ellipse at 28% 94%, rgb(208 232 230 / 28%), transparent 19%),
    radial-gradient(ellipse at 63% 93%, rgb(139 184 195 / 22%), transparent 21%),
    repeating-linear-gradient(164deg,
      transparent 0 8px,
      rgb(180 209 208 / 5%) 9px 11px,
      transparent 14px 31px),
    radial-gradient(ellipse 83% 56% at 50% 136%,
      transparent 96%, rgb(6 20 33 / 27%) 100%);
  -webkit-mask-image: radial-gradient(ellipse 84% 57% at 50% 136%,
    #000 96.5%, transparent 97%);
  mask-image: radial-gradient(ellipse 84% 57% at 50% 136%,
    #000 96.5%, transparent 97%);
}

body[data-theme="orbit"] .player {
  background-image: linear-gradient(128deg,
    rgb(209 245 255 / 7%),
    transparent 17% 76%,
    rgb(130 215 241 / 5%));
}

/* The same orbit peeks across the glass at its lower-right corner. */
body[data-theme="orbit"] .player::after {
  content: "";
  position: absolute;
  z-index: 3;
  left: calc(10vw - (100vw - var(--player-width)) / 2);
  top: calc(37vh - (100dvh - var(--player-width) * 16 / 9) / 2);
  width: 100vw;
  height: 36vh;
  border: 1px solid rgb(202 242 252 / 83%);
  border-radius: 50%;
  box-shadow: 0 0 8px rgb(149 226 251 / 34%);
  clip-path: inset(0 0 0 74%);
  transform: rotate(-26deg);
  pointer-events: none;
}

body[data-theme="orbit"] .pill,
body[data-theme="orbit"] .unmute,
body[data-theme="orbit"] .heart {
  background-image: linear-gradient(155deg, rgb(220 248 255 / 9%), transparent 62%);
}

body[data-theme="orbit"] .heart {
  box-shadow:
    0 4px 18px var(--glass-shadow),
    inset 0 0 13px rgb(187 235 252 / 12%),
    0 0 13px rgb(144 220 246 / 16%);
}

body[data-theme="orbit"] .hearts .h {
  font-size: 19px;
  text-shadow: 0 0 7px var(--heart-glow), 0 0 16px rgb(148 214 244 / 36%);
}

@media (max-width: 899px) {
  body[data-theme="orbit"] {
    --scene-art:
      radial-gradient(ellipse at 69% 44%, rgb(27 61 85 / 24%), transparent 44%),
      linear-gradient(#030b14, #071522);
  }

  body[data-theme="orbit"] .scene::before,
  body[data-theme="orbit"] .scene::after,
  body[data-theme="orbit"] .player::after {
    display: none;
  }

  body[data-theme="orbit"] .player {
    background-image: linear-gradient(145deg, rgb(38 76 95 / 8%), transparent 55%);
  }
}