/* The System (ported to /system/, Oct 9, 2026; from the S2 and S3 demos). Load after shared/tokens.css, chrome.css and mission.css. Space is dark in
   both themes: the stage keeps the dark tokens (like .m-scene), and in Daylight only the panels (cards, buttons, time machine, compare) take the
   light tokens. The space kit (.zs-space, .zs-hud) is the site's own, from shared/chrome.css. */

body.sx { background: var(--bg); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; }
:root { --sx-top: 66px; }   /* the fixed site header; the stage sits below it, so the header keeps the page's own light or dark tokens */
@media (max-width: 860px) { :root { --sx-top: 58px; } }

/* the stage's star tiles are white in both themes (set in the head script); they replace chrome.js's per-theme tiles inside the stage only */
.sx-stage { --zs-star: 255,255,255; --zs-star-a: .5; --zs-stars-a: var(--sx-stars-a); --zs-stars-b: var(--sx-stars-b); }

/* ---------- the stage: dark tokens in both themes ---------- */
.sx-stage {
  --bg: #05070c; --bg-2: #0a0d14; --ink: #eef1f6; --ink-2: #bfc6d2; --muted: #9aa3b4; --line: rgba(255, 255, 255, .085); --line-2: rgba(255, 255, 255, .16); --accent: #9fb7ff; --on-accent: #05070c;
  --pn-bg: color-mix(in srgb, #0a0d14 94%, transparent); --pn-line: rgba(255, 255, 255, .14); --pn-ink: #eef1f6; --pn-ink2: #c3cad6; --pn-muted: #a3acbc; --pn-acc: #9fb7ff; --pn-on: #05070c; --pn-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 22px 44px -26px rgba(0, 0, 0, .85);
  position: relative; margin-top: var(--sx-top); height: calc(100svh - var(--sx-top)); min-height: 600px; overflow: hidden; background: radial-gradient(120% 90% at 50% 45%, #070b16 0%, #04060c 60%, #020308 100%); color: var(--ink); isolation: isolate;
}
:root[data-theme="light"] .sx-stage { --pn-bg: color-mix(in srgb, #fbfcfd 95%, transparent); --pn-line: rgba(24, 44, 96, .16); --pn-ink: #0b1430; --pn-ink2: #2a3554; --pn-muted: #46526f; --pn-acc: #2f4bd0; --pn-on: #fff; --pn-shadow: 0 1px 0 #fff inset, 0 2px 8px rgba(15, 20, 30, .08), 0 22px 44px -28px rgba(0, 0, 0, .6); }
.sx-stage > .zs-space { z-index: 0; }
#sxGL { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; touch-action: none; cursor: grab; }
#sxGL:active { cursor: grabbing; }
.sx-stage > .zs-hud { z-index: 6; }
.sx-leaders { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }
.sx-leaders .ld { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .7; }
.sx-leaders .ret circle { fill: none; stroke: var(--accent); stroke-width: 1.2; }
.sx-leaders .ret circle.c { fill: var(--accent); stroke: none; }
.sx-labels { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.sx-lab { position: absolute; left: 0; top: 0; display: inline-flex; gap: 7px; align-items: baseline; padding: 4px 8px; border-radius: 7px; background: rgba(5, 8, 15, .74); border: 1px solid rgba(255, 255, 255, .1); font: 500 12px/1.2 var(--mono); color: #e7ebf3; white-space: nowrap; will-change: transform; }
.sx-lab b { font-weight: 500; color: #b9c8ff; }
.sx-lab.hub { border-color: rgba(159, 183, 255, .4); }
.sx-lab.iss { border-color: rgba(255, 255, 255, .35); }
.sx-lab.gpsl b { color: #f0c48a; } .sx-lab.geol b { color: #cdbcff; } .sx-lab.sunl { color: #ffd9a6; }
.sx-lab.off { visibility: hidden; }

/* header copy, top left (over the dark scene: dark tokens) */
.sx-head { position: absolute; z-index: 4; left: calc(var(--gut) + 150px); top: 26px; max-width: 420px; pointer-events: none; }
.sx-head .crumbs { pointer-events: auto; margin: 0 0 12px; }
@media (max-width: 860px) { .sx-head .crumbs { display: none; } }
.sx-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.sx-eyebrow span { color: var(--muted); }
.sx-eyebrow span::after { content: ""; display: inline-block; width: 22px; height: 1px; margin-left: 10px; vertical-align: 3px; background: var(--line-2); }
.sx-head h1 { margin: 0; font: 400 clamp(34px, 3.4vw, 50px)/1.02 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.sx-lede { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); max-width: 40ch; }

/* tools, top right */
.sx-tools { position: absolute; z-index: 5; right: var(--gut); top: 26px; display: flex; gap: 8px; }
.sx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: var(--r-pill); border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink); font: 500 13px/1 var(--sans); cursor: pointer; box-shadow: var(--pn-shadow); transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out), color .25s; }
.sx-btn:hover { border-color: color-mix(in srgb, var(--pn-acc) 55%, var(--pn-line)); }
.sx-btn[aria-pressed="true"], .sx-btn[aria-expanded="true"] { background: var(--pn-acc); color: var(--pn-on); border-color: var(--pn-acc); }
.sx-btn:focus-visible, .sx-mini:focus-visible, .sx-stop:focus-visible, .sx-sl:focus-visible, .tc-a:focus-visible { outline: 2px solid var(--pn-acc); outline-offset: 3px; }
.sx-ico { width: 14px; height: 14px; position: relative; display: inline-block; }
.sx-ico.tour { border-radius: 50%; border: 1.4px solid currentColor; }
.sx-ico.tour::after { content: ""; position: absolute; left: 4.5px; top: 3px; border-left: 5px solid currentColor; border-top: 3.2px solid transparent; border-bottom: 3.2px solid transparent; }
.sx-ico.scale { border: 1.4px solid currentColor; border-radius: 50%; width: 12px; height: 12px; box-shadow: 6px 2px 0 -3.6px currentColor; }
.sx-ico.cmp::before, .sx-ico.cmp::after { content: ""; position: absolute; top: 2px; width: 6px; height: 10px; border: 1.4px solid currentColor; border-radius: 2px; }
.sx-ico.cmp::before { left: 0; } .sx-ico.cmp::after { right: 0; }
.sx-ico.time { border: 1.4px solid currentColor; border-radius: 50%; width: 13px; height: 13px; }
.sx-ico.time::after { content: ""; position: absolute; left: 5px; top: 2px; width: 3px; height: 4px; border-left: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; }
.sx-ph { display: none; }

/* ruler: distance from Earth, log scale, the scrubber (left edge) */
.sx-ruler { position: absolute; z-index: 5; left: var(--gut); top: 32px; bottom: 32px; width: 84px; display: flex; flex-direction: column; }
.sx-ruler-cap { margin: 0 0 8px; font: 500 11px/1.25 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); writing-mode: horizontal-tb; }
.sx-track { position: relative; flex: 1; margin-left: 8px; width: 74px; border-radius: 8px; cursor: ns-resize; touch-action: none; }
.sx-sl { position: absolute; inset: 0; border-radius: 8px; }   /* P1b: the slider role sits on its own box; the stop markers are siblings, not children (axe nested-interactive) */
.sx-track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--line-2) 50%, color-mix(in srgb, var(--warm, #e9b98c) 55%, transparent)); }
.sx-ticks { position: absolute; inset: 0; }
.sx-tick { position: absolute; left: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.sx-tick i { width: 9px; height: 1px; background: var(--ink-2); opacity: .6; }
.sx-tick em { font: 400 11px/1 var(--mono); font-style: normal; color: var(--muted); white-space: nowrap; }
.sx-tick.au em { color: #e9c9a6; }
.sx-minor { position: absolute; left: 0; width: 4px; height: 1px; background: var(--line-2); }
.sx-mark { position: absolute; left: -9px; transform: translateY(-50%); width: 19px; height: 19px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); background: #05070c; color: var(--accent); font: 500 10.5px/1 var(--mono); cursor: pointer; display: grid; place-items: center; }
.sx-mark:hover { background: var(--accent); color: #05070c; }
.sx-knob { position: absolute; left: -4px; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; z-index: 2; }
.sx-knob span { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); padding: 3px 7px; border-radius: 6px; background: rgba(5, 8, 15, .82); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font: 500 11.5px/1.2 var(--mono); color: var(--ink); white-space: nowrap; }

/* stop buttons, bottom centre */
.sx-stops { position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 2px; padding: 3px; border-radius: 14px; border: 1px solid var(--pn-line); background: var(--pn-bg); box-shadow: var(--pn-shadow); }
.sx-stop { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 0; border-radius: 11px; background: none; color: var(--pn-muted); font: 500 12.5px/1 var(--mono); cursor: pointer; transition: color .25s, background-color .25s; }
.sx-stop .n { opacity: .8; }
.sx-stop:hover { color: var(--pn-ink); }
.sx-stop.on { background: var(--pn-acc); color: var(--pn-on); }

/* cards dock, right; Telemetry card spec (K4c / K7) */
.sx-dock { position: absolute; z-index: 5; right: var(--gut); top: 84px; width: 340px; }
.sx-card { --tc-bg: var(--pn-bg); --tc-line: var(--pn-line); position: absolute; left: 0; top: 0; width: 100%; padding: 14px 16px 15px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--pn-acc) 70%, transparent); background: var(--tc-bg); color: var(--pn-ink);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pn-acc) 18%, transparent), 0 0 42px -14px color-mix(in srgb, var(--pn-acc) 50%, transparent), 0 26px 50px -26px rgba(0, 0, 0, .85);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.985); transform-origin: 100% 0; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }
.sx-card.on { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
.sx-card::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--pn-acc) 50%, transparent); }
.tc-hud { position: absolute; inset: -7px; pointer-events: none; --c: var(--pn-acc);
  background: linear-gradient(var(--c), var(--c)) top left / 10px 1px, linear-gradient(var(--c), var(--c)) top left / 1px 10px, linear-gradient(var(--c), var(--c)) top right / 10px 1px, linear-gradient(var(--c), var(--c)) top right / 1px 10px,
    linear-gradient(var(--c), var(--c)) bottom left / 10px 1px, linear-gradient(var(--c), var(--c)) bottom left / 1px 10px, linear-gradient(var(--c), var(--c)) bottom right / 10px 1px, linear-gradient(var(--c), var(--c)) bottom right / 1px 10px; background-repeat: no-repeat; }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.tc-code { font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pn-acc); white-space: nowrap; }
