:root {
  color-scheme: dark;
  --ink: #f6f2e8;
  --muted: #aebbb1;
  --deep: #172321;
  --panel: #202d29;
  --panel-soft: #1c2925;
  --green: #c6f278;
  --orange: #ff9a61;
  --lavender: #c6b7ff;
  --track: #4a5a50;
  --edge: rgba(238,244,226,.12);
  --mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
  --display: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--deep); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { color: inherit; font: inherit; }
a { color: inherit; }
::selection { color: var(--deep); background: var(--green); }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 20; padding: 12px 16px; background: var(--green); color: var(--deep); }
.skip-link:focus { top: 12px; }
body::before { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% -18%, rgba(198,242,120,.08), transparent 45%), linear-gradient(rgba(224,242,223,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(224,242,223,.018) 1px, transparent 1px); background-size: auto, 44px 44px, 44px 44px; content: ""; pointer-events: none; }
.topbar { min-height: 72px; padding: 0 max(5vw, calc((100vw - 1320px)/2)); border-bottom: 1px solid var(--edge); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 500 10px var(--mono); letter-spacing: .08em; }
.brand-spark { width: 27px; height: 27px; display: block; flex: none; fill: var(--green); }
.wordmark i { padding: 0 4px; color: #647168; font-style: normal; }
.topbar-right { display: flex; align-items: center; gap: 22px; }
.section-label { color: #839188; font: 400 9px var(--mono); letter-spacing: .08em; }
.section-label i { padding: 0 6px; color: var(--orange); font-style: normal; }
.mode-toggle { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #425148; border-radius: 50%; background: transparent; color: var(--orange); font-size: 16px; cursor: pointer; transition: transform .25s, background .25s; }
.mode-toggle:hover { transform: rotate(22deg); background: rgba(255,154,97,.1); }
main { width: min(1320px,100%); margin: 0 auto; padding: 0 5vw; }
.intro { min-height: 225px; padding: 39px 2vw 31px; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.eyebrow { margin: 0 0 16px; color: var(--green); font: 400 9px var(--mono); letter-spacing: .13em; }
.pulse-dot, .live-dot { display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(198,242,120,.12); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 820px; margin-bottom: 0; font: 500 clamp(48px, 6.2vw, 74px)/.96 var(--display); letter-spacing: -.075em; }
h1 em { color: var(--green); font-style: normal; }
.intro-text { max-width: 570px; margin: 15px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.intro-doodle { width: 145px; height: 140px; flex: 0 0 145px; position: relative; margin-right: 7%; display: grid; place-items: center; }
.doodle-ring { position: absolute; border: 1px solid rgba(217,235,206,.18); border-radius: 50%; }
.ring-one { width: 94px; height: 94px; transform: rotate(-24deg) scaleY(.45); }
.ring-two { width: 111px; height: 111px; border-style: dashed; transform: rotate(45deg) scaleY(.55); }
.doodle-star { z-index: 1; color: var(--green); font-size: 29px; }
.doodle-planet { width: 14px; height: 14px; position: absolute; top: 25px; right: 36px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 23px rgba(255,154,97,.3); }
.doodle-caption { position: absolute; right: -22px; bottom: 1px; color: #839188; font: 400 8px/1.8 var(--mono); letter-spacing: .1em; }
.sim-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(310px,.7fr); align-items: stretch; gap: 13px; }
.scene-card, .control-panel { min-width: 0; overflow: hidden; border: 1px solid var(--edge); border-radius: 5px; background: var(--panel); }
.panel-topline { min-height: 52px; padding: 0 19px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid rgba(238,244,226,.1); }
.panel-label { color: #91a096; font: 400 8px var(--mono); letter-spacing: .09em; }
.live-dot { width: 6px; height: 6px; margin-right: 8px; box-shadow: 0 0 0 3px rgba(198,242,120,.1); }
.reference-count, .control-index { color: #68766d; font: 400 8px var(--mono); letter-spacing: .06em; white-space: nowrap; }
.scene-stage { min-height: 357px; position: relative; overflow: hidden; display: grid; align-items: center; background: radial-gradient(ellipse at 50% 52%, rgba(198,242,120,.06), transparent 56%), linear-gradient(rgba(224,242,223,.022) 1px, transparent 1px), linear-gradient(90deg, rgba(224,242,223,.022) 1px, transparent 1px), #1c2925; background-size: auto, 30px 30px, 30px 30px, auto; }
.flyby-scene { width: 100%; height: auto; min-height: 280px; overflow: visible; }
.scene-stars circle { fill: #f1f3df; opacity: .5; }
.planet-orbit { fill: none; stroke: rgba(198,242,120,.22); stroke-width: 1; stroke-dasharray: 3 8; }
.trajectory { fill: none; stroke: var(--lavender); stroke-linecap: round; stroke-width: 2.5; }
.trajectory-in { stroke-dasharray: 5 8; opacity: .63; }
.trajectory-out { stroke-dasharray: 6 7; filter: drop-shadow(0 0 5px rgba(198,183,255,.18)); }
.planet-halo { fill: rgba(255,154,97,.035); stroke: rgba(255,154,97,.18); stroke-width: 1; }
.planet { stroke: rgba(255,224,162,.75); stroke-width: 1.4; }
.planet-bands { fill: none; stroke: rgba(255,224,162,.55); stroke-width: 2; }
.approach-mark { fill: var(--orange); stroke: var(--panel); stroke-width: 3; }
.motion-arrow { stroke: var(--green); stroke-width: 1.5; }
.incoming-arrow { stroke: var(--lavender); stroke-width: 1.4; }
.diagram-label, .closest-label { fill: #87968c; font: 400 9px var(--mono); letter-spacing: .12em; }
.planet-name { fill: #fff1dd; font: 500 10px var(--mono); letter-spacing: .13em; }
.closest-label { font-size: 8px; }
.closest-label tspan { fill: var(--lavender); }
.spacecraft { fill: var(--orange); stroke: #ffe3c8; stroke-width: 1; filter: drop-shadow(0 0 7px rgba(255,154,97,.7)); }
.scene-legend { position: absolute; right: 17px; bottom: 14px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 13px; color: #839188; font: 400 7px var(--mono); letter-spacing: .08em; }
.scene-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lavender); }
.planet-dot { background: var(--green); }
.speed-readouts { min-height: 90px; padding: 14px 18px; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto; align-items: center; gap: 14px; border-top: 1px solid rgba(238,244,226,.1); }
.speed-readout { min-width: 0; }
.measure-label { display: block; margin-bottom: 8px; color: #819087; font: 400 7px var(--mono); letter-spacing: .09em; }
.speed-readout strong { color: var(--ink); font: 500 clamp(17px,2.2vw,23px) var(--mono); white-space: nowrap; }
.speed-readout strong small { color: #98a59b; font-size: 9px; font-weight: 400; }
.speed-after strong { color: var(--green); }
.speed-change { color: #74847a; font-size: 16px; }
.speed-delta { align-self: end; padding-bottom: 4px; color: var(--green); font: 500 12px var(--mono); white-space: nowrap; }
.speed-delta.is-loss { color: var(--orange); }
.control-panel { display: flex; flex-direction: column; }
.control-topline { flex: none; }
.controls-inner { padding: 18px 19px 20px; display: flex; flex: 1; flex-direction: column; }
.select-label, .direction-picker legend { margin-bottom: 8px; color: #cbd5c9; font-size: 10px; font-weight: 600; }
select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid rgba(238,244,226,.14); border-radius: 4px; outline: none; background: #1a2622; color: var(--ink); font-size: 11px; }
select:focus-visible, .sim-range:focus-visible, .direction-button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.range-control { margin-top: 22px; }
.range-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.range-heading label { color: #dce5dc; font-size: 10px; }
.range-heading output { color: var(--green); font: 400 8px var(--mono); text-align: right; }
.sim-range { width: 100%; height: 22px; margin: 10px 0 0; display: block; appearance: none; background: transparent; cursor: pointer; }
.sim-range::-webkit-slider-runnable-track { height: 3px; border-radius: 4px; background: linear-gradient(90deg,var(--green) var(--range-progress,0%),var(--track) var(--range-progress,0%)); }
.sim-range::-moz-range-track { height: 3px; border-radius: 4px; background: linear-gradient(90deg,var(--green) var(--range-progress,0%),var(--track) var(--range-progress,0%)); }
.sim-range::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5.5px; appearance: none; border: 3px solid var(--panel); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 12px rgba(198,242,120,.25); }
.sim-range::-moz-range-thumb { width: 9px; height: 9px; border: 3px solid var(--panel); border-radius: 50%; background: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 12px rgba(198,242,120,.25); }
.range-ends { display: flex; justify-content: space-between; color: #75837a; font: 400 7px var(--mono); }
.closest-control { margin-top: 19px; }
.direction-picker { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.direction-picker legend { padding: 0; }
.direction-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.direction-button { min-width: 0; min-height: 65px; padding: 9px 8px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(238,244,226,.12); border-radius: 4px; background: rgba(255,255,255,.018); color: #cbd5c9; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.direction-button:hover { transform: translateY(-1px); border-color: rgba(198,242,120,.35); }
.direction-button.is-selected { border-color: rgba(198,242,120,.45); background: rgba(198,242,120,.07); }
.direction-button[data-direction="lose"].is-selected { border-color: rgba(255,154,97,.5); background: rgba(255,154,97,.07); }
.direction-icon { width: 23px; height: 23px; flex: none; display: grid; place-items: center; border: 1px solid rgba(198,242,120,.3); border-radius: 50%; color: var(--green); font-size: 12px; }
.direction-button[data-direction="lose"] .direction-icon { border-color: rgba(255,154,97,.3); color: var(--orange); }
.direction-button strong, .direction-button small { display: block; }
.direction-button strong { font-size: 9px; }
.direction-button small { margin-top: 3px; color: #819087; font-size: 7px; line-height: 1.3; }
.planet-data { margin-top: auto; padding: 16px 12px 0; display: flex; justify-content: space-between; gap: 12px; }
.planet-data strong { color: var(--lavender); font: 500 15px var(--mono); }
.data-note { display: block; margin-top: 4px; color: #77857b; font-size: 8px; }
.turn-data { text-align: right; }
.physics-notes { padding: 48px 0 10px; }
.physics-heading { margin: 0 2px 22px; }
.physics-heading .eyebrow { margin-bottom: 9px; color: #89978d; }
.physics-heading h2 { max-width: 600px; margin: 0; font: 500 clamp(24px,3vw,34px)/1.08 var(--display); letter-spacing: -.055em; }
.physics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.physics-card { min-width: 0; min-height: 174px; padding: 17px; border: 1px solid var(--edge); border-radius: 5px; background: rgba(255,255,255,.018); }
.physics-number { color: var(--orange); font: 400 8px var(--mono); letter-spacing: .08em; }
.physics-card h3 { margin: 17px 0 9px; font: 500 16px var(--display); letter-spacing: -.03em; }
.physics-card p { margin: 0; color: #a2aea5; font-size: 9px; line-height: 1.8; }
.physics-result .physics-number { color: var(--lavender); }
.model-note { margin: 15px 2px 0; color: #75837a; font-size: 8px; line-height: 1.7; }
.source-notes { margin-top: 20px; padding: 15px 17px; border: 1px solid var(--edge); border-radius: 5px; background: rgba(255,255,255,.018); color: #9eaaa1; font-size: 9px; line-height: 1.7; }
.source-notes summary { color: #cbd5c9; font-size: 10px; font-weight: 600; cursor: pointer; }
.source-notes p { margin: 12px 0 8px; }
.source-notes a { color: var(--green); font: 400 8px var(--mono); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.footer { min-height: 78px; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr auto; gap: 22px; align-items: center; color: #87938a; font: 400 8px var(--mono); }
.footer a { color: inherit; text-decoration: none; }.footer a span:last-child { color: var(--green); }
.footer p { margin: 0; justify-self: center; color: #77847b; }.footer p span { color: var(--orange); }
.footer-domain { justify-self: end; color: #68766d; letter-spacing: .07em; }

html[data-mode="day"] { color-scheme: light; --ink: #28352c; --muted: #69766c; --deep: #e9e6d9; --panel: #f3f0e5; --panel-soft: #efecdf; --green: #617d48; --orange: #bf6845; --lavender: #7663a6; --track: #c4cbbb; --edge: rgba(40,53,44,.15); }
html[data-mode="day"] body::before { background-image: radial-gradient(ellipse at 50% -18%, rgba(97,125,72,.09), transparent 45%), linear-gradient(rgba(40,53,44,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(40,53,44,.035) 1px, transparent 1px); }
html[data-mode="day"] .mode-toggle { border-color: #bbc3b5; }
html[data-mode="day"] .scene-stage { background-image: radial-gradient(ellipse at 50% 52%, rgba(97,125,72,.07), transparent 56%), linear-gradient(rgba(40,53,44,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(40,53,44,.035) 1px, transparent 1px); background-color: #e3e6d9; }
html[data-mode="day"] select { border-color: rgba(40,53,44,.2); background: #e9e6d9; }
html[data-mode="day"] .physics-card, html[data-mode="day"] .source-notes, html[data-mode="day"] .direction-button { background: rgba(255,255,255,.28); }
html[data-mode="day"] .physics-card p { color: #647166; }
html[data-mode="day"] .planet-name { fill: #28352c; }
html[data-mode="day"] .closest-label, html[data-mode="day"] .diagram-label { fill: #647166; }
html[data-mode="day"] .scene-legend, html[data-mode="day"] .data-note { color: #647166; }

@media (max-width: 980px) {
  .sim-layout { grid-template-columns: minmax(0,1.1fr) minmax(290px,.9fr); }
  .speed-readouts { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; }
  .speed-delta { grid-column: 1 / -1; justify-self: end; margin-top: -3px; }
  .scene-stage { min-height: 330px; }
}
@media (max-width: 760px) {
  .topbar { min-height: 62px; padding: 0 17px; }
  .wordmark { gap: 8px; font-size: 8px; }
  .brand-spark { width: 24px; height: 24px; }
  .topbar-right { gap: 7px; }.section-label { display: none; }
  main { padding: 0 17px; }
  .intro { min-height: 0; padding: 40px 2px 31px; gap: 10px; }
  .intro-doodle { width: 105px; height: 110px; flex-basis: 105px; margin-right: 0; }
  h1 { font-size: clamp(43px,8vw,61px); }
  .intro-text { max-width: 480px; font-size: 11px; }
  .doodle-caption { right: -8px; font-size: 6px; }
  .sim-layout { grid-template-columns: 1fr; }
  .scene-stage { min-height: 330px; }
  .flyby-scene { width: 100%; min-height: 260px; }
  .controls-inner { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .select-label, #planet-select, .direction-picker, .planet-data { grid-column: 1 / -1; }
  .select-label { margin-bottom: 7px; }
  .controls-inner > .range-control { margin-top: 18px; }
  .direction-picker { margin-top: 18px; }
  .planet-data { margin-top: 20px; padding: 14px 12px 0; border-top: 1px solid rgba(238,244,226,.1); }
  .physics-notes { padding-top: 36px; }
  .physics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .physics-card { min-height: 155px; padding: 14px; }
  .physics-result { grid-column: 1 / -1; min-height: auto; }
  .footer { min-height: 70px; grid-template-columns: 1fr auto; row-gap: 8px; }
  .footer p { grid-column: 2; grid-row: 1; justify-self: end; font-size: 7px; }
  .footer-domain { grid-column: 2; grid-row: 2; }
}
@media (max-width: 480px) {
  .intro { align-items: center; }
  .intro-doodle { width: 86px; height: 90px; flex-basis: 86px; }
  .ring-one { width: 67px; height: 67px; }.ring-two { width: 83px; height: 83px; }
  .doodle-star { font-size: 22px; }.doodle-planet { width: 10px; height: 10px; top: 13px; right: 15px; }
  .doodle-caption { display: none; }
  .panel-topline { min-height: 46px; padding: 0 12px; }
  .scene-stage { min-height: 245px; }
  .flyby-scene { width: 120%; max-width: none; margin-left: -10%; min-height: 220px; }
  .scene-legend { right: 9px; bottom: 9px; font-size: 6px; }
  .speed-readouts { min-height: 83px; padding: 12px; gap: 5px; }
  .measure-label { font-size: 6px; letter-spacing: .04em; }
  .speed-readout strong { font-size: 16px; }.speed-readout strong small { font-size: 8px; }
  .speed-delta { font-size: 10px; }
  .controls-inner { padding: 15px 13px 16px; column-gap: 12px; }
  .range-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .range-heading output { text-align: left; }
  .direction-button { gap: 5px; padding: 8px 5px; }
  .direction-icon { width: 19px; height: 19px; }
  .physics-grid { grid-template-columns: 1fr; }
  .physics-card, .physics-result { min-height: auto; }
  .physics-card h3 { margin-top: 12px; }
  .footer { grid-template-columns: 1fr; gap: 9px; padding: 15px 0; }
  .footer p, .footer-domain { grid-column: 1; grid-row: auto; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }