/* QuotaLantern site — set like an instrument data sheet.
   Paper and brand-navy ink in light mode, blueprint in dark mode.
   The background grid is 32 px: the same grid the tray icon is drawn on. */

:root {
  color-scheme: light dark;

  --paper: light-dark(#f4f1e9, #0d2030);
  --paper-2: light-dark(#ebe6da, #11283b);
  --ink: light-dark(#16324b, #e7eef5);
  --ink-2: light-dark(#475d72, #a9bdd0);
  --ink-3: light-dark(#6c7f91, #7f97ad);
  --rule: light-dark(rgba(22, 50, 75, .16), rgba(231, 238, 245, .14));
  --rule-2: light-dark(rgba(22, 50, 75, .34), rgba(231, 238, 245, .3));
  --grid: light-dark(rgba(22, 50, 75, .055), rgba(231, 238, 245, .05));
  --signal: light-dark(#087f9e, #86d8ec);
  --signal-ink: light-dark(#ffffff, #062231);
  --ok: light-dark(#14603c, #4ade80);
  --warn: light-dark(#8a5300, #facc15);
  --crit: light-dark(#a52b34, #f87171);
  --neutral: light-dark(#66768a, #94a3b8);
  --focus: light-dark(#9a5c00, #ffd18a);

  /* The app mock always shows the dark GTK theme, as in the real captures. */
  --app-bg: #0b1522;
  --app-surface: #111f31;
  --app-line: #233854;
  --app-ink: #eef4fe;
  --app-muted: #a3b5cc;
  --app-faint: #7a90ab;
  --app-beam: #86d8ec;
  --app-track: #22344d;
  --app-ok: #4ade80;
  --app-warn: #facc15;
  --app-crit: #f87171;
  --app-neutral: #94a3b8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, P052, "URW Palladio L", "Book Antiqua", "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", "Noto Sans", Ubuntu, sans-serif;
  --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "Cascadia Code", "SFMono-Regular", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-family: var(--sans);
  font-size: 17px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul, figure, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { color: var(--signal); }
code, kbd, pre, .mono { font-family: var(--mono); }
code { font-size: .88em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 12px; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 14px; }
.skip:focus { top: 12px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }

/* ── Top bar ───────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.mark-word { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-size: 21px; letter-spacing: -.01em; }
.mark-word:hover { color: var(--ink); }
.mark-word picture { flex: none; }
.mark-word img { width: 26px; height: 26px; }
.top nav { display: flex; gap: 22px; margin-left: auto; font-family: var(--mono); font-size: 13px; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--signal); }
.lang { display: inline-flex; flex: none; font-family: var(--mono); font-size: 13px; border: 1px solid var(--rule-2); border-radius: 3px; overflow: hidden; }
.lang button { min-width: 38px; min-height: 30px; border: 0; background: transparent; color: var(--ink-2); font: inherit; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── Type ──────────────────────────────────────────────────────────── */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.02; text-wrap: balance; }
.display em { font-style: italic; color: var(--signal); }
h2.display { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; }
.lede { font-size: 19px; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.meta { font-family: var(--mono); font-size: 13px; color: var(--ink-3); letter-spacing: .01em; }
p { text-wrap: pretty; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 3px; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; }
.btn:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.gridded { background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; background-position: -1px -1px; }
.hero { border-bottom: 1px solid var(--rule); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px 56px; align-items: center; padding: 64px 0 0; }
.hero h1 { font-size: clamp(48px, 6.6vw, 92px); margin: 18px 0 26px; }
.hero .lede { margin-bottom: 34px; }
.hero-fig { display: grid; gap: 18px; justify-items: center; }
.hero-legend { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; margin-top: 24px; padding: 24px 0 40px; border-top: 1px solid var(--ink); }
.ring-stage { position: relative; width: min(340px, 74vw); aspect-ratio: 1; }
.ring-stage svg { width: 100%; height: 100%; overflow: visible; }
.ring-stage .arc { transition: stroke-dasharray .4s cubic-bezier(.2, .8, .2, 1), stroke .2s ease; }
.pin { position: absolute; display: grid; place-items: center; width: 26px; height: 26px; translate: -50% -50%; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 13px; font-weight: 600; box-shadow: 0 0 0 3px var(--paper); transition: left .4s cubic-bezier(.2, .8, .2, 1), top .4s cubic-bezier(.2, .8, .2, 1); }
.callouts { counter-reset: call; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.callouts li { counter-increment: call; position: relative; padding-left: 36px; font-size: 15px; color: var(--ink-2); }
.callouts li::before { content: counter(call); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 600; }
.callouts b { color: var(--ink); font-weight: 600; }
.controls { display: grid; gap: 12px; }
.range-row { display: grid; grid-template-columns: auto 1fr 3.5em; align-items: center; gap: 14px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.range-row output { text-align: right; color: var(--ink); }
input[type="range"] { width: 100%; accent-color: var(--ink); min-height: 28px; }
input[type="range"]:disabled { opacity: .4; }
.seg { display: flex; flex-wrap: wrap; min-inline-size: 0; margin: 0; padding: 0; border: 1px solid var(--rule-2); border-radius: 3px; overflow: hidden; }
.seg label { flex: 1 1 auto; position: relative; display: grid; place-items: center; min-height: 40px; padding: 0 12px; font-family: var(--mono); font-size: 13px; color: var(--ink-2); cursor: pointer; text-align: center; }
.seg label + label { border-left: 1px solid var(--rule-2); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--ink); color: var(--paper); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -4px; }
.caption { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.caption .actual { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.caption .actual svg { width: 24px; height: 24px; }

/* ── Sections ──────────────────────────────────────────────────────── */
.sec { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 40px; padding: 96px 0; border-bottom: 1px solid var(--rule); }
.sec:last-of-type { border-bottom: 0; }
.sec-label { position: sticky; top: 92px; align-self: start; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.sec-label b { display: block; font-weight: 500; color: var(--ink); font-size: 15px; }
.sec-head { display: grid; gap: 18px; max-width: 760px; margin-bottom: 44px; }
.sec-head p { color: var(--ink-2); font-size: 18px; }

/* Overview demo */
.demo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.scenario-list { position: sticky; top: 92px; border: 0; padding: 0; margin: 0; border-top: 1px solid var(--rule-2); }
.scenario-list legend { float: left; width: 100%; padding: 14px 0 10px; font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.scenario { clear: both; position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 4px 12px; padding: 16px 4px; border-top: 1px solid var(--rule-2); cursor: pointer; }
.scenario:last-child { border-bottom: 1px solid var(--rule-2); }
.scenario input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.scenario .key { grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--ink); border-radius: 3px; font-family: var(--mono); font-size: 13px; }
.scenario .name { font-weight: 600; }
.scenario .desc { grid-column: 2; display: none; font-size: 15px; color: var(--ink-2); }
.scenario:has(input:checked) .key { background: var(--ink); color: var(--paper); }
.scenario:has(input:checked) .desc { display: block; }
.scenario:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.scenario:hover .name { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: 4px; }

.plate { border: 1px solid var(--rule-2); background: var(--paper-2); padding: 18px; box-shadow: 8px 8px 0 var(--grid); }
.plate-cap { margin-top: 14px; }
.scenario-note { display: none; margin-top: 10px; font-size: 15px; color: var(--ink-2); }
.panel { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 30px; padding: 0 12px; margin: -18px -18px 18px; background: #0a1420; color: #d5e0ec; font-family: var(--mono); font-size: 12px; }
.panel .glyph { width: 13px; height: 13px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 3px; }
.panel .glyph.round { border-radius: 50%; }
.panel .tray-ring { width: 22px; height: 22px; padding: 1px; border-radius: 4px; outline: 1px solid rgba(134, 216, 236, .55); }
.panel .tray-ring svg { width: 20px; height: 20px; }

.app-window { container-type: inline-size; border-radius: 10px; overflow: hidden; color: var(--app-ink); background: var(--app-bg); border: 1px solid var(--app-line); font-family: var(--sans); font-size: 13px; line-height: 1.45; }
.titlebar { display: flex; align-items: center; justify-content: center; position: relative; height: 32px; background: #0e1a2a; border-bottom: 1px solid var(--app-line); color: var(--app-muted); font-size: 12px; font-weight: 600; }
.titlebar::after { content: "×"; position: absolute; right: 12px; color: var(--app-faint); }
.app-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; background: var(--app-surface); border-bottom: 1px solid var(--app-line); }
.app-ring { position: relative; width: 60px; height: 60px; }
.app-ring svg { width: 60px; height: 60px; }
.app-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.app-title { font-size: 15px; font-weight: 700; }
.app-sub { margin-top: 2px; font-size: 12px; color: var(--app-muted); }
.app-unconfirmed { margin-top: 2px; font-size: 12px; color: var(--app-warn); }
.app-buttons { display: flex; gap: 6px; }
.app-btn { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--app-beam); white-space: nowrap; }
.app-btn.primary { background: var(--app-beam); color: #06202a; }
.app-body { display: grid; align-content: start; gap: 10px; padding: 6px 14px 14px; height: 470px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--app-line) transparent; overscroll-behavior: contain; }
.app-section { margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--app-faint); }
.card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--app-surface); border: 1px solid var(--app-line); }
.card.critical { border-color: rgba(248, 113, 113, .65); }
.card.warning { border-color: rgba(250, 204, 21, .55); }
.card.error { border-color: rgba(248, 113, 113, .45); }
.card-top { display: flex; align-items: center; gap: 8px; }
.card-name { font-size: 14px; font-weight: 700; }
.card-pct { margin-left: auto; font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.app-pill { padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: rgba(148, 163, 184, .16); color: var(--app-neutral); }
.app-pill.ok { background: rgba(74, 222, 128, .15); color: var(--app-ok); }
.app-pill.stale { background: rgba(250, 204, 21, .15); color: var(--app-warn); }
.app-pill.error { background: rgba(248, 113, 113, .15); color: var(--app-crit); }
.app-pill.spend { background: rgba(134, 216, 236, .15); color: var(--app-beam); }
.meter { display: grid; gap: 4px; }
.meter-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--app-muted); }
.meter-top b { font-variant-numeric: tabular-nums; }
.bar { height: 7px; border-radius: 99px; background: var(--app-track); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; }
.fine { font-size: 11px; color: var(--app-faint); }
.card-foot { display: flex; align-items: center; gap: 10px; }
.card-foot .fine { flex: 1; }
.cost { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.headline { font-size: 13px; font-weight: 700; }
.quote { font-size: 12px; font-style: italic; color: var(--app-muted); }
.err { font-size: 12px; color: var(--app-crit); }
.app-foot { padding: 8px 16px; border-top: 1px solid var(--app-line); background: var(--app-surface); font-size: 11px; color: var(--app-faint); }
.t-ok { color: var(--app-ok); } .t-warn { color: var(--app-warn); } .t-crit { color: var(--app-crit); } .t-neutral { color: var(--app-neutral); }
.b-ok { background: var(--app-ok); } .b-warn { background: var(--app-warn); } .b-crit { background: var(--app-crit); } .b-neutral { background: var(--app-neutral); }
@container (max-width: 420px) {
  .app-head { grid-template-columns: auto 1fr; }
  .app-buttons, .card-foot .app-btn { display: none; }
}

/* Tables */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.spec { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec th, .spec td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-2); }
.spec thead th { padding-top: 12px; padding-bottom: 12px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.spec td { color: var(--ink-2); }
.spec th[scope="row"] { color: var(--ink); font-weight: 600; }
.spec .icons { display: flex; align-items: center; gap: 12px; }
.spec .icons svg:first-child { width: 16px; height: 16px; }
.spec .icons svg:last-child { width: 24px; height: 24px; }
.spec .kind { font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.status { display: inline-flex; align-items: baseline; gap: 8px; }
.status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--neutral); translate: 0 -1px; }
.status.ok::before { background: var(--ok); }
.status.warn::before { background: var(--warn); }
.note { margin-top: 18px; max-width: 760px; font-size: 15px; color: var(--ink-3); }

/* Install */
.install { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.install-lede { margin: 18px 0 24px; }
.facts { display: grid; gap: 14px; color: var(--ink-2); font-size: 16px; }
.facts li { padding-left: 20px; position: relative; }
.facts li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }
.terminal { position: relative; border: 1px solid var(--ink); background: #0f1e2c; color: #dce6f0; box-shadow: 8px 8px 0 var(--grid); }
.terminal-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 14px; border-bottom: 1px solid #253a51; font-family: var(--mono); font-size: 12px; color: #8ea4ba; }
.terminal pre { margin: 0; padding: 18px; overflow-x: auto; font-size: 14px; line-height: 1.8; }
.terminal .c { color: #7c93aa; }
.copy { min-height: 30px; padding: 0 12px; border: 1px solid #3a5470; border-radius: 3px; background: transparent; color: #dce6f0; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.copy:hover { border-color: #86d8ec; color: #86d8ec; }
.copy.done { border-color: #4ade80; color: #4ade80; }

/* Notes */
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.notes h3 { padding-bottom: 12px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.notes li { padding: 14px 0; border-bottom: 1px solid var(--rule-2); color: var(--ink-2); font-size: 16px; }
.notes li strong { color: var(--ink); font-weight: 600; }

/* Footer */
.foot { padding: 40px 0 56px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-3); }
.foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--mono); font-size: 13px; }
.foot nav a { color: var(--ink-2); }

/* Tour page */
.page-head { border-bottom: 1px solid var(--rule); }
.page-head .wrap { padding: 64px 0 56px; }
.page-head h1 { font-size: clamp(42px, 6vw, 76px); margin: 16px 0 22px; }
.figure-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: start; }
.figure-row + .figure-row { margin-top: 88px; }
.copy-col h2 { margin-bottom: 16px; }
.copy-col > p { color: var(--ink-2); }
.points { counter-reset: pt; display: grid; gap: 14px; margin-top: 22px; }
.points li { counter-increment: pt; position: relative; padding-left: 36px; color: var(--ink-2); font-size: 16px; }
.points li::before { content: counter(pt); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 12px; font-weight: 600; }
kbd { padding: 1px 6px; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 3px; font-size: 13px; color: var(--ink); }
.menu-mock { width: min(470px, 100%); margin-left: auto; padding: 5px; border-radius: 8px; background: #172334; border: 1px solid #2a3d55; color: #e6eef8; font-size: 13px; }
.menu-mock li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 12px; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-mock li.dim { color: #8ea2bb; }
.menu-mock li.on { background: #2a4f7a; }
.menu-mock li.sep { height: 1px; padding: 0; margin: 5px 8px; background: #2a3d55; }
.menu-mock .blk { font-family: var(--mono); font-size: 12px; letter-spacing: -.03em; }
.settings-mock { display: grid; grid-template-columns: 140px 1fr; border-radius: 8px; overflow: hidden; background: #1f1f1f; border: 1px solid #333; color: #ececec; font-size: 13px; }
.settings-mock nav { padding: 6px 0; background: #262626; border-right: 1px solid #333; }
.settings-mock nav span { display: block; padding: 8px 14px; color: #cfcfcf; white-space: nowrap; }
.settings-mock nav span.on { background: #1f4d80; color: #fff; }
.settings-mock .pane { padding: 16px; }
.settings-mock h4 { margin: 0; font-size: 15px; }
.settings-mock .count { display: block; margin-top: 2px; color: #9a9a9a; font-size: 11px; }
.settings-mock .grp { margin: 14px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #7a90ab; }
.settings-mock .rows { border: 1px solid #3a3a3a; border-radius: 8px; }
.settings-mock .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #2d2d2d; }
.settings-mock .row:last-child { border-bottom: 0; }
.settings-mock .row small { display: block; color: #9a9a9a; font-size: 11px; }
.switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 99px; background: #4a4a4a; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.switch.on { background: #3584e4; }
.switch.on::after { left: 19px; }
.captures { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 760px); gap: 32px; align-items: start; }
.captures figure { display: grid; gap: 12px; }
.captures img { width: 100%; height: auto; border: 1px solid var(--rule-2); box-shadow: 8px 8px 0 var(--grid); }

/* Icon matrix page */
.matrix td, .matrix th { white-space: nowrap; vertical-align: middle; }
.matrix .swatch { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; }
.matrix .swatch img:first-child { width: 16px; height: 16px; }
.matrix .swatch img:last-child { width: 24px; height: 24px; }
.matrix .light-row .swatch { background: #f8fafc; }
.matrix .dark-row .swatch { background: #1e293b; }
.prose { display: grid; gap: 16px; max-width: 760px; margin-top: 32px; color: var(--ink-2); }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .hero-grid, .demo, .install, .figure-row, .captures, .hero-legend { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { gap: 40px; padding-top: 44px; }
  .hero-legend { gap: 24px; margin-top: 0; }
  .scenario-list { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .scenario-list legend { grid-column: 1 / -1; }
  .scenario { padding: 12px 2px; }
  .scenario:has(input:checked) .desc { display: none; }
  .scenario-note { display: block; }
  .sec { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 72px 0; }
  .sec-label { position: static; display: flex; gap: 10px; align-items: baseline; }
  .sec-label b { display: inline; }
  .figure-row .copy-col { order: -1; }
}
@media (max-width: 720px) {
  .wrap { width: min(1200px, 100% - 32px); }
  .top nav { display: none; }
  .top .wrap { justify-content: space-between; }
  body { font-size: 16px; }
  .hero h1 { font-size: 46px; }
  .lede { font-size: 17px; }
  .notes, .callouts { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .callouts { gap: 14px; }
  .plate { padding: 10px; box-shadow: none; }
  .panel { margin: -10px -10px 10px; }
  .app-body { height: 430px; padding: 4px 10px 12px; }
  .spec { font-size: 14px; }
  .spec.stack, .spec.stack tbody { display: block; }
  .spec.stack thead { display: none; }
  .spec.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); }
  .spec.stack th, .spec.stack td { padding: 0; border: 0; }
  .spec.stack td:last-child { grid-column: 1 / -1; }
  .terminal pre { font-size: 12.5px; padding: 14px; }
  .settings-mock { grid-template-columns: minmax(0, 1fr); }
  .settings-mock nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid #333; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}