.tc-st { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pn-muted); }
.tc-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.tc-st b { font-weight: 500; }
.tc-st.live { color: var(--pn-acc); } .tc-st.live i { background: #5ccf95; opacity: 1; box-shadow: 0 0 0 3px rgba(92, 207, 149, .22); }
:root[data-theme="light"] .tc-st.live i { background: #1f9d63; }
.tc-title { margin: 9px 0 10px; font: 500 19px/1.25 var(--sans); letter-spacing: -.018em; color: var(--pn-ink); }
.tc-lines { display: grid; gap: 7px; }
.tc-l { display: grid; grid-template-columns: 50px 1fr; gap: 8px; align-items: baseline; margin: 0; }
.tc-lk { font: 500 12px/1.4 var(--mono); color: var(--pn-muted); }
.tc-lv { font-size: 14.5px; line-height: 1.45; color: var(--pn-ink2); }
.tc-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
.tc-figs:empty { display: none; }
.tc-figs:has(> :nth-child(4)) { grid-template-columns: 1fr 1fr; }
.tc-fig { margin: 0; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--pn-line); }
.tc-fig b { display: block; font: 500 16px/1.2 var(--mono); color: var(--pn-ink); letter-spacing: -.01em; }
.tc-fig span { display: block; margin-top: 3px; font-size: 12px; line-height: 1.3; color: var(--pn-muted); }
.tc-phase { float: right; width: 30px; height: 30px; margin: 0 0 0 6px; }
.tc-phase .dk { fill: #1b2232; stroke: rgba(255, 255, 255, .25); stroke-width: .8; } .tc-phase .lt { fill: #e9e6dc; }
:root[data-theme="light"] .tc-phase .dk { fill: #c9cfdb; stroke: rgba(24, 44, 96, .3); } :root[data-theme="light"] .tc-phase .lt { fill: #fdfcf7; stroke: rgba(24,44,96,.35); stroke-width: .6; }
.tc-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.tc-tools .key { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 2px; font: 500 11.5px/1.2 var(--mono); color: var(--pn-ink2); }
.tc-tools .key i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); }
.key .g-starlink { background: #9fb7ff; } .key .g-gps { background: #f0c48a; } .key .g-iss { background: #fff; } .key .g-weather { background: #7fe0c8; } .key .g-geo { background: #c7b3ff; } .key .g-other { background: #aeb6c6; }
.tc-tools .chip { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--pn-line); font: 500 12px/1.2 var(--mono); color: var(--pn-ink2); }
.tc-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 0; }
.tc-a { font: 500 13.5px/1.3 var(--sans); color: var(--pn-acc); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--pn-acc) 40%, transparent); }
.tc-a:hover { border-bottom-color: var(--pn-acc); }
.tc-a.off { color: var(--pn-muted); border-bottom: 1px dashed var(--pn-line); }
@media (prefers-reduced-motion: reduce) { .sx-card, .sx-card.on { transform: none; transition: opacity .2s, visibility 0s; } }

