[data-cinematic] { --journey-header: 94px; --journey-height: 100svh; }
body[data-page="space"] { overflow-x: clip; background: #090b11; }
:where([data-cinematic]) .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
:where([data-cinematic]) .js-only { display: none; }
.journey-ready :where([data-cinematic]) .js-only { display: block; }
:where([data-cinematic]).journey { position: relative; }
:where([data-cinematic]) .journey-stage { position: relative; }
:where([data-cinematic]) .journey-backdrop { display: none; }
.journey-animated :where([data-cinematic]) .journey-backdrop { display: block; position: absolute; inset: 0; overflow: clip; background: #090b11; }
:where([data-cinematic]) .journey-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; }
:where([data-cinematic]) .journey-backdrop[data-scene="overview"] img { object-fit: contain; }
:where([data-cinematic]) .journey-scene { position: relative; min-height: 100svh; overflow: clip; isolation: isolate; background: #090b11; scroll-margin-top: var(--journey-header); }
:where([data-cinematic]) .space-hero { display: flex; flex-direction: column; padding: 136px 0 110px; }
:where([data-cinematic]) .space-heading, :where([data-cinematic]) .space-caption { width: min(100%, 1600px); margin-inline: auto; padding-inline: clamp(24px, 5vw, 88px); }
:where([data-cinematic]) .space-heading { position: relative; z-index: 3; pointer-events: none; }
:where([data-cinematic]) .space-eyebrow { margin: 0 0 21px; font: 12px/1.6 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: #cdb796; }
:where([data-cinematic]) .space-heading h1 { margin: 0; color: #edf0f5; font: 400 clamp(31px, 3.8vw, 62px)/1.24 var(--font-display); letter-spacing: -.035em; }
:where([data-cinematic]) .space-subline { margin: 21px 0 0; max-width: 48ch; color: #b5becd; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.7; }
:where([data-cinematic]) .system-composition { position: relative; width: 100%; max-width: 1920px; aspect-ratio: 1672 / 940; margin: 24px auto; align-self: center; flex-shrink: 0; }
:where([data-cinematic]) .system-camera { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
:where([data-cinematic]) .system-art { display: block; width: 100%; height: 100%; object-fit: contain; }
:where([data-cinematic]) #planet-labels { position: absolute; inset: 0; }
:where([data-cinematic]) .planet-label { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); padding: 6px; color: #eef1f7; background: rgba(4, 7, 13, .63); border: 1px solid transparent; border-radius: 3px; text-shadow: 0 1px 6px #000; white-space: nowrap; font: 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .09em; }
:where([data-cinematic]) button.planet-label { cursor: pointer; min-height: 32px; transition: color .2s, background .2s, border-color .2s; }
:where([data-cinematic]) button.planet-label:hover, :where([data-cinematic]) .planet-label[aria-pressed="true"] { color: #fce2bc; border-color: #ad94756e; background: #090b11d9; }
:where([data-cinematic]) .satellite-label { color: #e2c9a3; font-size: 10px; }
:where([data-cinematic]) .planet-key { display: none; }
:where([data-cinematic]) .space-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; position: relative; z-index: 3; margin-block: auto 0; color: #99a4b5; font: 10px/1.7 var(--font-mono); pointer-events: none; }
:where([data-cinematic]) .space-caption p { margin: 0; padding: 4px 8px; background: rgba(4, 7, 13, .65); }
:where([data-cinematic]) .space-caption .concept-note { color: #cdb796; }
:where([data-cinematic]) .inspection-ring { position: absolute; left: var(--body-x); top: var(--body-y); width: var(--body-size, 11%); aspect-ratio: 1; border: 1px solid #e4caa7ba; box-shadow: 0 0 20px #f5ce921a, inset 0 0 20px #f5ce921a; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
:where([data-cinematic]) .body-inspection { position: absolute; z-index: 5; bottom: 148px; right: clamp(40px, 7vw, 120px); min-width: 170px; padding: 14px 44px 16px 18px; background: #090b11dc; border: 1px solid #e0c49838; border-radius: 4px; backdrop-filter: blur(10px); }
:where([data-cinematic]) .body-inspection p { margin: 0; }
:where([data-cinematic]) #inspection-name { font: 15px/1.8 var(--font-mono); color: #f2e2c8; }
:where([data-cinematic]) #inspection-type { font: 11px/1.8 var(--font-mono); color: #aeb6c3; }
:where([data-cinematic]) .inspection-close { position: absolute; right: 2px; top: 3px; width: 38px; height: 38px; border: 0; background: transparent; color: #c5ccda; cursor: pointer; font-size: 23px; }
:where([data-cinematic]) .explore-moon { display: inline-block; margin-top: 13px; padding: 8px 0; color: #e6ca9d; font-size: 12px; border-bottom: 1px solid #e6ca9d60; }
:where([data-cinematic]) .body-picker { display: none !important; }
:where([data-cinematic]) .scroll-cue { position: absolute; z-index: 4; bottom: 91px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 13px; width: max-content; padding: 10px; color: #d0c4b3; font: 10px/1.5 var(--font-mono); letter-spacing: .12em; }
:where([data-cinematic]) .scroll-line { width: 1px; height: 27px; background: linear-gradient(#ccb596aa, #ccb59612); }
:where([data-cinematic]) .destination-scene { min-height: 100svh; background: radial-gradient(ellipse at 75% 20%, #25364b 0, #111721 30%, #07090e 80%); }
:where([data-cinematic]) .destination-art, :where([data-cinematic]) .destination-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
:where([data-cinematic]) .destination-art { transform-origin: 50% 50%; will-change: transform; }
:where([data-cinematic]) .destination-art img { object-fit: cover; object-position: 50% 50%; }
:where([data-cinematic]) .scene-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #07091038 0, transparent 32%, transparent 57%, #06080db0 100%); }
:where([data-cinematic]) .scene-caption { position: absolute; z-index: 2; left: clamp(28px, 6vw, 112px); bottom: clamp(140px, 20vh, 220px); max-width: calc(100% - 180px); }
:where([data-cinematic]) .scene-caption h2 { margin: 0; font: 400 clamp(27px, 3.2vw, 52px)/1.35 var(--font-display); letter-spacing: -.035em; text-shadow: 0 2px 25px #02030780; }
:where([data-cinematic]) .scene-caption .space-eyebrow { font-size: 11px; margin-bottom: 18px; }
:where([data-cinematic]) .return-system { display: inline-flex; gap: 18px; min-height: 44px; align-items: center; margin-top: 24px; color: #e7d4b4; font: 12px/1.6 var(--font-mono); border-bottom: 1px solid #e7d4b454; }
:where([data-cinematic]) .asset-fallback { display: none; position: absolute; top: 42%; left: 10%; right: 10%; text-align: center; color: #e2d5c1; font: 15px/1.8 var(--font-mono); }
:where([data-cinematic]) .asset-fallback span { display: block; margin: 12px auto 0; max-width: 42ch; color: #aeb6c5; font: 13px/1.8 var(--font-body); }
:where([data-cinematic]) [data-asset="error"] .asset-fallback { display: block; }
.journey-ready :where([data-cinematic]) [data-asset="loading"] .asset-fallback { display: block; padding: 18px 20px; width: fit-content; max-width: 80%; margin-inline: auto; background: #070a12db; border: 1px solid #cbb38b24; border-radius: 4px; font-size: 13px; }
.journey-animated :where([data-cinematic]) .journey-scene[data-asset="loading"] { background: transparent; }
.journey-animated :where([data-cinematic]) [data-asset="loading"] :is(.destination-art, .scene-shade, .scene-caption, .space-heading, .system-composition, .body-picker, .scroll-cue, .space-caption) { visibility: hidden; }
:where([data-cinematic]) [data-asset="error"] :is(.system-art, .destination-art) { visibility: hidden; }
:where([data-cinematic]) .journey-nav { position: fixed; z-index: 12; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid #d6d8e21a; border-radius: 30px; background: #070a11b0; backdrop-filter: blur(15px); }
:where([data-cinematic]) .journey-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font: 10px/1.5 var(--font-mono); letter-spacing: .035em; color: #aab0be; transition: color .2s; }
:where([data-cinematic]) .journey-nav a[aria-current] { color: #f0d6ae; }
:where([data-cinematic]) .nav-dot { width: 4px; height: 4px; border-radius: 100%; background: currentColor; opacity: .4; }
:where([data-cinematic]) [aria-current] .nav-dot { opacity: 1; box-shadow: 0 0 10px #e8c7967d; }
:where([data-cinematic]) .motion-toggle { position: fixed; z-index: 12; right: 28px; bottom: 33px; min-height: 35px; padding: 8px 10px; border: 0; border-bottom: 1px solid #aeb3bf30; background: #070a1175; color: #acb2bf; font: 10px/1.5 var(--font-mono); cursor: pointer; }
:where([data-cinematic]) .star-drift { display: none; pointer-events: none; }
.journey-ready :where([data-cinematic]) .journey-nav { transition: opacity .2s; }
.journey-past :where([data-cinematic]) .journey-nav, .journey-past :where([data-cinematic]) .motion-toggle { opacity: 0; pointer-events: none; visibility: hidden; }
/* The document is a complete illustrated reading sequence until JS enables the stage. */
.journey-animated :where([data-cinematic]).journey { height: 600svh; }
.journey-animated :where([data-cinematic]) .journey-stage { position: sticky; top: 0; height: var(--journey-height); overflow: clip; isolation: isolate; }
.journey-animated :where([data-cinematic]) .journey-scene { position: absolute; inset: 0; min-height: 0; height: 100%; padding-bottom: 90px; opacity: 0; visibility: hidden; will-change: opacity; }
.journey-animated :where([data-cinematic]) .journey-scene[data-visible="true"] { visibility: visible; }
.journey-animated :where([data-cinematic]) .space-caption { position: absolute; bottom: 30px; left: 0; right: 0; }
.journey-animated :where([data-cinematic]) .journey-nav, .journey-animated :where([data-cinematic]) .motion-toggle { position: absolute; }
.journey-animated :where([data-cinematic]) .star-drift { display: block; position: absolute; z-index: 6; inset: -5%; opacity: var(--star-opacity, .18); background-image: radial-gradient(1px 1px at 11% 12%, #c2d2ed 98%, transparent), radial-gradient(1px 1px at 24% 26%, #c2d2ed 98%, transparent), radial-gradient(1px 1px at 41% 9%, #c2d2ed 98%, transparent), radial-gradient(1px 1px at 64% 15%, #e8d3b4 98%, transparent), radial-gradient(1px 1px at 82% 38%, #c2d2ed 98%, transparent); transform: translateY(var(--star-shift, 0px)); }
.journey-static :where([data-cinematic]) .system-camera { transform: none !important; }
.journey-static :where([data-cinematic]) .scene-caption { opacity: 1 !important; }
.journey-static :where([data-cinematic]) .destination-art { transform: none !important; }
@media (min-width: 1000px) {
  :where([data-cinematic]) .space-hero { height: 100svh; min-height: 650px; padding-top: 0; }
  :where([data-cinematic]) .space-heading { position: absolute; top: clamp(112px, 13vh, 150px); left: 0; right: 0; }
  :where([data-cinematic]) .system-composition { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(100%, calc(100svh * 1672 / 940)); margin: 0; }
  :where([data-cinematic]) .journey-nav { left: auto; right: 28px; bottom: auto; top: 50%; transform: translateY(-50%); flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 8px; border: 0; background: transparent; backdrop-filter: none; }
  :where([data-cinematic]) .journey-nav a { font-size: 10px; }
  .journey-animated :where([data-cinematic]) .space-caption { bottom: 25px; }
  :where([data-cinematic]) .motion-toggle { bottom: 70px; }
  :where([data-cinematic]) .scroll-cue { bottom: 42px; }
}
@media (max-width: 999px) {
  :where([data-cinematic]) #planet-labels { display: none; }
  :where([data-cinematic]) .planet-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 18px; list-style: none; width: min(100%, 620px); margin: 0 auto 36px; padding: 0 24px; }
  :where([data-cinematic]) .planet-key li { display: grid; gap: 4px; }
  :where([data-cinematic]) .planet-key span { font: 12px/1.5 var(--font-mono); color: #e8eaf0; }
  :where([data-cinematic]) .planet-key small { font: 10px/1.5 var(--font-body); color: #aab0bf; }
  .journey-ready :where([data-cinematic]) .planet-key { display: none; }
  .journey-ready :where([data-cinematic]) .body-picker { display: flex !important; align-items: center; justify-content: center; gap: 14px; margin: 14px 24px 36px; z-index: 4; }
  :where([data-cinematic]) .body-picker label { font: 10px/1.6 var(--font-mono); color: #bca98f; }
  :where([data-cinematic]) .body-picker select { max-width: 220px; width: 55%; height: 44px; padding: 8px 12px; border: 1px solid #c6ad893c; border-radius: 3px; color: #e1d8ca; background: #0f131c; font: 12px/1.6 var(--font-mono); }
  .journey-animated :where([data-cinematic]) .space-heading { position: absolute; top: calc(var(--journey-header) + 30px); left: 0; right: 0; }
  .journey-animated :where([data-cinematic]) .system-composition { position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); margin: 0; }
  .journey-animated :where([data-cinematic]) .body-picker { position: absolute; top: calc(47% + 100vw * 940 / 1672 / 2 + 16px); left: 0; right: 0; margin: 0 24px; }
  .journey-animated :where([data-cinematic]) .space-caption { bottom: 83px; justify-content: center; font-size: 9px; gap: 4px; padding: 0 14px; }
  :where([data-cinematic]) .space-caption { justify-content: center; }
  :where([data-cinematic]) .scene-caption { bottom: 135px; max-width: calc(100% - 56px); }
  :where([data-cinematic]) .body-inspection { right: 24px; left: 24px; bottom: 150px; min-width: 0; }
  .journey-animated :where([data-cinematic]) .body-inspection { top: calc(47% + 100vw * 940 / 1672 / 2 + 70px); bottom: auto; padding-block: 9px; }
  :where([data-cinematic]) .body-inspection .explore-moon { position: absolute; right: 52px; top: 5px; margin: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 5px; }
  :where([data-cinematic]) .body-inspection .inspection-close { top: 5px; width: 44px; height: 44px; }
  :where([data-cinematic]) .scroll-cue { bottom: 143px; }
  .body-inspecting :where([data-cinematic]) .scroll-cue { opacity: 0; pointer-events: none; }
  :where([data-cinematic]) .motion-toggle { right: 15px; bottom: 83px; min-width: 44px; min-height: 44px; font-size: 9px; padding: 6px 4px; }
  .journey-animated :where([data-cinematic]) .motion-toggle { bottom: auto; top: calc(var(--journey-header) + 11px); }
  .journey-animated :where([data-cinematic]) .scroll-cue { bottom: 137px; }
}
@media (max-width: 600px) {
  [data-cinematic] { --journey-header: 118px; }
  :where([data-cinematic]) .space-hero { padding-top: 160px; }
  :where([data-cinematic]) .space-heading h1 { font-size: clamp(26px, 7.1vw, 38px); }
  :where([data-cinematic]) .space-eyebrow { margin-bottom: 16px; font-size: 10px; }
  :where([data-cinematic]) .space-subline { margin-top: 16px; max-width: 29ch; font-size: 13px; }
  .journey-animated :where([data-cinematic]) .space-heading { top: calc(var(--journey-header) + 27px); }
  :where([data-cinematic]) .system-composition { margin-block: 32px 22px; }
  :where([data-cinematic]) .scene-caption h2 { font-size: clamp(24px, 6.4vw, 37px); }
  :where([data-cinematic]) .scene-caption .space-eyebrow { font-size: 9px; }
  :where([data-cinematic]) .return-system { font-size: 11px; margin-top: 20px; }
  :where([data-cinematic]) .journey-nav { gap: 0; padding-inline: 8px; bottom: 20px; }
  :where([data-cinematic]) .journey-nav a { padding: 11px 10px; min-height: 44px; font-size: 9px; }
  body[data-page="space"] .d117 { padding: 38px 24px; gap: 28px; }
  body[data-page="space"] .d121 { gap: 22px; }
  body[data-page="space"] .d123 { font-size: 11px; line-height: 1.7; }
}
@media (max-width: 999px) and (orientation: portrait) {
  .journey-animated :where([data-cinematic]).journey:not([data-active-scene="overview"]) .motion-toggle { right: auto; left: 24px; }
}
@media (max-height: 740px) and (orientation: portrait) {
  .journey-animated :where([data-cinematic]) .space-heading { top: calc(var(--journey-header) + 17px); }
  .journey-animated :where([data-cinematic]) .space-subline { margin-top: 10px; font-size: 12px; }
  .journey-animated :where([data-cinematic]) .space-eyebrow { margin-bottom: 9px; }
  .journey-animated :where([data-cinematic]) .system-composition { top: 48%; }
  .journey-animated :where([data-cinematic]) .body-picker { top: calc(48% + 100vw * 940 / 1672 / 2 + 4px); }
  .journey-animated :where([data-cinematic]) .body-inspection { top: calc(48% + 100vw * 940 / 1672 / 2 + 54px); padding-block: 5px; }
  .journey-animated :where([data-cinematic]) .scroll-cue { bottom: 100px; gap: 6px; }
  .journey-animated :where([data-cinematic]) .scroll-line { height: 17px; }
  .journey-animated :where([data-cinematic]) .space-caption { bottom: 76px; }
}
@media (max-height: 600px) and (orientation: landscape) {
  .journey-animated :where([data-cinematic]) .space-heading { top: calc(var(--journey-header) + 10px); max-width: 70%; margin: 0; padding-inline: 28px; }
  :where([data-cinematic]) .space-heading h1 { font-size: 24px; }
  :where([data-cinematic]) .space-subline, :where([data-cinematic]) .space-heading .space-eyebrow { display: none; }
  .journey-animated :where([data-cinematic]) .system-composition { top: 52%; width: min(100%, calc(100svh * 1672 / 940)); }
  .journey-animated :where([data-cinematic]) .body-picker { top: calc(var(--journey-header) + 10px); right: 22px; left: auto; margin: 0; }
  :where([data-cinematic]) .body-picker label { display: none; }
  :where([data-cinematic]) .body-picker select { width: 160px; height: 44px; }
  .journey-animated :where([data-cinematic]) .body-inspection { top: auto; bottom: 87px; left: auto; right: 24px; min-width: 220px; }
  .journey-animated :where([data-cinematic]) .scroll-cue { bottom: 60px; }
  :where([data-cinematic]) .scroll-line { display: none; }
  .journey-animated :where([data-cinematic]) .space-caption { bottom: 7px; justify-content: flex-start; }
  :where([data-cinematic]) .journey-nav { bottom: 10px; }
  :where([data-cinematic]) .scene-caption { bottom: 90px; }
  :where([data-cinematic]) .scene-caption h2 { font-size: 26px; }
  .journey-animated :where([data-cinematic]) .motion-toggle { top: auto; bottom: 15px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  /* Preserve Earth and the refuge together when there is very little height. */
  :where([data-cinematic]) .destination-art { top: var(--journey-header); height: calc(100% - var(--journey-header)); }
  :where([data-cinematic]) .destination-art img { object-fit: contain; }
  .journey-animated :where([data-cinematic]) .journey-backdrop:not([data-scene="overview"]) { top: var(--journey-header); height: calc(100% - var(--journey-header)); }
  :where([data-cinematic]) .journey-backdrop:not([data-scene="overview"]) img { object-fit: contain; }
}
@media (prefers-reduced-motion: reduce) { :where([data-cinematic]) *, :where([data-cinematic]) *::before, :where([data-cinematic]) *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }