:root { color-scheme: dark; font-family: Arial, Helvetica, sans-serif; background: #030405; color: #f0f1f2; }
* { box-sizing: border-box; }
body { margin: 0; }
.experience { position: relative; width: 100%; height: 100svh; min-height: 560px; overflow: hidden; background: #030405; }
#flight { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#flight.dragging { cursor: grabbing; }
#flight:focus-visible { outline: 1px solid #ffffff50; outline-offset: -4px; }
header, footer { position: absolute; left: 4%; right: 4%; display: flex; align-items: center; justify-content: space-between; }
header { top: 30px; font-size: 10px; letter-spacing: .19em; }
header a { color: #ced0d3; text-decoration: none; padding: 10px 0; }
header a span { color: #666; margin: 0 12px; }
.edition { color: #72767a; font-size: 9px; }
.heading { position: absolute; left: 4%; top: 110px; pointer-events: none; }
.heading p { color: #969ba0; font-size: 9px; letter-spacing: .32em; margin: 0 0 14px; }
h1 { font-size: clamp(26px, 3.9vw, 60px); letter-spacing: .22em; font-weight: 400; margin: 0; }
.scene-caption { position: absolute; left: 4%; bottom: 224px; display: flex; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #bfc4c9; pointer-events:none; }
.signal { width: 4px; height: 4px; background: #ed3e43; border-radius: 50%; box-shadow: 0 0 12px #e92732; }
.telemetry { position: absolute; right: 4%; bottom: 213px; display: flex; gap: 36px; font-variant-numeric: tabular-nums; pointer-events: none; }
.telemetry div { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 8px; }
.telemetry span { grid-column: 1 / 3; color: #727a82; font-size: 8px; letter-spacing: .2em; }
.telemetry strong { font-size: 30px; font-weight: 300; }
.telemetry small { font-size: 9px; color: #7c858e; }
footer { bottom: 20px; display: block; padding-top: 12px; background: linear-gradient(transparent,#030405b0); }
.timeline-row { display:flex; align-items:center; gap:20px; }
#playhead { color:#a3abb3; font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#timeline { flex:1; min-width:0; height:28px; margin:0; accent-color:#e1e7eb; cursor:ew-resize; }
.chapters { display:flex; justify-content:space-between; gap:12px; margin:0 0 12px; }
.chapters button { border:0; min-width:0; min-height:32px; padding:0 4px; background:none; backdrop-filter:none; font-size:9px; color:#929ba4; }
.chapters button:hover { color:white; }
.controls { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.controls button { min-width:112px; }
.controls #replay { min-width:173px; margin-left:8px; }
#view-hint { color:#838c96; font-size:10px; margin:12px 0 0; text-align:right; letter-spacing:.03em; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
input:focus-visible, select:focus-visible { outline:2px solid white; outline-offset:3px; }
.credit { font-size: 9px; letter-spacing: .2em; color: #b2b7bd; line-height: 1.7; }
.credit span { display: block; color: #676e75; font-size: 10px; letter-spacing: .02em; margin-top: 5px; }
button { display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px solid #ffffff50; background: #ffffff08; backdrop-filter: blur(15px); color: #eee; border-radius: 2px; font: 11px Arial,sans-serif; letter-spacing: .07em; min-width: 173px; min-height: 47px; cursor: pointer; transition: background .2s, border-color .2s; }
button:hover { background: #ffffff17; border-color: #ffffffbb; }
button:focus-visible, a:focus-visible { outline: 2px solid white; outline-offset: 5px; }
button:disabled { opacity: .4; cursor: wait; }
button svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.progress { position: absolute; bottom: 0; height: 2px; width: 100%; background: #ffffff0b; }
.progress div { width: 100%; height: 100%; background: #cdd4d9; transform: scaleX(0); transform-origin: left; }
#error { position: absolute; top: 45%; left: 10%; right: 10%; text-align: center; line-height: 1.8; }
.thrust-control { position:absolute; right:4%; top:43%; transform:translateY(-50%); width:176px; display:grid; gap:10px; text-align:center; }
.thrust-label { font-size:8px; letter-spacing:.2em; color:#a3acb4; }
#thrust { width:100%; min-width:0; min-height:112px; display:flex; flex-direction:column; gap:9px; border-color:#ee5158; background:linear-gradient(145deg,#67242ce6,#24141bea); box-shadow:0 0 32px #e6323320; touch-action:none; user-select:none; -webkit-user-select:none; }
#thrust strong { font-size:12px; letter-spacing:.12em; font-weight:500; }
#thrust small { font-size:8px; letter-spacing:.08em; opacity:.7; }
#thrust svg { width:24px; height:24px; }
#thrust:hover { border-color:#ffb7bb; background:#84303bea; }
#thrust-state { font-size:9px; color:#a3acb4; }
#moon-arrival { position:absolute; top:25%; left:4%; right:4%; text-align:center; pointer-events:none; text-shadow:0 2px 18px #000; }
#moon-arrival[hidden] { display:none; }
#moon-arrival p { font-size:9px; letter-spacing:.24em; color:#aab7c6; }
#moon-arrival h2 { margin:14px 0; font-weight:400; font-size:clamp(24px,4vw,54px); letter-spacing:.18em; }
#moon-arrival span { font-size:11px; color:#c3cbd6; }
#thrust[aria-pressed="true"] { background:#dcecf0; color:#111; border-color:white; }
@media(max-width: 620px) {
  .experience { min-height: 700px; }
  header { top: 17px; }
  .edition { display: none; }
  .heading { top: 85px; }
  .heading p { font-size: 8px; }
  footer { bottom: 15px; padding-top: 8px; }
  .timeline-row { gap:12px; }
  .chapters { gap:4px; margin-bottom:8px; }
  .chapters button { font-size:8px; min-height:36px; }
  .controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
  .controls button, .controls #replay { min-width:0; margin:0; width:100%; }
  #view-hint { text-align:center; font-size:9px; margin-top:10px; }
  .credit { font-size: 7px; max-width: 46%; }
  .credit span { font-size: 9px; }
  button { min-width: 143px; min-height: 46px; font-size: 10px; gap: 8px; }
  .scene-caption { bottom: 240px; font-size: 8px; }
  .telemetry { bottom: 190px; right: auto; left: 4%; gap: 28px; }
  .telemetry strong { font-size: 23px; }
  .thrust-control { top:auto; bottom:295px; transform:none; width:138px; gap:7px; }
  #thrust { min-height:100px; }
  #thrust strong { font-size:11px; }
}
@media(prefers-reduced-motion: reduce) { button { transition: none; } }