/* readout and the scale note, bottom right */
.sx-read { position: absolute; z-index: 5; right: var(--gut); bottom: 26px; margin: 0; display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: baseline; text-align: right; font: 500 11px/1.3 var(--mono); }
.sx-read .k { letter-spacing: .1em; color: var(--muted); }
.sx-read b { font-weight: 500; font-size: 12.5px; color: var(--ink); white-space: nowrap; }
.sx-scale-note { position: absolute; z-index: 5; right: var(--gut); bottom: 96px; margin: 0; max-width: 300px; text-align: right; font: 400 12px/1.4 var(--mono); color: var(--muted); opacity: 0; transition: opacity .4s; }
.sx-scale-note.on { opacity: 1; }

/* time machine, bottom left (beside the ruler) */
.sx-time { position: absolute; z-index: 5; left: calc(var(--gut) + 118px); bottom: 26px; width: 300px; padding: 11px 13px 10px; border-radius: 14px; border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink); box-shadow: var(--pn-shadow); }
.sx-time-top { display: flex; align-items: center; gap: 6px; margin: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pn-acc); }
.sx-time-top span { flex: 1; }
.sx-mini { padding: 5px 9px; border-radius: var(--r-pill); border: 1px solid var(--pn-line); background: none; color: var(--pn-ink2); font: 500 11.5px/1 var(--mono); letter-spacing: 0; text-transform: none; cursor: pointer; }
.sx-mini:hover { color: var(--pn-ink); border-color: var(--pn-ink2); }
.sx-mini[aria-pressed="true"] { background: var(--pn-acc); color: var(--pn-on); border-color: var(--pn-acc); }
.sx-date { margin: 8px 0 6px; font: 500 13.5px/1.2 var(--mono); color: var(--pn-ink); }
.sx-range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: none; cursor: pointer; }
.sx-range::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pn-line), var(--pn-acc) 50%, var(--pn-line)); }
.sx-range::-moz-range-track { height: 2px; background: var(--pn-line); }
.sx-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 50%; background: var(--pn-acc); border: 2px solid var(--pn-bg); box-shadow: 0 0 0 1px var(--pn-acc); }
.sx-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--pn-acc); border: 2px solid var(--pn-bg); }
.sx-range:focus-visible { outline: 2px solid var(--pn-acc); outline-offset: 2px; }
.sx-time-ends { display: flex; justify-content: space-between; margin: 0; font: 400 11px/1.2 var(--mono); color: var(--pn-muted); }
.sx-satnote { margin: 8px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--pn-ink2); }

