/* Skopos: product-first presentation. Renderer IDs and figure semantics are unchanged. */
:root {
  color-scheme: light dark;
  --bg: #fff; --surface: #fff; --sunk: #f5f5f7;
  --ink: #1d1d1f; --muted: #6e6e73; --faint: #6e6e73; --rule: #d2d2d7;
  --key: #0066cc; --good: #24795b; --warn: #975900; --bad: #b43c35; --neutral: #727780;
  --fig-track: #e9eaed; --fig-band: #fbe9e8; --fig-grid: #dfe1e5;
  --serif: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --dev-bg: #0e141c; --dev-surface: #131b26; --dev-rule: #283343; --dev-rule2: #344355;
  --dev-text: #dce3ee; --dev-muted: #a2adbd; --dev-dim: #a2adbd;
  --dev-accent: #5eead4; --dev-ok: #4ade80; --dev-warn: #ffa657; --dev-alarm: #ff6b6b;
  --radius-sm: 8px; --gutter: clamp(24px, 5vw, 80px); --sp-6: 32px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000; --surface: #111113; --sunk: #161617; --ink: #f5f5f7;
    --muted: #a1a1a6; --faint: #a1a1a6; --rule: #38383b; --key: #2997ff;
    --good: #72c5a4; --warn: #efb85c; --bad: #f18c83; --neutral: #a1a1a6;
    --fig-track: #303034; --fig-band: #422421; --fig-grid: #34343a;
  }
}
:root[data-theme="dark"] {
  --bg: #000; --surface: #111113; --sunk: #161617; --ink: #f5f5f7;
  --muted: #a1a1a6; --faint: #a1a1a6; --rule: #38383b; --key: #2997ff;
  --good: #72c5a4; --warn: #efb85c; --bad: #f18c83; --neutral: #a1a1a6;
  --fig-track: #303034; --fig-band: #422421; --fig-grid: #34343a;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.6 var(--serif); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
h1,h2,h3,p,figure,dl { margin: 0; }
h1,h2,h3 { text-wrap: balance; }
a { color: var(--key); text-decoration: none; }
a:hover { text-decoration: underline; }
button,input,textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: progress; opacity: .6; }
:focus-visible { outline: 3px solid var(--key); outline-offset: 5px; }
img,svg { max-width: 100%; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; padding: 12px; background: var(--bg); z-index: 100; }
.masthead { min-height: 68px; padding: 12px max(24px, calc((100vw - 1120px)/2)); display: flex; gap: 32px; align-items: center; border-bottom: 1px solid var(--rule); background: var(--bg); }
.wordmark { color: var(--ink); font-size: 22px; font-weight: 650; letter-spacing: -.8px; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.wordmark-co { font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--muted); }
.wordmark-mark { display: none; }
.masthead-nav { margin-left: auto; display: flex; gap: 30px; align-items: center; }
.masthead-nav a { font-size: 14px; color: var(--ink); white-space: nowrap; }
.masthead-nav a:last-child { padding: 7px 15px; color: #fff; background: #0071e3; border-radius: 30px; }
.theme-toggle { border: 0; padding: 10px; height: 44px; width: 44px; background: transparent; color: var(--ink); flex: none; }
.theme-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-icon--sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon--sun { display: block; }
  :root:not([data-theme="light"]) .theme-icon--moon { display: none; }
}
:root[data-theme="dark"] .theme-icon--sun { display: block; }
:root[data-theme="dark"] .theme-icon--moon { display: none; }
:root[data-theme="light"] .theme-icon--sun { display: none; }
:root[data-theme="light"] .theme-icon--moon { display: block; }
.eyebrow { font-size: 19px; font-weight: 600; line-height: 1.4; letter-spacing: -.3px; }
.section--hero { padding-top: clamp(64px, 7vw, 110px); text-align: center; }
h1 { font-size: clamp(48px, 6vw, 88px); font-weight: 650; line-height: 1.04; letter-spacing: -.055em; margin: 18px 24px 26px; }
.thesis { font-size: clamp(19px, 2vw, 26px); font-weight: 400; line-height: 1.4; color: var(--muted); margin: 0 24px; }
.hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 26px; margin: 28px 24px 18px; }
.hero-actions a { font-size: 17px; }
.action-primary { display: inline-block; color: #fff; background: #0071e3; border-radius: 30px; padding: 11px 22px; }
.action-primary:hover { background: #0077ed; text-decoration: none; }
.hero-status { color: var(--muted); font-size: 13px; }
.hero-visual { position: relative; width: calc(100% - 48px); max-width: 1440px; margin: 52px auto 0; height: clamp(320px, 49vw, 690px); background: #191c20; overflow: hidden; border-radius: 4px; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 53%; display: block; }
.hero-visual figcaption { position: absolute; inset: auto 0 0; padding: 80px 36px 26px; color: white; font-size: clamp(20px, 2.5vw, 34px); font-weight: 500; letter-spacing: -.04em; text-align: left; background: linear-gradient(transparent,rgba(0,0,0,.7)); }
.hero-visual figcaption span { display: block; color: #e1e1e1; font-size: 12px; font-weight: 400; letter-spacing: 0; margin-top: 8px; }
.hero-strip { max-width: 1050px; margin: 0 auto; padding: 52px 24px 64px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; text-align: left; }
.hero-strip-item { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.hero-strip dt { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.hero-strip dd { margin: 0; font-size: 40px; font-weight: 600; line-height: 1.15; letter-spacing: -.04em; }
.hero-strip .hero-strip-text { font-size: 19px; font-weight: 500; line-height: 1.4; letter-spacing: -.02em; }
.system-intro { margin: 0 auto; padding: 90px 24px 0; background: var(--sunk); }
h2 { font-size: clamp(36px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.045em; font-weight: 650; }
.system-intro h2 { margin: 18px 0 24px; }
.system-intro > p:last-child { color: var(--muted); font-size: 21px; }
.hero-system { list-style: none; margin: 0; padding: 70px max(24px, calc((100% - 1050px)/2)) 72px; background: var(--sunk); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 52px; text-align: left; }
.hero-node { min-width: 0; }
.hero-node h3 { font-size: 25px; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 16px; }
.hero-node p { color: var(--muted); font-size: 17px; }
.hero-node-link { display: none; }
.note--scope { padding: 0 max(24px, calc((100% - 850px)/2)) 72px; background: var(--sunk); color: var(--muted); font-size: 14px; text-align: center; }
.note--scope strong { color: var(--ink); font-weight: 500; }
.note--scope a { display: block; margin-top: 12px; }
.experience { background: #000; color: #f5f5f7; padding: 110px var(--gutter) 90px; }
.experience-heading { text-align: center; max-width: 850px; margin: 0 auto 36px; }
.experience-heading .eyebrow { color: #a1a1a6; margin-bottom: 18px; }
.experience-heading > p:last-child { font-size: 21px; color: #a1a1a6; max-width: 600px; margin: 24px auto 0; }
.demo-controls { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 38px auto 28px; }
.demo-controls button { color: #b7b7be; background: #202024; border: 1px solid transparent; border-radius: 30px; font-size: 14px; padding: 12px 18px; }
.demo-controls button:hover { color: white; }
.demo-controls button[aria-pressed="true"] { background: #f5f5f7; color: #1d1d1f; }
.theatre { --ink: var(--dev-text); --muted: var(--dev-muted); --faint: var(--dev-dim); --rule: var(--dev-rule); --surface: var(--dev-surface); --key: var(--dev-accent); color: var(--dev-text); background: var(--dev-bg); color-scheme: dark; max-width: 1120px; margin: 0 auto; border: 1px solid #26303e; border-radius: 24px; overflow: hidden; container-type: inline-size; min-height: 400px; }
.theatre-chrome { display: flex; gap: 12px; align-items: center; padding: 18px 24px; font-size: 12px; color: var(--dev-muted); border-bottom: 1px solid var(--dev-rule); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dev-accent); }
.theatre-lane { margin-left: auto; }
.theatre-clipidx:empty { display: none; }
.theatre-caption { padding: 20px 24px 0; font-size: 14px; color: var(--dev-muted); }
.theatre-foot { padding: 18px 24px; font-size: 12px; color: var(--dev-muted); border-top: 1px solid var(--dev-rule); }
.theatre-foot a { color: var(--dev-accent); }
.stage { min-width: 0; }
.demo-bottom { max-width: 1120px; margin: 22px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.demo-bottom p { font-size: 14px; color: #a1a1a6; }
#demo-play { flex: none; padding: 11px 18px; border: 1px solid #64646a; border-radius: 30px; background: transparent; color: #f5f5f7; font-size: 14px; }
.engineering-intro { max-width: 1120px; margin: 0 auto; padding: 110px 24px 62px; }
.engineering-intro .eyebrow { color: var(--muted); margin-bottom: 18px; }
.engineering-intro > p:last-child { color: var(--muted); font-size: 21px; margin-top: 24px; }
.chapters { max-width: 1072px; margin: 0 auto; padding: 0 24px; }
.chapters > .section { padding: 24px 0; border-top: 1px solid var(--rule); }
.chapters .section > .eyebrow, .section-text > .eyebrow { font-size: 14px; color: var(--muted); font-weight: 400; margin-bottom: 8px; }
.engineering-detail summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; list-style: none; padding: 6px 0 12px; }
.engineering-detail summary::-webkit-details-marker { display: none; }
.engineering-detail summary h2 { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.25; letter-spacing: -.025em; }
.expand-icon { position: relative; width: 30px; height: 30px; flex: none; background: var(--sunk); border-radius: 50%; }
.expand-icon::before,.expand-icon::after { content: ''; position: absolute; background: var(--muted); width: 12px; height: 2px; top: 14px; left: 9px; }
.expand-icon::after { transform: rotate(90deg); }
details[open] > summary .expand-icon::after { transform: none; }
.detail-body { max-width: 850px; padding: 24px 0 36px; }
.detail-body p { color: var(--muted); max-width: 72ch; margin-bottom: 20px; }
.detail-body strong, .detail-body em { color: var(--ink); }
.detail-body h3 { font-size: 23px; letter-spacing: -.025em; margin: 32px 0 16px; }
.lede { font-size: 20px; line-height: 1.55; }
.note { font-size: 15px; }
.num { font-variant-numeric: tabular-nums; }
sup.fn { font-size: 12px; line-height: 0; margin-left: 3px; }
sup.fn a { color: var(--key); }
.figure { margin: 32px 0; padding: 28px 20px; border-radius: 18px; background: var(--sunk); overflow-x: auto; }
.fig { width: 100%; min-width: 480px; }
.two-up { display: grid; gap: 28px; }
.swap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; padding: 30px; background: var(--sunk); border-radius: 18px; margin: 28px 0; }
.swap-part { font-size: 21px; color: var(--ink) !important; }
.swap-arrow { color: var(--muted); }
.verdict--bad { color: var(--bad); }
.chapters > .section--contact { padding: 100px 0; border: 0; }
.section--contact > .eyebrow { font-size: 21px !important; font-weight: 500 !important; }
.section--contact > h2 { font-size: clamp(36px, 4.2vw, 56px); margin: 0 0 36px; }
/* Two collapsed rows. Contact is a footer-weight affordance, not a pitch: closed by
   default, opened by whoever actually wants it. */
.contact-stack { max-width: 620px; border-top: 1px solid var(--rule); }
.contact-detail { border-bottom: 1px solid var(--rule); }
.contact-detail summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; list-style: none; padding: 20px 0; }
.contact-detail summary::-webkit-details-marker { display: none; }
.contact-detail summary h3 { font-size: 17px; font-weight: 500; color: var(--ink); }
.contact-detail .detail-body { padding: 0 0 28px; }
.contact-message { padding: 28px 0 0; }
.contact-message h3 { font-size: 17px; font-weight: 500; color: var(--ink); margin-bottom: 20px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.contact-copy .lede { color: var(--muted); }
.contact-list { padding: 0; list-style: none; margin: 0; }
.contact-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; padding: 12px 0; font-size: 16px; color: var(--muted); }
.contact-list li + li { border-top: 1px solid var(--rule); }
.contact-who { display: flex; align-items: baseline; gap: 10px; }
.contact-role { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.contact-list strong { color: var(--ink); font-weight: 500; }
.contact-form { display: grid; gap: 20px; min-width: 0; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea { width: 100%; min-width: 0; padding: 14px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 17px; }
.contact-intent { border: 0; padding: 0; margin: 0; }
.contact-intent legend { font-size: 14px; color: var(--muted); margin-bottom: 12px; }
.contact-intent label { display: flex; align-items: center; padding: 5px 0; font-size: 16px; color: var(--ink); }
.contact-intent input { accent-color: #0071e3; }
#contact-send { justify-self: start; background: #0071e3; color: #fff; padding: 13px 24px; border: 0; border-radius: 30px; }
.form-status { font-size: 14px; color: var(--muted); }
.section--footnotes { background: var(--sunk); padding: 72px var(--gutter); }
.section-inner { max-width: 1072px; margin: 0 auto; }
.section--footnotes .eyebrow { font-size: 15px; color: var(--muted); }
.section--footnotes h2 { font-size: 32px; margin: 18px 0; }
.section--footnotes .lede { font-size: 16px; color: var(--muted); max-width: 75ch; }
.footnotes { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 38px; counter-reset: footnote; }
.footnote { position: relative; min-width: 0; padding: 20px 24px 20px 28px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); counter-increment: footnote; }
.footnote::before { content: counter(footnote) '.'; position: absolute; left: 0; font-size: 12px; }
.fn-kind,.fn-value,.fn-note,.fn-cite { display: block; }
.fn-kind { font-size: 12px; }
.fn-value { color: var(--ink); margin: 6px 0; }
.fn-cite { font-size: 12px; margin-top: 8px; overflow-wrap: anywhere; }
.fn-back { position: absolute; top: 20px; right: 2px; }
.repro { font-size: 12px; display: block; white-space: pre; overflow-x: auto; margin-top: 12px; padding: 10px; background: var(--bg); }
:target { scroll-margin-top: 90px; }
.footnote:target { outline: 2px solid var(--key); outline-offset: 4px; }
.colophon { background: var(--sunk); padding: 0 var(--gutter) 40px; }
.colophon-inner { max-width: 1072px; margin: 0 auto; border-top: 1px solid var(--rule); padding-top: 28px; }
.colophon-name { font-weight: 600; font-size: 17px; margin-bottom: 12px; }
.colophon-line { font-size: 12px; color: var(--muted); max-width: 100ch; margin: 8px 0; }
.instrument {
  padding: 14px 16px 16px;
  display: grid;
  gap: 14px;
}
.instrument canvas, .instrument img { width: 100%; display: block; background: var(--dev-bg); }
.instrument canvas { border: 1px solid var(--dev-rule); border-radius: var(--radius-sm); }
#map-img { border: 1px solid var(--dev-rule); border-radius: var(--radius-sm); aspect-ratio: 1 / 1; object-fit: cover; }
#depth-fan { aspect-ratio: 5 / 2; }
#flight-scene { aspect-ratio: 4 / 3; }
#flight-rose { aspect-ratio: 1 / 1; }
#slam-scene { aspect-ratio: 21 / 9; }
#slam-obs { aspect-ratio: 4 / 3; }
.hud-bitmap { image-rendering: pixelated; }

.hud-frame {
  background: #000;
  border: 1px solid var(--dev-rule2);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 40px rgba(94, 234, 212, .05);
}
#hud-img { width: 100%; max-width: 280px; background: #000; }

.room-pane + .room-pane { border-top: 1px solid var(--dev-rule); padding-top: 14px; }
.flight-main, .slam-main, .room-pane { display: grid; gap: 12px; min-width: 0; }

.instrument-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.instrument-head h3 { color: var(--dev-text); font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.instrument-head .sub {
  font-family: var(--mono); font-size: 11px; color: var(--dev-muted); margin: 0;
  min-width: 0; flex: 1 1 200px;
}

/* A wider theatre (the top bar at tablet widths) gets a second column, keyed to the
 * theatre's own inline size so a ~420px sidebar and a ~900px bar share one markup. */
@container (min-width: 560px) {
  .instrument--flight, .instrument--slam { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .instrument--flight .instrument-head, .instrument--slam .instrument-head { grid-column: 1 / -1; }
}
@container (min-width: 680px) {
  .instrument--room { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .room-pane + .room-pane { border-top: 0; padding-top: 0; }
}

/* `render.js` emits `.stats > .stat > .k + .v` and `.decision > .line > .tag + .body`. These
 * rules mirror `demo/static/style.css` structurally — the two surfaces share a renderer. */
.stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 2px; font-size: 11px; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .k { color: var(--dev-dim); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; font-family: var(--mono); }
.stat .v { color: var(--dev-text); font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stat .v.warn { color: var(--dev-warn); }
.stat .v.alarm { color: var(--dev-alarm); }
.stat .v.ok { color: var(--dev-ok); }

.decision { font-family: var(--mono); font-size: 11.5px; }
.decision .line { display: flex; gap: 8px; padding: 2px 0; }
.decision .tag {
  flex: none; width: 54px; color: var(--dev-dim); text-transform: uppercase;
  letter-spacing: .08em; font-size: 10px; padding-top: 2px;
}
.decision .body { color: var(--dev-text); min-width: 0; word-break: break-word; }
.decision .body.limit { color: var(--dev-warn); }
.decision .body.stop { color: var(--dev-alarm); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10px; color: var(--dev-dim); }

.badge, .phase {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em; padding: 2px 9px; border-radius: 10px;
  background: rgba(220, 227, 238, .08); color: var(--dev-muted);
  border: 1px solid transparent;
}
.badge:empty { display: none; }
.badge.sliding, .badge.nofix { color: var(--dev-alarm); background: color-mix(in srgb, var(--dev-alarm) 14%, transparent); }
.badge.tracking, .badge.done { color: var(--dev-ok); background: color-mix(in srgb, var(--dev-ok) 12%, transparent); }
.phase { color: var(--dev-accent); background: color-mix(in srgb, var(--dev-accent) 12%, transparent); }


.fig { overflow: visible; }
.fig-title { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
             text-transform: uppercase; fill: var(--faint); }
.fig-axis, .fig-sub { font-family: var(--mono); font-size: 10px; fill: var(--faint); }
.fig-unit { font-family: var(--mono); font-size: 10px; fill: var(--faint);
            text-transform: none; letter-spacing: .02em; opacity: .8; }
.fig-label { font-family: var(--serif); font-size: 13.5px; fill: var(--ink); }
.fig-value { font-family: var(--mono); font-size: 13px; font-weight: 600; fill: var(--ink); }
.fig-track { fill: var(--fig-track); }
.fig-bar { fill: var(--neutral); }
.fig-bar--good { fill: var(--good); }
.fig-bar--key  { fill: var(--key); }
.fig-bar--warn { fill: var(--warn); }
.fig-bar--bad  { fill: var(--bad); }
.fig-band { fill: var(--fig-band); }
.fig-band-label { font-family: var(--mono); font-size: 10px; fill: var(--bad); }
.fig-grid { stroke: var(--fig-grid); stroke-width: 1; }
.fig-threshold { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fig-threshold-label { font-family: var(--mono); font-size: 10px; fill: var(--ink); }
.fig-horizon { fill: var(--fig-track); stroke: var(--rule); }
.fig-blocked { fill: var(--bad); opacity: .55; }
.fig-sensor { fill: var(--ink); }
.fig-spine { stroke: var(--rule); stroke-width: 2; }
.fig-node { fill: var(--surface); stroke: var(--key); stroke-width: 2; }
.fig-converts { font-family: var(--serif); font-size: 12px; fill: var(--muted); }
.fig-arrow { fill: var(--key); }
.fig-chip { fill: var(--fig-track); }
.fig-chip--built { fill: var(--good); }
.fig-chip--simulated { fill: var(--warn); }
.fig-chip--planned { fill: none; stroke: var(--rule); stroke-width: 1; }
.fig-chip-text { font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
                 fill: var(--surface); text-transform: uppercase; }
.fig-chip--planned + .fig-chip-text { fill: var(--faint); }

/* Size the unchanged dashboard instruments as a generous, single product stage. */
.instrument { padding: 24px; }
.instrument-head h3,.instrument-head .sub,.stats,.stat .k,.decision,.decision .tag,.legend { font-size: 12px; }
.instrument--room { grid-template-columns: 1fr 1fr; align-items: start; }
.room-pane + .room-pane { border: 0; padding: 0; }
#map-img { max-height: 390px; object-fit: contain; }
#depth-fan { height: 130px; aspect-ratio: auto; }
.hud-frame { min-height: 230px; align-items: center; }
#flight-scene { height: 360px; aspect-ratio: auto; }
#flight-rose { height: 280px; aspect-ratio: auto; }
#slam-scene { height: 360px; aspect-ratio: auto; }
#slam-obs { height: 280px; aspect-ratio: auto; }
.fig { width: 100%; min-width: 480px; }
@media (max-width: 760px) {
  .masthead { flex-wrap: wrap; gap: 8px 16px; padding: 12px 24px; }
  .theme-toggle { margin-left: auto; }
  .masthead-nav { order: 3; width: 100%; margin: 0; justify-content: space-between; gap: 16px; overflow-x: auto; }
  .masthead-nav a { font-size: 12px; }
  .masthead-nav a:last-child { padding: 6px 12px; }
  .hero-visual { width: 100%; border-radius: 0; height: 420px; }
  .hero-visual figcaption { padding-left: 24px; padding-right: 24px; }
  .hero-strip { gap: 20px; padding: 36px 24px; grid-template-columns: 1fr 1fr; }
  .hero-strip-item:last-child { grid-column: 1 / -1; margin-top: 12px; }
  .hero-strip dd { font-size: 34px; }
  .system-intro { padding-top: 70px; }
  .system-intro > p:last-child { font-size: 19px; }
  .hero-system { grid-template-columns: 1fr; gap: 30px; padding-top: 42px; padding-bottom: 38px; }
  .hero-node { max-width: 52ch; }
  .hero-node h3 { margin-bottom: 8px; }
  .experience { padding: 72px 18px 56px; }
  .experience-heading > p:last-child { font-size: 18px; }
  .demo-controls { gap: 6px; }
  .demo-controls button { font-size: 13px; padding: 11px 14px; }
  .theatre { border-radius: 16px; }
  .theatre-chrome { padding: 16px; flex-wrap: wrap; }
  .theatre-caption { padding: 16px 16px 0; }
  .theatre-lane { margin-left: 0; }
  .instrument { padding: 16px; }
  .instrument--room { grid-template-columns: 1fr; }
  .room-pane + .room-pane { border-top: 1px solid var(--dev-rule); padding-top: 18px; }
  .hud-frame { min-height: 100px; }
  #map-img { max-height: 300px; }
  #flight-scene,#slam-scene { height: 300px; }
  #flight-rose,#slam-obs { height: 190px; }
  .demo-bottom { align-items: start; }
  .engineering-intro { padding-top: 72px; padding-bottom: 44px; }
  .engineering-intro > p:last-child { font-size: 19px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .chapters > .section--contact { padding: 72px 0; }
  .contact-row { grid-template-columns: 1fr; }
  .swap { grid-template-columns: 1fr; }
  .footnotes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; } }
@media print {
  :root,:root[data-theme="dark"],:root[data-theme="light"] { --bg: white; --surface: white; --sunk: #eee; --ink: black; --muted: #333; --faint: #333; --rule: #ccc; }
  body { font-size: 11pt; }
  .masthead-nav,.theme-toggle,.hero-actions,.hero-visual,.experience,.contact-form,.expand-icon { display: none; }
  .section--hero,.system-intro,.hero-system,.note--scope,.engineering-intro,.section--footnotes { padding: 20px 0; }
  h1 { font-size: 36pt; }
  h2 { font-size: 24pt; }
  .hero-strip { padding: 20px 0; }
  .hero-system { display: block; }
  .hero-node { margin-bottom: 16px; }
  .engineering-detail::details-content,.contact-detail::details-content { content-visibility: visible; display: block; }
  .detail-body { display: block; }
  .figure,.footnote { break-inside: avoid; }
  .fig { min-width: 0; }
  .repro { white-space: pre-wrap; }
}