/* The living-system expansion sits on the unchanged shared website styles. */
.journey-animated :where([data-cinematic]).journey { height: 950svh; }
:where([data-cinematic]) .hero-actions { margin-top: 24px; align-items: center; gap: 20px; pointer-events: auto; }
.journey-ready :where([data-cinematic]) .hero-actions { display: flex; }
:where([data-cinematic]) .explore-system-button, :where([data-cinematic]) .artwork-toggle, :where([data-cinematic]) .inspect-in-system, :where([data-cinematic]) .ending-explore, :where([data-cinematic]) .explorer-launcher { cursor: pointer; font-family: var(--font-mono); }
:where([data-cinematic]) .explore-system-button { display: inline-flex; align-items: center; gap: 12px; min-height: 46px; padding: 12px 17px; border: 1px solid #e6d0ac65; border-radius: 4px; background: #12151bdd; color: #f2dfc2; font-size: 11px; letter-spacing: .01em; box-shadow: 0 4px 22px #0004; }
:where([data-cinematic]) .explore-system-button:hover { background: #27251f; border-color: #ebd1a7; }
:where([data-cinematic]) .live-dot { width: 5px; height: 5px; border-radius: 50%; background: #d9e8c4; box-shadow: 0 0 9px #d9e8c477; }
:where([data-cinematic]) .artwork-toggle { color: #abb3c1; font-size: 10px; min-height: 44px; padding: 6px 0; border: 0; background: transparent; border-bottom: 1px solid #aeb5c12c; }
:where([data-cinematic]) .artwork-toggle:hover { color: #f0dfc5; }
:where([data-cinematic]) .depth-foreground { position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover; pointer-events: none; transform-origin: 50% 100%; opacity: 0; z-index: 1; will-change: transform; }
:where([data-cinematic]) .scene-caption { z-index: 4; }
:where([data-cinematic]) .scene-whisper { margin: 15px 0 0; color: #c0bab5; font-size: 13px; line-height: 1.6; }
:where([data-cinematic]) .continue-journey, :where([data-cinematic]) .ending-explore { display: inline-flex; gap: 14px; min-height: 44px; align-items: center; margin-top: 24px; color: #e7d4b4; font: 12px/1.6 var(--font-mono); border: 0; border-bottom: 1px solid #e7d4b454; background: transparent; padding: 0; }
:where([data-cinematic]) .ending-actions { display: flex; gap: 28px; flex-wrap: wrap; }
:where([data-cinematic]) .ending-explore.js-only { display: none; }
.journey-ready :where([data-cinematic]) .ending-explore.js-only { display: inline-flex; }
:where([data-cinematic]) .inspect-in-system { display: block; min-height: 36px; margin-top: 4px; padding: 6px 0; background: transparent; border: 0; color: #aab6c6; font-size: 10px; }
:where([data-cinematic]) .inspect-in-system:hover { color: #f2dcb8; }
:where([data-cinematic]) .explorer-launcher { position: fixed; z-index: 12; right: 29px; bottom: 113px; min-height: 44px; padding: 10px 13px; color: #d9cbae; background: #0b0e16c9; border: 1px solid #d6c0983a; border-radius: 4px; font-size: 10px; }
.journey-animated :where([data-cinematic]) .explorer-launcher { position: absolute; }
:where([data-cinematic]) .explorer-launcher span { font-size: 14px; margin-right: 5px; }
:where([data-cinematic]).journey[data-active-scene="overview"] .explorer-launcher { visibility: hidden; pointer-events: none; }
.journey-past :where([data-cinematic]) .explorer-launcher { opacity: 0; pointer-events: none; visibility: hidden; }
.journey-static :where([data-cinematic]) .depth-foreground { display: none; }
.journey-animated :where([data-cinematic]) .journey-scene[data-asset="loading"] .depth-foreground { visibility: hidden; }
:where([data-cinematic]) .mars-scene .scene-shade { background: linear-gradient(180deg,#08090d44,transparent 34%,transparent 56%,#130904ae); }
:where([data-cinematic]) .mars-scene::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .12; background: radial-gradient(2px 2px at 20% 82%,#edb572,transparent),radial-gradient(1px 1px at 31% 66%,#fde3b8,transparent),radial-gradient(2px 2px at 68% 84%,#e6a45a,transparent),radial-gradient(1px 1px at 86% 70%,#fddeb4,transparent); transform: translate(calc(var(--descent,0) * -45px),calc(var(--descent,0) * -22px)); }
@media (min-width:1000px) {
  :where([data-cinematic]) .journey-nav { gap: 7px; top: auto; bottom: 29px; left: 50%; right: auto; transform: translateX(-50%); flex-direction: row; align-items: center; padding: 4px 10px; border: 1px solid #d6d8e21a; background: #070a11b0; backdrop-filter: blur(15px); }
  :where([data-cinematic]) .journey-nav a { min-height: 44px; }
  .journey-animated :where([data-cinematic]) .scroll-cue { bottom: 91px; }
  :where([data-cinematic]) .body-inspection { bottom: 154px; }
  :where([data-cinematic]) #mars-outpost .scene-caption { max-width: min(680px,calc(100% - 200px)); }
}
@media (max-width:999px) {
  :where([data-cinematic]) .hero-actions { margin-top: 18px; gap: 15px; }
  :where([data-cinematic]) .explore-system-button { font-size: 10px; padding-inline: 12px; }
  :where([data-cinematic]) .artwork-toggle { font-size: 9px; }
  .journey-animated :where([data-cinematic]) .system-composition { top: 52%; }
  .journey-animated :where([data-cinematic]) .body-picker { top: calc(52% + 100vw * 940 / 1672 / 2 + 14px); }
  .journey-animated :where([data-cinematic]) .body-inspection { top: calc(52% + 100vw * 940 / 1672 / 2 + 66px); min-height: 104px; }
  :where([data-cinematic]) .body-inspection .inspect-in-system { min-height: 44px; margin-top: 1px; }
  .journey-animated :where([data-cinematic]) .scroll-cue { bottom: 109px; }
  .body-inspecting :where([data-cinematic]) .space-caption { opacity: 0 !important; }
  :where([data-cinematic]) .journey-nav { gap: 0; padding: 4px; width: calc(100% - 28px); max-width: 510px; }
  :where([data-cinematic]) .journey-nav a { min-width: 44px; min-height: 44px; flex: 1; padding: 7px 2px; font-size: 9px; justify-content: center; letter-spacing: 0; }
  :where([data-cinematic]) .journey-nav .nav-dot { display: none; }
  :where([data-cinematic]) .explorer-launcher { min-height: 44px; top: calc(var(--journey-header) + 12px); right: 17px; bottom: auto; padding: 8px 10px; font-size: 9px; }
  .journey-animated :where([data-cinematic]).journey:not([data-active-scene="overview"]) .motion-toggle { left: 24px; right: auto; }
  :where([data-cinematic]) .scene-caption { bottom: 126px; }
  :where([data-cinematic]) .scene-whisper { font-size: 11px; margin-top: 10px; }
  :where([data-cinematic]) .ending-actions { gap: 12px; }
  :where([data-cinematic]) .ending-explore, :where([data-cinematic]) .return-system, :where([data-cinematic]) .continue-journey { font-size: 10px; margin-top: 14px; }
}
@media(max-width:600px) {
  :where([data-cinematic]) .hero-actions { gap: 11px; }
  :where([data-cinematic]) .explore-system-button { gap: 7px; font-size: 9px; min-height: 44px; }
  :where([data-cinematic]) .artwork-toggle { font-size: 8px; }
  :where([data-cinematic]) .scene-caption h2 { font-size: clamp(23px,6.1vw,35px); }
  :where([data-cinematic]) .journey-nav a { font-size: 8px; }
  :where([data-cinematic]) .journey-nav { bottom: 18px; }
  :where([data-cinematic]) .scene-caption { left: 24px; max-width: calc(100% - 48px); }
}
@media(max-height:740px) and (orientation:portrait) {
  .journey-animated :where([data-cinematic]) .space-heading { top: calc(var(--journey-header) + 13px); }
  :where([data-cinematic]) .space-subline { display: none; }
  :where([data-cinematic]) .hero-actions { margin-top: 12px; }
  .journey-animated :where([data-cinematic]) .system-composition { top: 48%; }
  .journey-animated :where([data-cinematic]) .body-picker { top: calc(48% + 100vw * 940 / 1672 / 2 + 8px); }
  .journey-animated :where([data-cinematic]) .body-inspection { top: calc(48% + 100vw * 940 / 1672 / 2 + 58px); }
}
@media(max-height:600px) and (orientation:landscape) {
  :where([data-cinematic]) .hero-actions { margin-top: 7px; }
  :where([data-cinematic]) .explore-system-button { min-height: 44px; padding-block: 7px; }
  :where([data-cinematic]) .artwork-toggle { min-height: 44px; }
  .journey-animated :where([data-cinematic]) .system-composition { top: 52%; }
  .journey-animated :where([data-cinematic]) .body-picker { top: calc(var(--journey-header) + 10px); right: 22px; left: auto; }
  .journey-animated :where([data-cinematic]) .body-inspection { top: auto; bottom: 66px; min-width: 230px; }
  :where([data-cinematic]) .journey-nav { max-width: 470px; bottom: 8px; }
  :where([data-cinematic]) .explorer-launcher { top: auto; bottom: 65px; right: 20px; }
  .journey-animated :where([data-cinematic]).journey:not([data-active-scene="overview"]) .motion-toggle { left: auto; right: 20px; }
  :where([data-cinematic]) .depth-foreground { display: none; }
}