/* tour caption, top centre */
.sx-caption { position: absolute; z-index: 5; left: 50%; bottom: 84px; transform: translateX(-50%); max-width: min(620px, calc(100% - 2 * var(--gut))); margin: 0; padding: 10px 16px; border-radius: 12px; border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink); box-shadow: var(--pn-shadow); text-align: center; font-size: 14.5px; line-height: 1.45; }
.sx-caption b { display: block; margin-bottom: 3px; font: 500 11.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pn-acc); }

/* compare */
.sx-cmp { position: absolute; z-index: 8; right: var(--gut); top: 84px; width: 380px; max-height: calc(100% - 120px); overflow: auto; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink); box-shadow: var(--pn-shadow); }
.sx-cmp-head { display: flex; align-items: center; justify-content: space-between; }
.sx-cmp h2 { margin: 0; font: 500 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--pn-acc); }
.sx-cmp-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0 6px; }
.sx-cmp-pick label { display: grid; gap: 5px; font: 500 11.5px/1 var(--mono); color: var(--pn-muted); }
.sx-cmp select { padding: 7px 9px; border-radius: 9px; border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink); font: 500 14px/1.2 var(--sans); }
.sx-cmp-viz { display: block; width: 100%; height: auto; margin: 4px 0; }
.sx-cmp-viz circle.b0 { fill: color-mix(in srgb, var(--pn-acc) 30%, transparent); stroke: var(--pn-acc); }
.sx-cmp-viz circle.b1 { fill: rgba(233, 185, 140, .3); stroke: #e9b98c; }
:root[data-theme="light"] .sx-cmp-viz circle.b1 { stroke: #8f5418; }
.sx-cmp-viz text { font: 500 11px var(--mono); fill: var(--pn-ink2); }
.sx-cmp-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sx-cmp-t th, .sx-cmp-t td { padding: 7px 4px; border-bottom: 1px solid var(--pn-line); text-align: right; vertical-align: top; }
.sx-cmp-t thead th { font: 500 11.5px/1.2 var(--mono); letter-spacing: .06em; color: var(--pn-acc); }
.sx-cmp-t th[scope="row"], .sx-cmp-t thead th:first-child { text-align: left; font-weight: 400; color: var(--pn-muted); }
.sx-cmp-t td { font-family: var(--mono); color: var(--pn-ink); }
.sx-src { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--pn-muted); }

.sx-nojs { position: absolute; inset: auto var(--gut) 40px; color: var(--ink-2); }
.sx-stage.nogl #sxGL { display: none; }

/* ---------- below the scene ---------- */
.sx-more { padding: var(--sec-y) 0; }
.sx-more h2, .sx-contact h2 { margin: 0 0 var(--sp4); font: 400 var(--t-h2)/1.05 var(--sans); letter-spacing: -.035em; max-width: 22ch; }
.sx-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp4); }
.sx-cols h3 { margin: 0 0 8px; font: 500 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.sx-cols p { margin: 0; color: var(--ink-2); line-height: 1.6; }
.sx-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--ink-2); }
.sx-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.sx-list b { font-weight: 500; }
.sx-credit { margin: var(--sp6) 0 0; font: 400 12.5px/1.6 var(--mono); color: var(--muted); max-width: 110ch; }
.sx-contact { padding: var(--sec-y) 0; border-top: 1px solid var(--line); }
.sx-avail { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.sx-live { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
@media (max-width: 860px) { .sx-cols { grid-template-columns: 1fr; } }

/* ---------- tablets and small laptops ---------- */
@media (min-width: 861px) and (max-width: 1180px) {
  .sx-lede { display: none; }
  .sx-head h1 { font-size: 34px; }
  .sx-dock, .sx-cmp { width: 300px; }
  .sx-time { width: 260px; }
  .sx-stop { padding: 8px 9px; }
}
@media (min-width: 861px) and (max-width: 1060px) { .sx-stops { left: auto; right: var(--gut); transform: none; bottom: 100px; } .sx-read { bottom: 20px; } .sx-scale-note { bottom: 160px; } }
/* ---------- phones and narrow screens ---------- */
@media (max-width: 860px) {
  .sx-stage { height: calc(100svh - var(--sx-top)); min-height: 640px; }
  .sx-head { left: var(--gut); right: var(--gut); top: 14px; max-width: none; }
  .sx-head h1 { font-size: 30px; }
  .sx-eyebrow { margin-bottom: 8px; }
  .sx-lede { display: none; }
  .sx-tools { top: auto; bottom: 64px; right: var(--gut); left: var(--gut); justify-content: center; gap: 6px; }
  .sx-btn { padding: 7px 11px 7px 9px; font-size: 12.5px; }
  .sx-ruler { left: auto; right: 10px; top: 76px; bottom: auto; height: 36%; width: 22px; }
  .sx-ruler-cap { display: none; }
  .sx-track { width: 22px; margin-left: 10px; }
  .sx-tick em, .sx-knob span { display: none; }
  .sx-scale-note { display: none; }
  .sx-stops { left: var(--gut); right: var(--gut); transform: none; bottom: 12px; justify-content: space-between; }
  .sx-stop { flex: 1; justify-content: center; padding: 9px 4px; gap: 4px; font-size: 11.5px; }
  .sx-stop .n { display: none; }
  .sx-dock { left: var(--gut); right: var(--gut); top: auto; bottom: 108px; width: auto; }
  .sx-card { top: auto; bottom: 0; padding: 12px 14px; }
  .sx-card .tc-lines { display: none; }
  .tc-title { font-size: 17px; margin: 6px 0 6px; }
  .tc-tools { display: none; }
  .tc-figs { margin-top: 8px; }
  .sx-card:not([data-stop="inner"]):not([data-stop="edge"]):not(.sx-dos) .tc-figs:has(> :nth-child(4)) > :nth-child(-n+2) { display: none; }
  .sx-read { left: var(--gut); right: auto; top: 76px; bottom: auto; text-align: left; grid-template-columns: auto auto; }
  .sx-read b { font-size: 12px; }
  .sx-scale-note { left: var(--gut); right: 80px; top: 136px; bottom: auto; text-align: left; font-size: 11.5px; }
  .sx-ph { display: inline-flex; }
  .sx-time { display: none; }
  .sx-stage.time-open .sx-time { display: block; left: var(--gut); right: var(--gut); width: auto; bottom: 108px; z-index: 7; }
  .sx-caption { bottom: auto; top: 160px; }
  .sx-cmp { left: var(--gut); right: var(--gut); width: auto; top: 70px; max-height: calc(100% - 190px); z-index: 9; }
}
@media (max-width: 860px) and (max-height: 700px) { .sx-read .k:nth-of-type(3), .sx-read b:nth-of-type(3) { display: none; } }

/* S3: the few rules needed at first paint; the rest of the S3 styles load without blocking (demo-s3.css) */
.sx-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 861px) and (max-width: 1180px) { .sx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sx-btn .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.sx-ico.craft { border-radius: 50%; width: 13px; height: 13px; border: 1.4px solid currentColor; }
.sx-ico.cine { width: 15px; height: 11px; border: 1.4px solid currentColor; border-radius: 2px; margin-top: 1px; }
.sx-filters[hidden], .sx-look[hidden], .sx-cine[hidden] { display: none; }
@media (max-width: 860px) { .sx-btn { padding: 7px 9px; } .sx-btn .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #tourBtn, #trueBtn, #cmpBtn, #timeBtn { font-size: 0; gap: 0; } .sx-tools .sx-btn { min-width: 40px; min-height: 36px; justify-content: center; } .sx-lookbtn { display: inline-flex; } }
.sx-lookbtn { display: none; margin-top: 10px; }
/* The System v2 styles (S3). */
/* ======================= S3 (Oct 8, 2026): The System v2 ======================= */
.sx-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 861px) and (max-width: 1180px) { .sx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-tick.ly em { color: #ffe3b8; }
.sx-lab.craft { border-color: rgba(207, 224, 255, .28); font-size: 11.5px; padding: 3px 7px; }
.sx-lab.craft.site { border-color: rgba(255, 213, 158, .45); color: #ffe7c4; }
.sx-lab.edgel { border-color: rgba(233, 201, 166, .35); } .sx-lab.edgel b { color: #e9c9a6; }
/* hover: a thin ring around the body or marker (no glow, nothing follows the cursor between targets) */
.sx-hover { position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 80%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none; opacity: 0; transition: opacity .18s; will-change: transform; }
.sx-hover.on { opacity: 1; }
.sx-ico.craft { border-radius: 50%; width: 13px; height: 13px; border: 1.4px solid currentColor; }
.sx-ico.craft::after { content: ""; position: absolute; left: 3.2px; top: 3.2px; width: 3.8px; height: 3.8px; border-radius: 50%; background: currentColor; }
.sx-ico.cine { width: 15px; height: 11px; border: 1.4px solid currentColor; border-radius: 2px; margin-top: 1px; }
.sx-ico.cine::before, .sx-ico.cine::after { content: ""; position: absolute; left: 2px; right: 2px; height: 1.4px; background: currentColor; }
.sx-ico.cine::before { top: 1.6px; } .sx-ico.cine::after { bottom: 1.6px; }
/* spacecraft filters, under the tools */
.sx-filters { position: absolute; z-index: 6; right: var(--gut); top: 74px; width: 400px; margin: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink); box-shadow: var(--pn-shadow); }
.sx-f-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 6px; }
.sx-f-k { width: 46px; font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pn-muted); }
.sx-chip { padding: 4px 8px; border-radius: 6px; border: 1px solid var(--pn-line); background: none; color: var(--pn-muted); font: 500 11.5px/1.2 var(--mono); cursor: pointer; }
.sx-chip[aria-pressed="true"] { color: var(--pn-ink); border-color: color-mix(in srgb, var(--pn-acc) 65%, var(--pn-line)); background: color-mix(in srgb, var(--pn-acc) 14%, transparent); }
.sx-chip:focus-visible { outline: 2px solid var(--pn-acc); outline-offset: 2px; }
.sx-f-note { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--pn-muted); }
.sx-stage.craft-on .sx-dock { top: 186px; }
/* dossier */
.sx-dos .tc-dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 2px 0 0; font-size: 13.5px; }
.sx-dos .tc-dl dt { color: var(--pn-muted); font: 500 12px/1.5 var(--mono); }
.sx-dos .tc-dl dd { margin: 0; color: var(--pn-ink); font: 500 13px/1.45 var(--mono); text-align: right; }
.sx-dos .tc-dl.wide dd { text-align: left; font: 400 13.5px/1.4 var(--sans); color: var(--pn-ink2); }
.tc-here { margin-top: 12px; }
.tc-here .tc-lk { margin: 0 0 5px; }
.tc-here ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; max-height: 120px; overflow: auto; }
.tc-m { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--pn-line); background: none; color: var(--pn-ink); cursor: pointer; text-align: left; }
.tc-m b { font: 500 12.5px/1.2 var(--sans); white-space: nowrap; } .tc-m span { font-size: 11px; color: var(--pn-muted); white-space: nowrap; }
.tc-m:hover { border-color: var(--pn-acc); } .tc-m:focus-visible { outline: 2px solid var(--pn-acc); outline-offset: 2px; }
.tc-ev { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; color: var(--pn-ink2); }
.tc-ev b { font: 500 11.5px/1.3 var(--mono); color: var(--pn-muted); }
.tc-quiet { margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--pn-muted); }
.tc-back { margin: 12px 0 0; }
.sx-back::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 1px; border-left: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg); }   /* drawn: the arrow glyph fell back to a system font (a 14 ms first layout) */
.sx-dos .tc-figs:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr; }
.sx-dos .tc-figs > :nth-child(3):last-child { grid-column: 1 / -1; }
/* Look up tonight (under the Earth card) */
.sx-look { position: absolute; z-index: 5; right: var(--gut); top: 400px; width: 340px; padding: 11px 15px 11px; border-radius: 14px; border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink); box-shadow: var(--pn-shadow); }
.lk-title { margin: 6px 0 6px; font: 500 15px/1.3 var(--sans); }
.lk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lk-list li { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--pn-line); }
.lk-list b { font: 500 12.5px/1.3 var(--mono); color: var(--pn-ink); } .lk-list span { font-size: 12.5px; color: var(--pn-ink2); }
.sx-lookbtn { display: none; margin-top: 10px; }
/* time machine options */
.sx-time-opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; }
.sx-speed select { padding: 4px 6px; border-radius: var(--r-pill); border: 1px solid var(--pn-line); background: var(--pn-bg); color: var(--pn-ink2); font: 500 11.5px/1 var(--mono); }
/* tour v2 caption: text plus Continue, End tour and sound */
.sx-caption p { margin: 0; }
.sx-cap-ctl { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; margin-top: 9px !important; }
.sx-go { background: var(--pn-acc) !important; color: var(--pn-on) !important; border-color: var(--pn-acc) !important; padding: 6px 14px !important; }
.sx-vol input { width: 80px; vertical-align: middle; accent-color: var(--pn-acc); }
/* cinematic */
.sx-cine { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.sx-cine .bar { position: absolute; left: 0; right: 0; height: 9.5%; background: #000; transform: scaleY(0); transition: transform .9s var(--ease-out); }
.sx-cine .bar.t { top: 0; transform-origin: 0 0; } .sx-cine .bar.b { bottom: 0; transform-origin: 0 100%; }
.sx-cine .vig { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, .42) 100%); opacity: 0; transition: opacity 1.2s; }
.sx-cine.on .bar { transform: scaleY(1); } .sx-cine.on .vig { opacity: 1; }
.sx-cine-cap { position: absolute; left: 50%; bottom: calc(9.5% + 22px); transform: translate(-50%, 6px); width: min(760px, calc(100% - 2 * var(--gut))); margin: 0; text-align: center; font: 400 17px/1.5 var(--sans); color: #eef1f6; text-shadow: 0 1px 12px rgba(0, 0, 0, .8); opacity: 0; transition: opacity .9s, transform .9s; }
.sx-cine-cap.on { opacity: 1; transform: translate(-50%, 0); }
.sx-cine-end { position: absolute; left: 50%; bottom: calc(9.5% + 76px); transform: translateX(-50%); display: flex; gap: 10px; margin: 0; pointer-events: auto; }
.sx-cine-end[hidden] { display: none; }
.sx-cine-hint { position: absolute; right: var(--gut); bottom: calc(4.75% - 7px); margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .08em; color: rgba(238, 241, 246, .5); opacity: 0; transition: opacity 1s 1s; }
.sx-cine.on .sx-cine-hint { opacity: 1; }
.sx-stage.cine > :not(#sxGL):not(.zs-space):not(.sx-cine) { opacity: 0 !important; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }
@media (prefers-reduced-motion: reduce) { .sx-cine .bar, .sx-cine .vig, .sx-cine-cap { transition: none; } }
@media (min-width: 861px) and (max-width: 1180px) { .sx-filters { width: 300px; } .sx-look { width: 300px; } .sx-btn .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 860px) {
  .sx-btn { padding: 7px 9px; } .sx-btn .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #tourBtn, #trueBtn, #cmpBtn, #timeBtn { font-size: 0; gap: 0; } #tourBtn .sx-ico, #trueBtn .sx-ico, #cmpBtn .sx-ico, #timeBtn .sx-ico { margin: 0; }
  .sx-tools .sx-btn { min-width: 40px; min-height: 36px; justify-content: center; }
  /* phones: the filters are one scrolling row under the readout, so the card keeps its place and the scene stays clear */
  .sx-filters { left: var(--gut); right: var(--gut); width: auto; top: 140px; bottom: auto; z-index: 6; padding: 6px 8px; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; }
  .sx-filters[hidden] { display: none; }
  .sx-f-row { flex-wrap: nowrap; margin: 0; flex: none; }
  .sx-f-k { display: none; }
  .sx-stage.craft-on .sx-dock { top: auto; bottom: 108px; }
  .sx-f-note { display: none; }
  .sx-look { display: none; }
  .sx-stage.look-open .sx-look:not([hidden]) { display: block; left: var(--gut); right: var(--gut); width: auto; top: 70px; z-index: 9; max-height: calc(100% - 200px); overflow: auto; }
  .sx-lookbtn { display: inline-flex; }
  .sx-dos .tc-dl { grid-template-columns: auto 1fr; font-size: 13px; }
  .sx-dos .tc-dl dt:nth-of-type(n+4), .sx-dos .tc-dl dd:nth-of-type(n+4) { display: none; }
  .sx-dos .tc-dl.wide dt:nth-of-type(n+3), .sx-dos .tc-dl.wide dd:nth-of-type(n+3) { display: none; }
  .sx-dos .tc-ev, .sx-dos .tc-quiet { display: none; }
  .tc-here ul { flex-wrap: nowrap; overflow-x: auto; max-height: none; }
  .tc-m { flex: none; }
  .sx-dos .tc-tools { display: none; }
  .sx-dos { max-height: calc(100svh - 260px); overflow: auto; }
  .sx-cine-cap { font-size: 15px; }
  .sx-cap-ctl .sx-vol { display: none; }
  .sx-time-opts .sx-mini { padding: 5px 7px; }
}
.sx-card, .sx-look, .sx-filters, .sx-time, .sx-caption { contain: layout style; }
.sx-lab { contain: layout style; }
.tc-fly { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 0; }
.tc-fly .tc-lk { margin-right: 4px; white-space: nowrap; flex: none; }
@media (max-width: 860px) { .tc-fly { flex-wrap: nowrap; overflow-x: auto; } .tc-fly .sx-chip { flex: none; } }

/* P1b: the single column on narrow screens must come last (the first-paint .sx-cols rule above would win otherwise) */
@media (max-width: 860px) { .sx-cols { grid-template-columns: 1fr; } }