*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f4f3ef;
  --panel: #e7e6e1;
  --screen: #fafaf7;
  --ink: #1c1c1a;
  --ink-2: #464641;
  --mid: #706f6a;
  --line: rgba(28, 28, 26, 0.14);
  --line-2: rgba(28, 28, 26, 0.08);
  --accent: #e0592a;
  --accent-ink: #ad4119; /* orange for small text: 4.7:1 on the panel */
  --green: #46843c;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wrap: 1240px;
  --gutter: 40px;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  font-family: var(--sans);
  font-optical-sizing: auto;
  font-feature-settings: "ss01", "cv11";
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
code, pre { font-family: var(--mono); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Local review bar */
.review { display: flex; justify-content: space-between; gap: 16px; padding: 6px var(--gutter); font-size: 12px; background: var(--ink); color: #bdbcb6; }
.review a { color: #fff; text-decoration: none; }
.review a:hover { color: var(--accent); }
.review-alt { display: flex; gap: 16px; }

/* Header */
.head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.head.scrolled { border-bottom-color: var(--line); }
.head-in { display: flex; align-items: center; gap: 36px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; }
.logo img { width: 28px; height: 28px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { font-size: 14px; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.btn-line { font-size: 14px; font-weight: 500; text-decoration: none; padding: 7px 14px; border: 1px solid var(--ink); border-radius: 6px; }
.btn-line:hover { background: var(--ink); color: var(--bg); }

/* Type scale */
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mid); }
h1 { font-size: clamp(40px, 5vw, 68px); font-weight: 600; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(28px, 2.7vw, 38px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.sub { font-size: clamp(20px, 2vw, 26px); font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink-2); }
.lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; text-decoration: none; padding: 12px 18px; border-radius: 6px; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost { border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* Hero */
.hero { padding: 56px 0 64px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.hero-copy { padding-top: 12px; }
.hero-copy h1 { margin: 18px 0 18px; }
.hero-copy .sub { margin-bottom: 26px; max-width: 520px; white-space: pre-line; text-wrap: pretty; }
.hero-copy .lede { max-width: 500px; }

/* Instrument: a device-like panel around a canvas */
.instrument { --mid: #5f5e59; background: var(--panel); border-radius: 22px; padding: 12px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 0 rgba(28,28,26,0.04); }
.screen { position: relative; background: var(--screen); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.screen > canvas, .stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage { position: absolute; inset: 0; }
.screen.r-hero { aspect-ratio: 16 / 11; }
.screen.r-wide { aspect-ratio: 16 / 10; }
.readout { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 14px 8px 4px; min-height: 70px; }
.readout .moment { max-width: 560px; }
[data-system] .readout { min-height: 104px; }
.readout .moment b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 4px; min-height: 14px; }
.readout .moment span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.clock { display: flex; align-items: center; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.clock svg { width: 30px; height: 30px; }
.clock[hidden] { display: none; }

.controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 12px; align-items: start; }
.keys { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.controls .keys { margin-top: 0; }
.key { appearance: none; border: 0; background: transparent; font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 4px 4px; color: var(--mid); }
.key .cap { width: 100%; height: 34px; border-radius: 7px; background: var(--screen); box-shadow: 0 1px 0 rgba(28,28,26,0.12), inset 0 -2px 0 rgba(28,28,26,0.05); position: relative; transition: transform 0.08s, box-shadow 0.08s; }
.key .cap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--line); transition: background 0.2s; }
.key span { font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.key[hidden] { display: none; }
.key[aria-selected="true"] { color: var(--ink); }
.key[aria-selected="true"] .cap { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(28,28,26,0.12); }
.key[aria-selected="true"] .cap::after { background: var(--accent); }
.key:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; border-radius: 8px; }
.instrument.is-paused .key[aria-selected="true"] .cap::after { background: var(--ink-2); }
.key-pause { width: 56px; }
.key-pause[hidden] { display: none; }
.key-pause .cap { display: grid; place-items: center; }
.key-pause .cap::after { display: none; }
.key-pause svg { width: 12px; height: 12px; fill: var(--ink-2); }
.instrument.is-paused .key-pause { color: var(--ink); }
.instrument.is-paused .key-pause .cap { transform: translateY(1px); box-shadow: inset 0 1px 2px rgba(28,28,26,0.12); }
.key-progress { height: 2px; background: var(--line-2); margin: 10px 68px 0 4px; border-radius: 2px; overflow: hidden; }
.key-progress i { display: block; height: 100%; width: 0; background: var(--ink-2); }
.scene-note { padding: 14px 6px 4px; display: grid; }
.scene-note > div { grid-area: 1 / 1; display: grid; gap: 6px; align-content: start; }
.scene-note > div[aria-hidden="true"] { visibility: hidden; }
.scene-note b { font-size: 15px; font-weight: 600; }
.scene-note span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }

/* Sections */
.section { padding: 64px 0; border-top: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; margin-bottom: 40px; align-items: end; }
.section-head p { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 620px; }

.what-head .label, .use-head .label, .meta-head .label { display: block; margin-bottom: 12px; }
.use-head h2, .meta-head h2 { text-wrap: balance; }

/* What it is: the label and one factual lede over the drawing (what.css). */
.what-head { max-width: 720px; margin-bottom: 32px; }
.what-lede { font-size: 20px; line-height: 1.45; letter-spacing: -0.014em; color: var(--ink); text-wrap: pretty; }

/* In use: two systems, both at full size. The household's instrument with its text beside it;
   then the organisation at full width, where scale reads when it is big, with its text above
   it in two columns: the story and the numbers on the left, what it does on the right. */
.use-head p { text-wrap: pretty; }
.system { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.system + .system { margin-top: 64px; }
.system.stack { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.system.stack .system-copy { columns: 2; column-gap: 56px; }
.system.stack .system-copy .list { break-before: column; }
.system.stack .system-copy p { max-width: 540px; }
.system.stack .screen.r-wide { aspect-ratio: 2 / 1; }
.system-copy .label { display: block; margin-bottom: 10px; }
.system-copy h3 { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 12px; }
.system-copy p { color: var(--ink-2); margin-bottom: 18px; text-wrap: pretty; }
.list { list-style: none; border-top: 1px solid var(--line); }
.list li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.facts { margin-top: 18px; display: grid; gap: 4px; }
.facts li { list-style: none; font-size: 13px; color: var(--mid); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 6px 2px; font-size: 12px; color: var(--mid); }
.legend[hidden] { display: none; }
/* All of a figure's legends share one cell, so switching views does not change its height. */
.legends { display: grid; }
.legends > .legend { grid-area: 1 / 1; align-content: start; }
.legends > .legend[hidden] { display: flex; visibility: hidden; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend span.items { flex-wrap: wrap; row-gap: 4px; }
.legend i { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }
.legend i.coord { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3px var(--ink); }
.legend i.helper { background: var(--screen); border: 1.3px solid var(--ink); }
.legend i.person { background: radial-gradient(circle, #706f6a 0 1.6px, transparent 2px); border: 1.4px solid #706f6a; }
.legend i.src { border-radius: 0; background: transparent; border: 1.2px solid #706f6a; }
.legend i.hot { background: var(--accent); }
.legend i.tone-mid { background: #706f6a; }
.legend i.msg { width: 14px; height: 3px; border-radius: 2px; background: var(--ink); }
.legend i.msg.green { background: var(--green); }
.legend i.msg.mid { background: #706f6a; }
.legend i.box { width: 14px; height: 9px; border-radius: 0; background: var(--screen); border: 1px solid rgba(28, 28, 26, 0.55); }
.legend i.kb { width: 14px; height: 9px; border-radius: 0; background: linear-gradient(rgba(28, 28, 26, 0.06), rgba(28, 28, 26, 0.06)), var(--screen); border: 1px solid rgba(28, 28, 26, 0.3); }
.legend i.frame { width: 11px; height: 11px; border-radius: 0; background: transparent; border: 1px dashed rgba(28, 28, 26, 0.45); }
.legend i.item { border-radius: 0; background: var(--accent); }
.legend i.item.open { background: transparent; border: 1px solid rgba(28, 28, 26, 0.6); }
.legend i.item.done { background: var(--ink); }
.legend i.item.skip { background: rgba(196, 194, 188, 0.6); }
.legend i.helper.sm { width: 7px; height: 7px; }
.legend i.rel { width: 14px; height: 1.5px; border-radius: 0; background: #8d8c86; }
.legend i.msg.acc { background: var(--accent); }
.legend i.dormant { background: rgba(28, 28, 26, 0.22); }
.legend i.ev { background: radial-gradient(circle, var(--ink) 0 1.2px, var(--screen) 1.6px); border: 1.4px solid var(--ink); }
.legend i.cand { background: var(--screen); border: 1.2px dashed var(--accent); }
.legend i.evid { width: 14px; height: 0; border-radius: 0; background: transparent; border-top: 1.5px dotted var(--accent); }
.legend i.srcs { width: 10px; height: 4px; border-radius: 0; background: linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 6px, var(--ink) 6px); }
.legend i.conf { width: 16px; height: 9px; border-radius: 0; background: transparent; border: 1.1px solid var(--accent); }
.legend .g { flex: none; width: 14px; height: 14px; overflow: visible; }
.legend .g .d { fill: var(--ink); }
.legend .g .d.faint { fill: rgba(28, 28, 26, 0.22); }
.legend .g .a { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.legend .g .a.idle { stroke: #706f6a; stroke-opacity: 0.55; stroke-width: 1.5; }
.legend .g .a.w { stroke: var(--ink); }
.legend .g .a.r { stroke: #706f6a; }
.legend .g .a.q { stroke: var(--accent); }
.legend .g.kb path, .legend .g.kb ellipse { fill: var(--screen); stroke: var(--ink); stroke-width: 1.1; }
.legend span.items .g { margin-left: 4px; }

/* Transcript: what the zoomed-in agent is doing, line by line, beside the canvas */
.screen { --pane: clamp(272px, 40%, 400px); }
.transcript { position: absolute; top: 0; right: 0; bottom: 0; width: var(--pane); display: flex; flex-direction: column; background: var(--screen); border-left: 1px solid var(--line); }
.transcript[hidden] { display: none; }
.screen.split .stage { right: var(--pane); }
.tx-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 10px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mid); border-bottom: 1px solid var(--line-2); }
.tx-live { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.instrument.is-paused .tx-live { background: var(--line); }
.tx-lines { flex: 1; min-height: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 10px 16px 16px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tx-lines li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 4px 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); animation: tx-in 0.35s ease-out; }
.tx-lines .k { padding-top: 2.5px; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mid); white-space: nowrap; }
.tx-lines .x { overflow-wrap: anywhere; }
.tx-lines code { font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.tx-lines li.tx-think .x, .tx-lines li.tx-note .x { color: var(--mid); }
.tx-lines li.tx-input .x, .tx-lines li.tx-peer .x { color: var(--ink); }
.tx-lines li.sub { padding-top: 0; }
.tx-lines li.sub .x { padding-left: 10px; border-left: 1px solid var(--line); }
.tx-lines li.now .k { color: var(--accent-ink); }
.tx-lines li.now .k:empty::before { content: ""; display: block; width: 5px; height: 5px; margin-top: 4px; border-radius: 50%; background: var(--accent); }
@keyframes tx-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Meerkat Meta: the console at the full width of the page, so its real screenshots can be read;
   the heading and lede above it, as in Checked. One screenshot per view; a view whose file is
   missing keeps an empty grey frame with its name. The frame is 16:9, cut from the top of each
   16:10 capture, so the console and its keys fit one screen at 1440x900; the whole capture
   opens at full size. Views not shown are display: none, so their lazy images load only when
   chosen (every frame has the same shape, so a switch does not move the page). Without scripts
   the frames stack and the keys stay hidden. */
.meta-head p { text-wrap: pretty; }
.shot-screen { background: #efeee9; }
.console.is-keyed .shot[aria-hidden="true"] { display: none; }
.console:not(.is-keyed) .shot + .shot { border-top: 1px solid var(--line); }
.console:not(.is-keyed) .keys, .console:not(.is-keyed) .shot-open { display: none; }
.shot { position: relative; aspect-ratio: 16 / 9; min-width: 0; }
.shot-link { position: absolute; inset: 0; z-index: 1; display: block; cursor: zoom-in; }
.shot-link:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; border-radius: 12px; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.js .shot:not(.has-shot) img { visibility: hidden; }
/* While a screenshot loads the frame stays blank; its name shows only once the file is known to be missing. */
.js .shot:not(.no-shot) .shot-empty { visibility: hidden; }
.shot-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 16px; text-align: center; }
.shot-empty b { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.shot-empty span { font-family: var(--mono); font-size: 11.5px; color: var(--mid); }
.shot.has-shot .shot-empty { display: none; }
.console .keys { grid-auto-columns: minmax(min-content, 1fr); }
/* The caption of the current view, and beside it the control that opens it at full size. */
.shot-notes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 12px 8px 4px; }
.shot-note-stack { display: grid; }
.console.is-keyed .shot-note-stack > p { grid-area: 1 / 1; }
.console.is-keyed .shot-note-stack > p[aria-hidden="true"] { visibility: hidden; }
.shot-notes p { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 720px; text-wrap: pretty; }
.shot-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; line-height: 21px; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: 4px; }
.shot-open[hidden] { display: none; }
.shot-open:hover { color: var(--ink); }
.shot-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.shot-open svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* Start: the hero's keys over a dark screen; one pane per surface, all in one cell so
   switching keeps the height. Without scripts the panes stack and the keys stay hidden. */
.start { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.start .lede { margin-top: 16px; }
.term { font-family: var(--mono); background: var(--ink); color: #e7e6e1; border-radius: 14px; padding: 22px 24px; font-size: 13px; line-height: 1.65; overflow-x: auto; }
.term .c { color: #8d8c86; }
.term .p { color: #8d8c86; }
.start-inst .screen.term-screen { background: #1d1d1b; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); }
.start-inst .term { background: transparent; border-radius: 0; margin: 0; scrollbar-width: thin; scrollbar-color: #3a3a37 transparent; }
.start-inst:not(.is-keyed) .term + .term { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.start-inst .term .ln { display: block; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: calc((var(--i, 0) + 4) * 1ch); text-indent: calc((var(--i, 0) + 4) * -1ch); }
.start-inst:not(.is-keyed) .keys { display: none; }
.start-inst.is-keyed .term-screen { display: grid; }
.start-inst.is-keyed .term-screen > [data-pane] { grid-area: 1 / 1; min-width: 0; }
.start-inst.is-keyed .term-screen > [aria-hidden="true"] { visibility: hidden; }
.term.prompt { position: relative; }
.term.prompt p { margin: 0; }
.term.prompt > p.c { padding-right: 72px; }
.term.prompt pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: break-word; color: #fafaf7; }
.term-copy { position: absolute; top: 16px; right: 16px; appearance: none; font: 500 11.5px/1 var(--sans); color: #bdbcb6; background: transparent; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.term-copy:hover { color: #fafaf7; border-color: rgba(255, 255, 255, 0.34); }
.term-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.start-inst .keys { margin-top: 12px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot-in { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.foot nav { display: flex; gap: 22px; }
.foot nav a { text-decoration: none; color: var(--ink-2); }
.foot .note { margin-left: auto; color: var(--mid); font-size: 13px; }

/* Responsive */
/* The systems stack earlier than the rest, so a split screen keeps room for its transcript. */
@media (max-width: 1200px) {
  .system { grid-template-columns: 1fr; }
  .system.stack .instrument { order: -1; }
  .system-copy { max-width: 640px; }
  .system.stack .system-copy { max-width: none; }
  .system.stack .screen.r-wide { aspect-ratio: 16 / 10; }
}
@media (max-width: 1080px) {
  .hero-grid, .section-head, .start { grid-template-columns: 1fr; }
  .start { grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: 16px; }
  .section-head p, .system-copy { max-width: 640px; }
  .system.stack .system-copy { columns: auto; max-width: 640px; }
  .system.stack .system-copy .list { break-before: auto; }
  .what-head { margin-bottom: 28px; }
  .use-head, .meta-head { margin-bottom: 24px; }
}
@media (max-width: 940px) {
  html { scroll-padding-top: 108px; }
  .head-in { flex-wrap: wrap; height: auto; gap: 0 20px; padding-top: 12px; }
  .btn-line { margin-left: auto; }
  .nav { order: 3; flex: 0 0 calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter); gap: 20px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { font-size: 13.5px; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; }
  .review span { display: none; }
  .what-lede { font-size: 18px; line-height: 1.45; }
  .hero { padding: 32px 0 56px; }
  .section { padding: 48px 0; }
  .use-head, .meta-head { margin-bottom: 20px; }
  .what-head { margin-bottom: 24px; }
  .system + .system { margin-top: 56px; }
  .shot-empty b { font-size: 14px; }
  .shot-empty span { font-size: 10.5px; }
  .shot-notes p { font-size: 13px; }
  .shot-notes { gap: 16px; }
  .shot-open { font-size: 12.5px; line-height: 19.5px; }
  /* Phones: the frame takes the 4:5 shape of the other instruments and shows the capture at its
     full height, cropped to the console's middle pane, so its text stays readable. */
  .shot { aspect-ratio: 4 / 5; }
  .shot img { object-position: var(--pos, 50%) 0; }
  .shot[data-shot="system"] { --pos: 0%; }
  .shot[data-shot="topology"] { --pos: 46%; }
  .shot[data-shot="roster"] { --pos: 38%; }
  .shot[data-shot="roles"] { --pos: 36%; }
  .shot[data-shot="work"] { --pos: 100%; }
  .instrument { padding: 8px; border-radius: 18px; margin: 0 -6px; }
  .screen.r-hero, .screen.r-wide { aspect-ratio: 4 / 5; }
  .screen.split { aspect-ratio: auto; }
  .system.stack .screen.r-wide { aspect-ratio: 4 / 5; }
  .system.stack .screen.split { aspect-ratio: auto; }
  .screen.split .stage { position: relative; inset: auto; aspect-ratio: 1 / 1; }
  .transcript { position: relative; width: auto; height: 216px; border-left: 0; border-top: 1px solid var(--line); }
  .tx-head { padding: 10px 14px 8px; }
  .tx-lines { padding: 8px 14px 12px; }
  .tx-lines li { grid-template-columns: 46px minmax(0, 1fr); gap: 8px; font-size: 12px; }
  .key span { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.2; }
  .readout .moment span { font-size: 13px; }
  /* Clock beside the moment title, body at full width, so long captions do not push the legend. */
  [data-system] .readout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; align-content: start; min-height: 132px; }
  [data-system] .readout .moment { display: contents; }
  [data-system] .readout .moment b { grid-column: 1; grid-row: 1; margin: 0; }
  [data-system] .readout .clock { grid-column: 2; grid-row: 1; }
  [data-system] .readout .moment span { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .controls, .keys { gap: 4px; }
  .key { padding-left: 0; padding-right: 0; }
  .key span { font-size: 10.5px; letter-spacing: -0.01em; }
  .key-pause { width: 28px; }
  .key-pause span { visibility: hidden; }
  .legend .wide-only { display: none; }
  .key-progress { margin-right: 32px; }
  .term { font-size: 11.5px; padding: 18px; }
  .start-inst .term { padding: 18px 16px; }
  .term-copy { top: 12px; right: 12px; }
  .foot .note { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tx-lines li { animation: none; }
  * { transition: none !important; }
  .key-progress { display: none; }
}

/* Hero readout. The At home and At work scenes caption their own moments: the readout (moment
   title, clock, moment body) sits in that scene's note under its title, in place of the static
   caption (app.js moves it there). Otherwise it is parked and hidden. The note keeps the
   height of its tallest state (app.js), so switching scenes does not move the page. */
#hero-instrument .scene-note > .readout { display: none; }
#hero-instrument .scene-note > div > .readout { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 22px auto; gap: 0 12px; align-items: center; min-height: 0; padding: 4px 0 0; }
#hero-instrument .scene-note > div.live > span[data-copy] { display: none; }
#hero-instrument .readout .moment { display: contents; }
#hero-instrument .readout .moment b { grid-column: 1; grid-row: 1; margin: 0; min-height: 0; }
#hero-instrument .readout .moment span { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
#hero-instrument .readout .clock { grid-column: 2; grid-row: 1; gap: 6px; }
#hero-instrument .readout .clock svg { width: 22px; height: 22px; }
#hero-instrument .readout .clock .digits { font-size: 12.5px; color: var(--ink-2); }
.section-head p:empty { display: none; }

/* Meerkat Meta: what it adds, in four short blocks above the console. */
.meta-points { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin: 8px 0 40px; border-top: 1px solid var(--ink); }
.meta-point { padding-top: 16px; }
.meta-point h3 { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 8px; }
.meta-point p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
@media (max-width: 1080px) { .meta-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; } }
@media (max-width: 720px) { .meta-points { grid-template-columns: 1fr; gap: 0; border-top: 0; margin-bottom: 28px; } .meta-point { border-top: 1px solid var(--line); padding: 14px 0 16px; } .meta-point:first-child { border-top: 1px solid var(--ink); } }

/* At home: the facts sit under the instrument so the two columns end at about the same height. */
.system-main { min-width: 0; }
.facts-under { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 6px; padding: 0 8px; }
@media (max-width: 1200px) {
  .system-main { display: contents; }
  .system > .system-copy { order: 1; }
  .facts-under { order: 2; margin-top: 0; padding: 0; grid-template-columns: minmax(0, 1fr); max-width: 640px; }
}