/* ---- 00-tokens.css ---- */
/* canuzay.com/rescue: tokens, type and base. Owner: shell (evidence/orch/MODULES.md 1). Look: ART-BIBLE.md 4 and 5.
   Every module reads these names; add to them, never rename them. Dark theme only (space, the book's night). */
:root {
  /* colour: one warm off-white family, one accent (the reader's act), one cold note (only the beacon asks) */
  --void: #04060b;
  --ink: #f4f1ea;
  --ink-2: rgb(244 241 234 / .88);   /* telemetry, status, captions: at least 7:1 */
  --ink-3: rgb(244 241 234 / .78);   /* the floor for any secondary text */
  --book: #e2ddd2;
  --amber: #f5a65b;
  --amber-ink: #1a1206;
  --amber-text: #ffc792;
  --cold: #cfe3ff;
  /* type: the system faces (display sans, the book's serif, mono for numbers) */
  --sans: system-ui, -apple-system, 'Helvetica Neue', 'Segoe UI', Roboto, sans-serif;
  --serif: ui-serif, 'New York', Georgia, 'Noto Serif', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* motion: strong curves only, never ease-in on UI (ART-BIBLE 5) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --press: 120ms;
  /* layout */
  --g: clamp(22px, 6.7vw, 96px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* the frame unit: 1px up to the frames' 1440 x 900; larger screens keep the frames' proportions (at most 2x) */
  --u: max(1px, min(2px, 100vw / 1440, 100svh / 900));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--void); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--void); color: var(--ink); font: 400 16px/1.5 var(--sans);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
a, button { touch-action: manipulation; }
img { max-width: 100%; }
q { quotes: '“' '”' '‘' '’'; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 40; left: max(16px, var(--safe-l)); top: -100px; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: var(--void);
  font: 600 15px/1.2 var(--sans); text-decoration: none; }
.skip:focus { top: calc(var(--safe-t) + 12px); }
:focus-visible { outline: 2px solid var(--amber-text); outline-offset: 3px; }
/* Headings and blocks that the router focuses on a view change (tabindex -1) are not controls: no ring, whatever the
   input that led there. Specific enough (0,3,0) to win over a later [tabindex]:focus-visible; controls keep theirs. */
:root [tabindex='-1']:is(:focus, :focus-visible) { outline: none; }

/* ---------- Type ---------- */
.display { font-family: var(--sans); font-weight: 700; letter-spacing: -.034em; line-height: 1.04; text-wrap: balance; color: var(--ink); }
.book { font-family: var(--serif); font-weight: 400; letter-spacing: -.003em; line-height: 1.42; color: var(--book); text-wrap: pretty; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- The verb: the reader's act, the only saturated warm surface ---------- */
.verb { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 58px; padding: 0 32px; border-radius: 999px; text-decoration: none;
  background: linear-gradient(180deg, #f8b672, #f2a053); color: var(--amber-ink); border: 1px solid rgb(255 214 170 / .7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -2px 0 rgb(120 60 10 / .18), 0 10px 28px rgb(0 0 0 / .42);
  font: 600 18px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--press) var(--ease-out), box-shadow 200ms ease, opacity var(--press) ease; }
.verb:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .verb:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -2px 0 rgb(120 60 10 / .18), 0 12px 32px rgb(0 0 0 / .5); }
}
@media (prefers-reduced-motion: reduce) {
  .verb:active { transform: none; opacity: .84; }
}
@media (prefers-reduced-transparency: reduce) {
  .verb { background: #f5a65b; }
}
@media (forced-colors: active) {
  .verb { border: 1px solid ButtonText; forced-color-adjust: auto; }
}

/* ---- 10-shell.css ---- */
/* Top bar, views, opening, flight log, chapter end, view transitions. Owner: shell (MODULES.md 1).
   Look: ART-BIBLE.md 3.1, 3.4, 4, 5; sizes from the approved plates (phase1b/art/build/acilis.html, kayit.html).
   Layers: stage 0, view content 1-2, top bar 20, skip link 40. */

/* ---------- Top bar: glass pills over a scrim, so no pill ever sits on busy picture ---------- */
.top { position: fixed; z-index: 20; inset: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: calc(var(--safe-t) + 14px) max(16px, var(--safe-r)) 0 max(16px, var(--safe-l));
  pointer-events: none; view-transition-name: top; }
.top::before { content: ''; position: absolute; z-index: -1; inset: 0 0 auto; height: calc(var(--safe-t) + 106px); pointer-events: none;
  background: linear-gradient(180deg, rgb(4 6 11 / .92) 0, rgb(4 6 11 / .78) 45%, rgb(4 6 11 / 0) 100%); }
/* over reading text the scrim is a little denser, so lines scroll away under a calm edge */
html:is([data-view='note'], [data-view='foreword']) .top::before {
  background: linear-gradient(180deg, rgb(4 6 11 / .96) 0, rgb(4 6 11 / .9) 50%, rgb(4 6 11 / 0) 100%); }
.top > .pill { pointer-events: auto; }
.top .lang { margin-left: auto; }
.pill[hidden] { display: none; }

/* A web approximation of Apple's Liquid Glass (backdrop-filter and layered edges), not an Apple material. */
.pill { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 17px; border-radius: 999px;
  font: 500 15px/1 var(--sans); letter-spacing: .005em; color: var(--ink); text-decoration: none; white-space: nowrap;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--press) var(--ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease, opacity var(--press) ease; }
.pill:active { transform: scale(.97); }
.pill .ico { opacity: .9; }
.glass { isolation: isolate; border: 1px solid rgb(255 255 255 / .14);
  background: linear-gradient(180deg, rgb(255 255 255 / .13), rgb(255 255 255 / .04)), rgb(14 17 23 / .42);
  -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), inset 0 -1px 0 rgb(255 255 255 / .05), 0 10px 30px rgb(0 0 0 / .32); }
.pill .mark { display: grid; place-items: center; width: 30px; height: 30px; margin-left: -10px; border-radius: 999px;
  font: italic 500 17px/1 var(--serif); letter-spacing: -.06em; background: rgb(255 255 255 / .1); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22); }
.lang .fish { transform-origin: 40% 50%; }

/* Listen: the narration's own play control (the only one on the page). Playing: the pause glyph and Duraklat. */
.listen .ico-pause, .listen[data-playing='true'] .ico-vol { display: none; }
.listen[data-playing='true'] .ico-pause { display: block; }
.listen[data-playing='true'] { color: var(--amber-text); border-color: rgb(245 166 91 / .5); }
/* pressed, but the voice is still loading or stalled: a quiet, still cue (no spinner, no loop) */
.listen[data-waiting='true'] .ico { opacity: .5; }
.js .listen { cursor: pointer; }
html:not(.js) .listen { display: none; }

@media (hover: hover) and (pointer: fine) {
  .glass:hover { background-color: rgb(40 48 66 / .62); }
}

/* ---------- Views: one at a time with JS; without JS they stack into one readable document ---------- */
.view { position: relative; min-height: 100vh; min-height: 100svh; }
.js .view { display: none; }
.js .view.is-active { display: block; }
/* Before the router runs, show the view the address points at (or the opening), so the first paint is right. */
.js:not(.routed) .view:is(:target, :has(:target)) { display: block; }
.js:not(.routed) main:not(:has(:target)) > .view-opening { display: block; }
html[data-view='opening'], html[data-view='log'] { overscroll-behavior-y: none; }

.stage { position: absolute; inset: 0; overflow: hidden; }

/* ---------- Opening (frame 1): text on black, never over the capsule ---------- */
.view-opening { overflow: hidden; overflow: clip; }
/* Composition anchors the renderer reads (MODULES.md 4.7): the capsule's bounding box, mast tip to engine bells, as
   fractions of the stage: its centre (--cap-x, --cap-y) and height (--cap-h). Measured from the approved frames. */
.view-opening .stage { --cap-x: .39; --cap-y: .315; --cap-h: .35; }
.nojs { position: absolute; z-index: 2; top: calc(var(--safe-t) + 76px); left: max(24px, var(--safe-l)); right: 24px; font: 500 14px/1.4 var(--sans); color: var(--ink-3); }
.js .nojs { display: none; }
.intro { position: absolute; z-index: 2; left: max(24px, var(--safe-l)); right: max(22px, var(--safe-r)); bottom: calc(var(--safe-b) + 50px);
  transition: opacity 240ms var(--ease-out); }
.view-opening.is-leaving .intro { opacity: 0; pointer-events: none; }
html:not(.js) .intro .chip { display: none; }
.view-opening .headline { margin-top: 14px; font-size: 44px; line-height: 1.04; letter-spacing: -.026em; text-shadow: 0 2px 30px rgb(4 6 11 / .6); }
.view-opening .lead { margin-top: 14px; max-width: 20em; font-size: 19.5px; text-shadow: 0 1px 16px rgb(4 6 11 / .9); }
.view-opening .verb { margin-top: 26px; }

/* The status chip (the opening's, and the boil-off's, which the scene builds): the beacon asks, nobody answers. */
.chip { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.3 var(--sans); letter-spacing: .01em; color: var(--ink-2); white-space: nowrap; }
.chip .ping { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--cold); box-shadow: 0 0 0 3px rgb(207 227 255 / .14); }
.chip-t { color: var(--ink); font: 600 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
.chip-sep { width: 1px; height: 15px; flex: none; background: rgb(244 241 234 / .4); }
.chip-n { font-variant-numeric: tabular-nums; }   /* the beacon's count (scenes writes [data-signal]): its digits hold still */

/* ---------- Flight log (frame 2): the book's contents as one route, on the porthole plate ---------- */
.view-log { overflow: hidden; overflow: clip; }
.log-plate { position: absolute; z-index: 0; inset: 0 0 auto; height: 100vh; height: 100svh; overflow: hidden; pointer-events: none; }
.log-plate img { display: block; width: 100%; height: auto; max-width: none; margin-top: calc(var(--safe-t) - 44px); opacity: 0; transition: opacity 600ms ease; }
.log-plate img.is-in, html:not(.js) .log-plate img { opacity: 1; }
.log-in { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
  padding: calc(var(--safe-t) + 88px) max(24px, var(--safe-r)) calc(var(--safe-b) + 46px) max(24px, var(--safe-l)); }
.log-head { max-width: 230px; }
.log-title { font-size: 38px; line-height: .98; letter-spacing: -.026em; }
.log-sub { margin-top: 10px; font: 500 15px/1.3 var(--sans); letter-spacing: -.005em; color: var(--ink-2); }

/* The route: every stop is a dot on one line, and each stop draws the leg from its own dot to the next one. The share
   of a leg the reader has travelled (--t, 0 to 1, from app.js) is solid; the rest of it is dashed. A stop the reader
   has reached is a white dot, where they are now is amber, a stop ahead is hollow. */
.view-log .track { list-style: none; margin: 0 -6px 0 -6px; padding: 0; --node: 22px; --no: 32px; --c: 10.5px; --dot: 9px; --here: 12px; }
.view-log .track-open { margin-top: 41px; }
.view-log .row, .view-log .track-k { position: relative; }
.view-log .row { display: grid; grid-template-columns: var(--node) var(--no) minmax(0, 1fr); align-items: baseline; padding-bottom: 9px; }
.view-log .row::before, .view-log .track-k::before { content: ''; position: absolute; left: calc(var(--node) / 2 - 1px); top: calc(var(--c) + var(--t, 0) * 100%); bottom: calc(1px - var(--c));
  border-left: 2px dashed rgb(244 241 234 / .3); }
.view-log .row::after { content: ''; position: absolute; left: calc(var(--node) / 2 - 1px); top: var(--c); height: calc(var(--t, 0) * 100%);
  border-left: 2px solid rgb(244 241 234 / .62); }
.view-log .track-soon > .row:last-child::before, .view-log .track-soon > .row:last-child::after { content: none; }
.view-log .row .node { position: absolute; z-index: 1; left: calc(var(--node) / 2); top: var(--c); width: var(--dot); height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2); border-radius: 50%; background: var(--void); box-shadow: inset 0 0 0 1.5px rgb(244 241 234 / .7); }
.view-log .row .no { grid-column: 2; font: 500 14px/1 var(--mono); letter-spacing: .02em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.view-log .row .t { grid-column: 3; font-size: 16px; line-height: 1.22; letter-spacing: -.012em; color: rgb(244 241 234 / .9); text-decoration: none; }
.view-log .row .t em { font-style: normal; font-weight: 500; color: var(--ink-2); }
.view-log .row a.t { padding: 6px 0; margin: -6px 0; color: var(--ink); transition: opacity var(--press) ease; }
.view-log .row a.t:active { opacity: .64; }
.view-log .row[data-state='done'] .node { background: var(--ink); box-shadow: none; }
.view-log .row[data-state='done'] .no { color: var(--ink-2); }
.view-log .row:is([data-state='done'], [data-state='here']) .t { font-weight: 600; }
.view-log .row:is([data-state='done'], [data-state='here'], [data-state='open']) .t em { font-weight: inherit; color: inherit; }
.view-log .row[data-state='here'] .node { width: var(--here); height: var(--here); margin: calc(var(--here) / -2) 0 0 calc(var(--here) / -2);
  background: var(--amber); box-shadow: 0 0 0 4px rgb(245 166 91 / .2); }
.view-log .row[data-state='here']::before { border-left-color: rgb(244 241 234 / .34); }
.view-log .row[data-state='here'] .no { color: var(--amber-text); }
/* the label between the open stops and the ones still ahead: no dot of its own, the dashed line runs through it */
.view-log .track-k { --node: 22px; --c: 10.5px; margin: 0 -6px; padding: 0 0 10px var(--node);
  font: 600 14px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
/* the chapters not yet published read as unavailable: dimmed, with nothing to hover or press. Still readable: the titles
   at least 4.5:1, the mono numbers 7:1 */
.view-log .track-soon > .row :is(.t, .t em) { color: rgb(244 241 234 / .56); }
.view-log .track-soon > .row .no { color: rgb(244 241 234 / .66); }
.view-log .track-soon > .row .node { box-shadow: inset 0 0 0 1.5px rgb(244 241 234 / .36); }
/* Mission-elapsed time of the scene the reader completed in that chapter */
.view-log .ev { grid-column: 3; margin-top: 6px; font: 500 14px/1.3 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.view-log .ev b { font-weight: 600; color: var(--ink); }
/* Where you left off: the last sentence you read, in the book's own serif */
.view-log .stop { grid-column: 3; margin-top: 10px; padding: 11px 14px 12px; border-radius: 14px; border: 1px solid rgb(245 166 91 / .36);
  background: linear-gradient(rgb(245 166 91 / .1), rgb(245 166 91 / .1)), rgb(9 8 9 / .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.view-log .stop-k { font: 600 14px/1.15 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--amber-text); }
.view-log .stop-q { display: block; margin-top: 8px; font: italic 400 15px/1.35 var(--serif); color: var(--book); text-wrap: pretty; }
/* The one primary action stands at the reader's stop: inside the card, or under the first stop on a first visit. */
.view-log .go { grid-column: 3; display: flex; margin: 14px 0 6px; }
.view-log .stop .go { margin: 14px 0 0; }
.log-go { height: 54px; padding: 0 28px; font-size: 17px; }

@media (hover: hover) and (pointer: fine) {
  .view-log .row a.t { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .22em;
    transition: text-decoration-color 200ms ease, opacity var(--press) ease; }
  .view-log .row a.t:hover { text-decoration-color: rgb(244 241 234 / .55); }
}

/* ---------- Chapter end: the next chapter's title, still ahead ---------- */
.ch-end { max-width: 34em; margin: 0 auto; padding: 14svh 0 calc(var(--safe-b) + 20svh); font-size: 19px; }
.ch-end-title { font-size: 34px; line-height: 1.08; letter-spacing: -.026em; }
.ch-end-soon { margin-top: 14px; font: 500 18px/1.4 var(--sans); color: var(--ink-2); }
.ch-end-go { margin-top: 30px; }

/* ---------- Small phones: the four pills still fit on one line ---------- */
@media (max-width: 899px) {
  /* the chip carries four parts on a phone (waiting, the time, the beacon's signals, the reply): tighter, on one line */
  .intro .chip { gap: 6px; letter-spacing: 0; }
  .intro .chip, .intro .chip-t { font-size: 15px; }
  .listen { width: 44px; padding: 0; justify-content: center; }
  .listen .listen-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 399px) {
  /* English keeps 15 px on every phone; Turkish is longer and takes the 14 px floor below 400 px */
  html[lang='tr'] .intro .chip, html[lang='tr'] .intro .chip-t { font-size: 14px; }
}
@media (max-width: 379px) {
  .intro { left: max(18px, var(--safe-l)); right: max(16px, var(--safe-r)); }
  .intro .chip { gap: 5px; }
}
@media (max-width: 374px) {
  .top { gap: 8px; }
  .pill { gap: 7px; padding: 0 13px; }
  .pill .mark { margin-left: -6px; }
}
/* Where the four parts cannot share one line, the reply takes its own: Turkish on a 320 px screen (324 px at the 14 px
   floor, against 286), and wherever app.js measures an overflow (.is-two: another platform's font, an hour's clock) */
.intro .chip.is-two { flex-wrap: wrap; row-gap: 4px; }
.intro .chip.is-two .chip-s + .chip-sep { display: none; }
.intro .chip.is-two .chip-r { flex-basis: 100%; padding-left: 12px; }
@media (max-width: 339px) {
  html[lang='tr'] .intro .chip { flex-wrap: wrap; row-gap: 4px; }
  html[lang='tr'] .intro .chip-s + .chip-sep { display: none; }
  html[lang='tr'] .intro .chip-r { flex-basis: 100%; padding-left: 12px; }
  .lang { width: 44px; padding: 0; justify-content: center; }
  .lang > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Short phones (portrait): a smaller capsule and type, so words and picture never meet ---------- */
@media (max-width: 899px) and (max-height: 740px) and (orientation: portrait) {
  .view-opening .stage { --cap-y: .3; --cap-h: .3; }
  .intro { bottom: calc(var(--safe-b) + 32px); }
  .view-opening .headline { font-size: 38px; }
  .view-opening .lead { margin-top: 12px; font-size: 18px; }
  .view-opening .verb { margin-top: 20px; height: 54px; }
  /* the log's head gives up a little height, so the action at the reader's stop stays on screen */
  .log-in { padding-top: calc(var(--safe-t) + 76px); }
  .log-title { font-size: 32px; }
  .log-sub { margin-top: 6px; }
  .view-log .track-open { margin-top: 24px; }
}
/* The Turkish headline's longest word ("kurtarmayacak.", about 8.5em in wide system fonts) must fit a phone column: 10vw
   caps it. English fits at the base sizes and keeps them. */
@media (max-width: 599px) and (orientation: portrait) {
  :lang(tr) .view-opening .headline { font-size: min(44px, 10vw); }
}
@media (max-width: 599px) and (max-height: 740px) and (orientation: portrait) {
  :lang(tr) .view-opening .headline { font-size: min(38px, 10vw); }
}


/* ---------- Tablets in portrait ---------- */
@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  .view-opening .stage { --cap-x: .5; --cap-y: .31; --cap-h: .36; }
  .intro { left: max(48px, var(--safe-l)); right: 48px; bottom: calc(var(--safe-b) + 72px); }
  .view-opening .headline { font-size: 60px; letter-spacing: -.034em; line-height: 1.02; }
  .view-opening .lead { font-size: 22px; max-width: 22em; }
  .log-in { padding-left: max(48px, var(--safe-l)); padding-right: 48px; }
  .log-head { max-width: 320px; }
}

/* ---------- Phones in landscape: words left, picture right ---------- */
@media (max-width: 899px) and (orientation: landscape) {
  .top::before { height: calc(var(--safe-t) + 84px); }
  .view-opening .stage { --cap-x: .75; --cap-y: .56; --cap-h: .72; }
  .intro { left: max(24px, var(--safe-l)); right: auto; width: 48%; bottom: calc(var(--safe-b) + 20px); }
  .view-opening .headline { margin-top: 10px; font-size: 32px; }
  .view-opening .lead { margin-top: 10px; font-size: 17px; }
  .view-opening .verb { margin-top: 16px; height: 50px; padding: 0 26px; font-size: 17px; }
  .log-plate img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: calc(100% + max(0px, 480px - 100vw + 80svh)) 50%; }
  .log-in { padding-top: calc(var(--safe-t) + 76px); padding-left: max(24px, var(--safe-l)); }
  .log-head { max-width: 420px; }
  .view-log .track, .view-log .track-k { max-width: 440px; }
}

/* ---------- Desktop (frames at 1440 x 900) ---------- */
@media (min-width: 900px) {
  .top { padding: calc(var(--safe-t) + 28px) max(40px, var(--safe-r)) 0 max(40px, var(--safe-l)); }
  .top::before { height: calc(var(--safe-t) + 128px); }

  /* Sizes follow --u (00-tokens.css): 1px up to 1440 x 900, the frame's proportions on larger screens. */
  .view-opening .stage { --cap-x: .8; --cap-y: .515; --cap-h: .69; }
  .intro { --col: min(calc(640 * var(--u)), 44vw); left: max(calc(96 * var(--u)), var(--safe-l)); right: auto; bottom: clamp(28px, 23.8svh, calc(214 * var(--u))); width: var(--col); }
  .intro .chip { gap: calc(10 * var(--u)); }
  .intro .chip, .intro .chip-t { font-size: calc(17 * var(--u)); }
  .intro .chip .ping { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
  .intro .chip-sep { height: calc(15 * var(--u)); }
  .view-opening .headline { margin-top: calc(18 * var(--u)); max-width: 7.2em; font-size: min(calc(var(--col) * .1438), 10.2svh); line-height: 1.02; letter-spacing: -.034em; }
  .view-opening .lead { margin-top: calc(22 * var(--u)); max-width: min(22em, 100%); font-size: clamp(18px, 2.7svh, calc(24 * var(--u))); }
  .view-opening .verb { margin-top: calc(36 * var(--u)); height: calc(60 * var(--u)); padding: 0 calc(34 * var(--u)); font-size: calc(19 * var(--u)); }
  .nojs { top: calc(var(--safe-t) + 108px); left: max(calc(96 * var(--u)), var(--safe-l)); }

  /* the plate stays clear of the words: on screens narrower than 16:10 it slides right until the porthole does; and its
     dark side reaches past the longest title and the card, so no word sits on the lit padding */
  .log-plate::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgb(4 6 11 / .9) 0, rgb(4 6 11 / .88) calc(660 * var(--u)), rgb(4 6 11 / 0) calc(790 * var(--u))); }
  .log-plate img { width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: calc(100% + max(0px, 700 * var(--u) - 100vw + 80svh)) 50%; }
  .log-in { padding: calc(var(--safe-t) + 104 * var(--u)) calc(40 * var(--u)) calc(var(--safe-b) + 60 * var(--u)) max(calc(96 * var(--u)), var(--safe-l)); }
  .log-head { max-width: none; }
  .log-title { font-size: calc(56 * var(--u)); line-height: 1; letter-spacing: -.034em; }
  .log-sub { margin-top: calc(12 * var(--u)); font-size: calc(18 * var(--u)); }
  .view-log .track { width: calc(620 * var(--u)); max-width: 100%; margin: 0 calc(-4 * var(--u));
    --node: calc(28 * var(--u)); --no: calc(42 * var(--u)); --c: calc(12 * var(--u)); --dot: calc(10 * var(--u)); --here: calc(13 * var(--u)); }
  .view-log .track-open { margin-top: calc(36 * var(--u)); }
  .view-log .row { padding-bottom: calc(10 * var(--u)); }
  .view-log .row .t { font-size: calc(19 * var(--u)); }
  .view-log .row .no, .view-log .ev, .view-log .stop-k { font-size: calc(15 * var(--u)); }
  .view-log .ev { margin-top: calc(6 * var(--u)); }
  .view-log .track-k { margin: 0 calc(-4 * var(--u)); padding: 0 0 calc(10 * var(--u)) calc(28 * var(--u)); --node: calc(28 * var(--u)); --c: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
  .view-log .stop { max-width: calc(470 * var(--u)); margin-top: calc(10 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); }
  .view-log .stop-q { margin-top: calc(8 * var(--u)); font-size: calc(17 * var(--u)); }
  .view-log .go { margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); }
  .view-log .stop .go { margin: calc(14 * var(--u)) 0 0; }
  .log-go { height: calc(56 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: calc(18 * var(--u)); }

  .ch-end { font-size: 21px; }
  .ch-end-title { font-size: 44px; letter-spacing: -.026em; }
}
/* short desktop windows: the opening keeps its words inside the frame */
@media (min-width: 900px) and (max-height: 640px) {
  .intro { bottom: 28px; }
  .view-opening .lead { margin-top: 14px; }
  .view-opening .verb { margin-top: 22px; height: 52px; }
}

/* ---------- View changes: a 280 ms crossfade with a 2 px blur bridge (reduced motion: 150 ms, opacity only) ---------- */
::view-transition-old(root) { animation: 280ms var(--ease-out) both rn-view-out; }
::view-transition-new(root) { animation: 280ms var(--ease-out) both rn-view-in; }
::view-transition-old(top), ::view-transition-new(top) { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
::view-transition-group(root), ::view-transition-group(top) { animation-duration: 280ms; }
@keyframes rn-view-out { to { opacity: 0; filter: blur(2px); } }
@keyframes rn-view-in { from { opacity: 0; filter: blur(2px); } }
@keyframes rn-fade-out { to { opacity: 0; } }
@keyframes rn-fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: 150ms ease both rn-fade-out; }
  ::view-transition-new(root) { animation: 150ms ease both rn-fade-in; }
  ::view-transition-old(top), ::view-transition-new(top), ::view-transition-group(root), ::view-transition-group(top) { animation-duration: 150ms; }
  .pill:active { transform: none; opacity: .8; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(14 17 23); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .view-log .stop { background: rgb(28 21 14); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .glass { background: rgb(14 17 23 / .94); border-color: rgb(255 255 255 / .5); }
  .view-log .row .t, .view-log .row .no, .view-log .track-k, .ch-end-soon { color: var(--ink); }
  .view-log .track-soon > .row :is(.t, .t em, .no) { color: var(--ink-3); }
}
@media (forced-colors: active) {
  .pill { border: 1px solid ButtonText; forced-color-adjust: auto; }
  .view-log .stop { border: 1px solid CanvasText; }
  .view-log .row .node { forced-color-adjust: none; background: Canvas; box-shadow: inset 0 0 0 2px CanvasText; }
  .view-log .row[data-state='done'] .node { background: CanvasText; }
  .view-log .row[data-state='here'] .node { background: Highlight; box-shadow: none; }
  .listen[data-playing='true'] { border-color: Highlight; }
}

/* Chapter documents use the same pills. Compact home still has its accessible name. */
html[data-page='chapter'] .top::before { height: calc(100% + 48px);
  background: linear-gradient(180deg, var(--void) 0, var(--void) calc(100% - 40px), transparent 100%); }
.listen-soon { cursor: default; color: var(--ink-2); }
.safety { max-width: 46em; margin: 0 auto; padding: 48px max(22px, var(--safe-r)) calc(36px + var(--safe-b));
  font: 400 14px/1.65 var(--sans); color: var(--ink-3); }
.safety a { color: var(--ink); text-underline-offset: .2em; }
.safety p { margin: 0; }
.stop-context { margin: 12px 0 8px; font: 500 14px/1.5 var(--sans); color: var(--ink-2); }
.care-line { display: block; margin-top: 8px; }
@media (max-width: 600px) {
  html[data-page='chapter'] .top { gap: 6px; padding-left: 12px; padding-right: 12px; }
  html[data-page='chapter'] .top .pill { padding: 0 12px; gap: 6px; font-size: 14px; }
  html[data-page='chapter'] .top .home { width: 44px; padding: 0; justify-content: center; }
  html[data-page='chapter'] .top .home .mark { margin: 0; }
  html[data-page='chapter'] .home-name { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  html.listen-pending .top { flex-wrap: wrap; }
  html.listen-pending .listen-soon { margin-left: auto; }
  html.listen-pending .view-chapter { padding-top: calc(var(--safe-t) + 148px); }
}
@media (max-width: 359px) {
  html[data-page='chapter'] .top .route { width: 44px; padding: 0; justify-content: center; }
  html[data-page='chapter'] .top .route-name { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
}

/* ---- 20-read.css ---- */
/* The reading column: ART-BIBLE 3.5 and 4. Owner: reading (MODULES.md 1).
   One calm black column. The book in the system serif (its own voice: book sentences only), headings in the display
   sans. No 3D, no scroll effects, no paragraph reveals. Two things change, by colour and opacity only (nothing
   travels, so reduced motion keeps them): while Listen reads, the other sentences step back and the one being read
   stands in full ink with an amber rule beside it; a resume lifts its sentence once. Square marks: only pills, buttons
   and cards round. */
.view-chapter { padding: calc(env(safe-area-inset-top, 0px) + 120px) 22px 0; overflow-x: clip; }
.rd { position: relative; max-width: 34em; margin: 0 auto; font: 400 19px/1.62 var(--serif); letter-spacing: -.003em; color: var(--book);
  font-optical-sizing: auto; font-kerning: normal; hanging-punctuation: first last; overflow-wrap: break-word; }
.rd > p { margin: 0 0 1em; text-wrap: pretty; }
/* A hash jump into the reading (a scene's Continue, a shared sentence) lands near the reading line, not under the bar. */
.rd .bk, .rd .s { scroll-margin-top: 30svh; }
/* A chapter that ends on reading text (the Foreword) leaves room for its last sentence to reach the reading line: the
   line needs 65% of the viewport below it, and the chapter end card after it already gives about 450 px (measured at
   375 to 1440 px wide). lvh: the reading line moves down when a phone's address bar collapses. */
.rd:not(:has(> .scene:last-child)) { padding-bottom: max(0px, calc(65lvh - 420px)); }

.rd-h2 { margin: 0 0 1.1em; font: 700 36px/1.06 var(--sans); letter-spacing: -.026em; color: var(--ink); text-wrap: balance; }
.rd-h3 { margin: 2.4em 0 .75em; font: 650 25px/1.14 var(--sans); letter-spacing: -.026em; color: var(--ink); text-wrap: balance; }

/* Lists keep the book's look, with the book's own marker as a real list marker (so they stay lists for screen readers).
   TR's '- ' lines and EN's '- ' list: the hyphen hangs in a gutter, the items sit close. EN's '– ' lines are paragraphs
   in the book: the en dash leads the line and they keep the paragraph spacing. */
.rd-list { margin: 0 0 1em; padding: 0 0 0 2.2em; list-style: outside '-\00a0\00a0\00a0\00a0'; }
.rd-list > li { margin: 0 0 .2em; }
.rd-dash { padding: 0; list-style: inside '\2013\00a0'; }
.rd-dash > li { margin: 0 0 1em; }

/* TR's '---': the book's full-width hairline. */
.rd-rule { margin: 2.4em 0; border: 0; height: 1px; background: rgb(244 241 234 / .22); }

.rd ::selection { background: rgb(244 241 234 / .26); color: var(--ink); }

/* Listen (book flow and the scenes' lines alike). A wash behind the words measured 1.3:1 on a phone in round 2, so the
   sentence is marked by contrast instead: while the voice reads (.is-listening, set by reader.js), every other sentence
   of the chapter steps back to 56% (5.0:1 on the page, still AA), the one being read stands in full ink (18:1), and a
   2 px amber rule stands in the margin beside its lines (10:1). 180 ms ease, colour and opacity only; pause returns
   the page to normal. The list markers and the door's quoted lead step back with the sentences. */
.s, .rd-list > li, .rd .scene-lead { transition: color 180ms ease; }
.rd.is-listening :is(.s, .rd-list > li, .scene-lead) { color: rgb(226 221 210 / .56); }
.rd.is-listening .s.is-reading { color: var(--ink); }
.rd-mark { position: absolute; z-index: 1; top: 0; left: 0; width: 2px; height: 0; background: var(--amber); opacity: 0;
  pointer-events: none; transition: opacity 180ms var(--ease-out); }   /* it appears and goes: ease-out; the text's colour: ease */
.rd-mark.is-on { opacity: 1; }
.rd-mark.is-slow { transition-duration: 600ms; }   /* the resume mark lets go slowly; the voice's moves on at once */
@media (prefers-contrast: more) {
  .rd.is-listening :is(.s, .rd-list > li, .scene-lead) { color: rgb(226 221 210 / .75); }   /* 8.5:1 */
}

/* Resume: once, where the reader left off, the sentence lifts to full ink and the amber rule stands beside it (180 ms
   in, a hold long enough for the eye to land after the jump, then both let go). A locator, not a control: it fires
   once per resume, so keyframes are fine; the frames keep the sentence's own colour at both ends. */
@keyframes rd-flash { 15%, 55% { color: var(--ink); } }
.s.is-flash { animation: rd-flash 1300ms ease; }

@media (forced-colors: active) {
  .rd.is-listening .s.is-reading, .s.is-flash { forced-color-adjust: none; background-color: Highlight; color: HighlightText; animation: none; }
  .rd-mark { forced-color-adjust: none; background: Highlight; }
}

@media (min-width: 900px) {
  .view-chapter { padding-top: 176px; }
  .rd { font-size: 21px; }
  .rd-h2 { font-size: 54px; line-height: 1.04; letter-spacing: -.034em; }
  .rd-h3 { font-size: 31px; }
}

/* ---------- The player (listen.js builds it on the first Listen): the narration's own controls ----------
   A card at the bottom over a scrim, like the top bar: so reading text scrolls away under a calm edge. It comes
   with the first press and stays for the chapter (paused too: the amber rule then marks where the voice stands, and a
   tap on any sentence moves it); it steps aside over a scene (whose control sits at the bottom) and on other views.
   Motion: in 240 ms, away 200 ms (ease-out, a 16 px rise); reduced motion: opacity only. Nothing moves on a key press. */
.player { position: fixed; z-index: 20; inset: auto 0 0; padding: 0 max(10px, var(--safe-r)) calc(var(--safe-b) + 10px) max(10px, var(--safe-l));
  pointer-events: none; transition: transform 240ms var(--ease-out), opacity 240ms var(--ease-out), visibility 0s; }
.player::before { content: ''; position: absolute; z-index: -1; inset: -40px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(4 6 11 / 0) 0, rgb(4 6 11 / .86) 50%, var(--void) 78%); }
.player.is-away { transform: translateY(16px); opacity: 0; visibility: hidden;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.pl-in { position: relative; pointer-events: auto; max-width: 560px; margin: 0 auto; padding: 4px 6px 6px 16px; border-radius: 26px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'bar close' 'keys keys'; align-items: center; column-gap: 2px;
  border: 1px solid rgb(255 255 255 / .14); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 10px 30px rgb(0 0 0 / .4);
  background: linear-gradient(180deg, rgb(255 255 255 / .09), rgb(255 255 255 / .03)), rgb(12 15 21 / .96); }
/* No backdrop blur here, unlike the top pills: a card this size blurring text that scrolls under it on every frame
   stalled the frame loop by up to 1.3 s (the highlight then lagged the voice); over the scrim it reads the same. */
.pl-bar { grid-area: bar; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.pl-keys { grid-area: keys; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: center; justify-items: center; }
.pl-close { grid-area: close; }
.pl-t { min-width: 4ch; font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pl-end { text-align: right; }

.pl-b { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; height: 44px; padding: 0 6px;
  border-radius: 999px; color: var(--ink); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--press) var(--ease-out), background-color 200ms ease; }
.pl-b:active { transform: scale(.94); }
.pl-b .ico { width: 22px; height: 22px; }
.pl-n { font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pl-prev .ico, .pl-next .ico { fill: currentColor; stroke-width: 1.4; }
.pl-play { width: 52px; height: 52px; background: var(--ink); color: var(--void); }
.pl-play .ico { width: 24px; height: 24px; fill: currentColor; stroke-width: 1.2; }
.pl-play .ico-pause, .pl-play[data-playing='true'] .ico-play { display: none; }
.pl-play[data-playing='true'] .ico-pause { display: block; }
.pl-play[data-waiting='true'] .ico { opacity: .45; }   /* pressed, the voice still loading or stalled: still, no spinner */
.pl-close .ico { width: 18px; height: 18px; opacity: .8; }

/* the position: drag anywhere on it (the page follows the sentence under the finger), or its keys */
.pl-seek { position: relative; display: flex; align-items: center; height: 44px; touch-action: none; cursor: pointer; border-radius: 6px; }
.pl-track { position: relative; flex: 1; height: 4px; border-radius: 4px; overflow: hidden; background: rgb(244 241 234 / .24); }
.pl-fill { position: absolute; inset: 0; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; }
.pl-knob { position: absolute; inset: 50% 0 auto; height: 0; pointer-events: none; }
.pl-thumb { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink);
  box-shadow: 0 1px 4px rgb(0 0 0 / .55); transition: transform var(--press) var(--ease-out); }
.pl-seek.is-drag .pl-thumb { transform: scale(1.3); }

.pl-rate select { height: 44px; min-width: 66px; padding: 0 12px; border: 1px solid rgb(255 255 255 / .2); border-radius: 999px; appearance: none; -webkit-appearance: none;
  background: rgb(255 255 255 / .06); color: var(--ink); font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; text-align: center; text-align-last: center; cursor: pointer; }

@media (hover: hover) and (pointer: fine) {
  .pl-b:hover { background-color: rgb(255 255 255 / .1); }
  .pl-play:hover { background-color: #fff; }
  .pl-rate select:hover { background-color: rgb(255 255 255 / .12); }
  .is-seekable .rd .s[data-t]:hover { color: var(--ink); }
}
/* while the player is open a sentence is a place in the narration; paused, the one the voice stands on is in full ink */
.is-seekable .rd .s[data-t] { cursor: pointer; }
.rd .s.is-cued { color: var(--ink); }
/* room under the last words for the bar */
html.has-player .view-chapter { padding-bottom: calc(var(--safe-b) + 150px); }

@media (min-width: 760px) {
  .player { padding-bottom: calc(var(--safe-b) + 18px); }
  .pl-in { max-width: 820px; padding: 6px 8px; border-radius: 999px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'keys bar close'; column-gap: 14px; }
  .pl-keys { display: flex; gap: 2px; }
  html.has-player .view-chapter { padding-bottom: calc(var(--safe-b) + 110px); }
}
@media (prefers-reduced-motion: reduce) {
  .player.is-away { transform: none; }
  .player { transition-property: opacity, visibility; }
  .pl-b:active { transform: none; opacity: .8; }
  .pl-seek.is-drag .pl-thumb { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .pl-in { background: #10141b; }
}
@media (forced-colors: active) {
  .pl-in { border: 1px solid CanvasText; }
  .pl-play { border: 1px solid ButtonText; }
  .pl-fill, .pl-thumb { forced-color-adjust: none; background: Highlight; }
  .pl-track { border: 1px solid CanvasText; }
}

.chapter-epigraph { margin: 0 0 2.5em; font-style: italic; color: var(--ink); }
.rd .bk[data-src='EN:248'], .rd .bk[data-src='TR:250'] { margin-bottom: .65em; }

/* Long chapter headings wrap more often than the package-1 headings. Keep their lines distinct. */
html[data-page='chapter'] .rd-h2,
html[data-page='chapter'] .ch-end-title { line-height: 1.2; }
html[data-page='chapter'] .rd-h3 { line-height: 1.25; }

/* Text-only closing pages keep navigation outside the book article. */
main > .ch-end { width: calc(100% - 44px); }
.site-farewell { font: 500 19px/1.5 var(--sans); color: var(--ink-2); }
.ch-end-prev { margin-right: 24px; }

/* ---- 30-scene.css ---- */
/* The scene sections inside the reading flow (the door, the boil-off) and the hold control. Owner: scenes.
   Look: ART-BIBLE 3.2, 3.3, 4 and 5; sizes from the approved plates kapi.html, kapi-acik.html and kaynama.html.
   Stage anchors for the renderer (MODULES.md 4.7; gfx re-reads them on resize), fractions of the stage: --cap-x, --cap-y
   (the centre of the capsule's whole box, strobe dome to bell exits) and --cap-h (its height over the stage height);
   --limb-y (where the Earth's limb crosses the capsule's column); --door-x, --door-y (the inner door's centre) and
   --door-r (its vertical radius over the stage height), --door-plate (mas or tel); --fade-top and --fade-bottom
   ("y0 y1") and --fade-left ("x0 x1 strength"): the picture's own dark fades behind the words. --ring-h and --ring-w
   size the dotted reach ring: the smaller of h × H and w × W (and never into the top bar's scrim).
   The words never sit on busy picture: every value here was checked against the renderer's boxes() from 320 to
   2560 px wide. The side-by-side layout of frames 3 and 4 needs a landscape screen at least 900 px wide; anything
   narrower or portrait stacks the words above and below the picture, as the phone frames do.
   Listen colours the sentence spans (.scene-line .s); this file never sets their colour, background or shadow. */

/* Without JavaScript: the book lines stay in the reading flow, with one quiet note. */
.scene { position: relative; margin: 2.2em 0; color: var(--ink); font-family: var(--sans); }
.scene .scene-lead { font-size: 1em; margin-bottom: .5em; }
.scene .scene-line { font-size: 1.25em; line-height: 1.2; }
.scene-nojs { margin-top: 1em; font: 500 14px/1.4 var(--sans); color: var(--ink-3); }
.js .scene-nojs { display: none; }

/* With JavaScript: a full-bleed window one screen tall (never under 640 px: the smallest phones scroll a little).
   --vw is the viewport width without a classic scrollbar. */
.js .scene { width: var(--vw, 100vw); min-height: max(100svh, 640px); margin: 3em calc(50% - var(--vw, 100vw) / 2); overflow: hidden; isolation: isolate; background: var(--void); }
.js .scene > .stage { z-index: 0; }
.js .scene-copy { position: absolute; z-index: 2; }
/* the payoff takes the focus for screen readers; it is not a control: no ring */
.scene .scene-payoff:is(:focus, :focus-visible) { outline: none; }

/* ---- stage anchors, stacked (phones, portrait tablets): the door from frame 3; the boil-off a little smaller than
   frame 4, the limb higher, so the sunrise's glare stays clear of the readouts below it */
.scene-door { --door-x: .4852; --door-y: .3493; --door-r: .1133; --door-plate: tel; --fade-top: 0 0; --fade-bottom: 0 0; --fade-left: 0 0 0; }
.scene-boil { --cap-x: .5; --cap-y: .52; --cap-h: .21; --limb-y: .635; --fade-top: .13 .25; --fade-bottom: .665 .745; --fade-left: 0 0 0;
  --ring-h: .356; --ring-w: .4; }

/* ---- the door: the copy at the bottom (stacked), at the left on the dark padded wall (side by side) */
.js .scene-door .scene-copy { display: grid; left: 24px; right: 22px; bottom: calc(env(safe-area-inset-bottom, 0px) + 44px); max-width: 560px; }
/* a scrim of page colour behind the words, so they never sit on the plate's rim or rivets: solid from 24 px above the
   first line down (stacked); the picture keeps its own grade everywhere else */
.js .scene-door .scene-copy::before { content: ''; position: absolute; z-index: -1; left: -24px; right: -100vw; top: -64px;
  bottom: calc(-44px - env(safe-area-inset-bottom, 0px)); background: linear-gradient(rgb(4 6 11 / 0), var(--void) 40px); pointer-events: none; }
.js .scene-door .scene-lead { margin: 0; font-size: 19.5px; text-shadow: 0 1px 14px rgb(4 6 11 / .95); }
.js .scene-door .scene-line { margin-top: 12px; font-size: 31px; line-height: 1.06; letter-spacing: -.03em; text-shadow: 0 2px 26px rgb(4 6 11 / .7); }
.scene-door .gauge { margin: 24px 0 10px; padding: 0 6px; }

/* the button and "Devam et" share one slot, and what goes keeps its place (nothing reflows): equalised, the lead, the
   first sentence and the button fade where they stand; before the camera goes in ("push") the line and the readout go
   too; inside the cabin "Sen gireceksin." comes back where it was and "Devam et" takes the button's slot */
.js .scene-door .hold, .js .scene-door .scene-next { grid-area: 4 / 1; }
.js .scene .scene-next { align-self: center; }
/* after a tap too short to open anything: "Basılı tut." just under the button, for 2.5 s */
.js .scene-door .hold-help { position: absolute; left: 6px; top: calc(100% + 10px); margin: 0; font: 500 15px/1.3 var(--sans); color: var(--ink-2); white-space: nowrap; }
.js .scene-door:not([data-state="closed"]) :is(.scene-lead, .scene-line > .s:first-child, .hold),
.js .scene-door:is([data-state="push"], [data-state="inside"]) .gauge,
.js .scene-door[data-state="push"] .scene-line,
.js .scene-door:not([data-state="inside"]) .scene-next { visibility: hidden; }

/* ---- the boil-off: the chip and the line at the top, the readouts and the button at the bottom */
.js .scene-boil .scene-copy { inset: 0; pointer-events: none; }
.js .scene-boil .scene-say, .js .scene-boil .scene-act { position: absolute; left: 24px; right: 22px; pointer-events: auto; }
.js .scene-boil .scene-say { display: grid; top: 122px; max-width: 560px; }
.js .scene-boil .scene-act { display: grid; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); max-width: 440px; }
.js .scene-boil :is(.scene-line, .scene-payoff) { grid-area: 2 / 1; align-self: start; margin: 14px 0 0; font-size: 25px; font-weight: 650; line-height: 1.1;
  letter-spacing: -.026em; text-wrap: pretty; text-shadow: 0 2px 22px rgb(4 6 11 / .8); }
.js .scene-boil .hold, .js .scene-boil .scene-next { grid-area: 2 / 1; }
/* acting, "Yakıyorsun" takes the chip's words; under way, the payoff takes the line's place, "Devam et" the button's,
   "Yoldasın" the chip's words (no reflow) */
.js .scene-boil[data-state="done"] :is(.scene-line, .hold, .chip [data-wait]),
.js .scene-boil[data-state="act"] .chip [data-wait],
.js .scene-boil:not([data-state="act"]) .chip-act,
.js .scene-boil:not([data-state="done"]) :is(.scene-payoff, .scene-next, .chip-go) { visibility: hidden; }
.scene-boil .gauge { margin: 0 0 3px; padding: 0 6px; line-height: 1.25; }
.scene-boil .hold { height: 62px; }
.scene-boil .readouts { margin-bottom: 6px; }
.scene-boil .chip { position: relative; justify-self: start; flex-wrap: wrap; row-gap: 4px; gap: 8px; font-size: 14px; }
.scene-boil .chip > * { white-space: nowrap; }
.scene-boil .chip-t { font-size: 14px; }
.scene-boil :is(.chip-go, .chip-act) { position: absolute; left: 15px; top: 0; color: var(--ink); font-weight: 600; }
/* the time-lapse's rate, said plainly: "1 sn = 60 yörünge", then "Gerçek zaman" */
.scene-boil .lapse { margin: 0 0 3px; padding: 0 6px; line-height: 1.25; color: var(--ink-3); }
.scene-boil .lapse b { font-weight: 500; }

/* ---- readouts: instrument lines, mono, tabular, at least 7:1 */
.gauge { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.readout { font: 500 15px/1.3 var(--mono); letter-spacing: .01em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.readout .k { text-wrap: balance; }
.readout .v { color: var(--ink); white-space: nowrap; }
.readout .v b { font-weight: 600; }
.readout .v small { font-size: 1em; font-weight: 500; }
/* the boil-off's two costs: what waiting took (grey), what the way took (the accent) */

/* ---- the hold control: its fill and its ring are the physical progress (the air let in, the burn done), not a timer */
.hold { position: relative; isolation: isolate; display: flex; align-items: center; gap: 14px; width: 100%; height: 66px; padding: 0 26px 0 12px;
  border: 1px solid rgb(255 214 170 / .6); border-radius: 999px; overflow: hidden; color: var(--amber-ink); cursor: pointer;
  background: linear-gradient(180deg, #f0ab64, #e59d55);
  box-shadow: inset 0 1px 0 rgb(255 230 200 / .45), inset 0 -2px 0 rgb(120 60 10 / .2), 0 12px 32px rgb(0 0 0 / .45);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 200ms var(--ease-out); }
.hold[aria-pressed="true"] { transform: scale(.97); transition-duration: 120ms; }
.hold-fill { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #ffe2bd, #ffc98c); transform: scaleX(0); transform-origin: 0 50%; }
.hold-edge { position: absolute; inset: 8px 0; z-index: -1; opacity: 0; transition: opacity 200ms var(--ease-out); }
.hold-edge::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; border-radius: 2px; background: rgb(255 244 228 / .9); box-shadow: 0 0 0 1px rgb(120 60 10 / .25); }
.hold-ring { flex: none; width: 44px; height: 44px; }
.hold-track { fill: none; stroke: rgb(26 18 6 / .22); stroke-width: 3.5; }
.hold-arc { fill: none; stroke: var(--amber-ink); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; }
.hold-dot { fill: var(--amber-ink); }
.hold-label { font: 600 21px/1 var(--sans); letter-spacing: -.015em; white-space: nowrap; }
.hold-hint { margin-left: auto; font: 700 15px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* ---- after the act: where to go next */
.scene-next a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-left: 6px; text-decoration: none; white-space: nowrap;
  font: 600 18px/1 var(--sans); letter-spacing: -.005em; color: var(--amber-text); }
.scene-next .to { color: var(--ink-2); font-weight: 500; }
.scene-next .ico { width: 18px; height: 18px; stroke-width: 2; }

/* ---- the reach rings (the Gösterge layer): thin, warm off-white, never glowing; the layer sits at the composition's
   capsule centre and moves only by transform, the radii are the only geometry */
.reach { position: absolute; left: 0; top: 0; z-index: 1; width: 0; height: 0; pointer-events: none; will-change: transform; }
.reach-svg { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.reach .was { fill: none; stroke: rgb(244 241 234 / .42); stroke-width: 1.25; stroke-dasharray: 2 6; stroke-linecap: round; }
.reach .now { fill: none; stroke: rgb(244 241 234 / .82); stroke-width: 1.6; }
.reach-label { position: absolute; left: 0; top: 0; font: 600 14px/1 var(--mono); letter-spacing: .08em; color: var(--ink); white-space: nowrap; text-shadow: 0 0 8px rgb(4 6 11 / .9); }
/* where the ring has no room above the capsule for it (short phones), the label stands at the capsule's upper left in
   two lines, the figure and its unit kept together */
.reach.side .reach-label { width: min-content; white-space: normal; text-align: right; line-height: 1.15; }

/* ---- portrait tablets: the wider view curves the bright limb down toward the sun at the right, so the picture sits
   higher above the readouts */
@media (min-width: 600px) and (max-aspect-ratio: 5/4) {
  .scene-boil { --cap-y: .455; --limb-y: .57; --fade-bottom: .6 .68; }
}
/* ---- phones 761 to 830 px tall (375 × 812): the door a little higher, its rim clear of a two-line lead */
@media (min-height: 761px) and (max-height: 830px) {
  .scene-door { --door-y: .335; }
}
/* ---- short screens: a smaller boil-off window and a higher door, so the words keep clear of the picture; the
   capsule sits low enough for the reach ring to clear its nose under the words, and the sun's glare clears both */
@media (max-height: 760px) {
  .scene-door { --door-y: .19; }
  .js .scene-door .scene-lead { font-size: 18px; }
  .js .scene-door .scene-line { font-size: 28px; }
  .scene-boil { --cap-y: .525; --cap-h: .16; --limb-y: .615; --fade-bottom: .645 .715; --ring-w: .31; }
  .js .scene-boil .scene-say { top: 108px; }
  .js .scene-boil :is(.scene-line, .scene-payoff) { font-size: 22px; }
  .js .scene-boil .scene-act { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
  .scene-boil :is(.gauge, .lapse) { margin-bottom: 1px; line-height: 1.1; }
  .scene-boil .hold { height: 50px; }
}
/* the shortest phones (360 × 640, 375 × 667, 320 × 568): a smaller capsule on the same limb, so the strobe's flash
   at its nose stays clear of the words */
@media (max-height: 680px) {
  .scene-boil { --cap-y: .54; --cap-h: .13; }
}
/* the narrowest phones: smaller words, and the chip's reply takes its own line (no separator left at a line's end) */
@media (max-width: 380px) {
  .scene-boil .chip-r { flex-basis: 100%; }
  .scene-boil .chip-sep { display: none; }
}
@media (max-width: 340px) {
  .js .scene-door .scene-lead { font-size: 17px; }
  .js .scene-door .scene-line { font-size: 22px; }
  .js .scene-boil :is(.scene-line, .scene-payoff) { font-size: 19px; }
}

/* ---- side by side (frames 3 and 4): landscape screens 900 px wide and up */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .scene-door { --door-x: .6825; --door-y: .503; --door-r: .2221; --door-plate: mas; }
  /* the left wall and its strap darkened behind the column, about 150 px further right than the plate's own shade */
  .js .scene-door .scene-copy::before { left: -100vw; right: -160px; top: -100vh; bottom: -100vh;
    background: linear-gradient(to right, rgb(4 6 11 / .55) calc(100% - 220px), rgb(4 6 11 / 0)); }
  .scene-boil { --cap-x: .72; --cap-y: .5; --cap-h: .47; --limb-y: .835; --fade-top: 0 .1; --fade-bottom: .97 1; --fade-left: .02 .16 .9; --ring-h: .356; --ring-w: .453; }
  .readout { font-size: 16px; }
  .hold, .scene-boil .hold { height: 70px; }
  .hold-label { font-size: 22px; }
  .scene-next a { padding-left: 8px; font-size: 19px; }

  .js .scene-door .scene-copy { left: 96px; right: auto; top: 50%; bottom: auto; width: 540px; max-width: none; transform: translateY(-45%); }
  .js .scene-door .scene-line { max-width: 484px; margin-top: 18px; font-size: 54px; line-height: 1.04; letter-spacing: -.034em; }
  .scene-door .gauge { width: 440px; margin: 44px 0 12px; padding: 0 8px; }
  .scene-door .hold { width: 440px; }
  /* the lead in both languages, and the longer Turkish lines, stay on the dark padded wall (frame 3 ends it about
     540 px in at 1440; the fade pushes it further right) */
  .js .scene-door .scene-lead { font-size: 22px; }
  .js .scene-door:lang(tr) .scene-line { max-width: 440px; font-size: 48px; }

  .js .scene-boil .scene-say { left: 96px; right: auto; top: 132px; width: 560px; max-width: none; }
  .scene-boil .chip { gap: 10px; }
  .scene-boil .chip, .scene-boil .chip-t { font-size: 17px; }
  .scene-boil :is(.chip-go, .chip-act) { left: 17px; }
  .js .scene-boil :is(.scene-line, .scene-payoff) { max-width: 484px; margin-top: 20px; font-size: 44px; line-height: 1.08; }
  /* the act block rests just above the limb (frame 4: 27 px over it at 900 px tall), so it never meets the Earth's lights */
  .js .scene-boil .scene-act { left: 96px; right: auto; bottom: calc(16.5% + 27px); width: 420px; max-width: none; }
  .scene-boil .gauge { max-width: 420px; padding: 0 8px; }
  .scene-boil .readouts { margin-bottom: 8px; }
  .reach-label { font-size: 15px; }
}
/* under 1440 px wide the side-by-side composition scales with the width (frames 3 and 4 are 1440 wide) */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-width: 1439px) {
  .js .scene-door .scene-copy, .js .scene-boil .scene-say { left: 6.667vw; }
  .js .scene-door .scene-copy { width: 37.5vw; }
  .js .scene-door .scene-line { max-width: 33.6vw; font-size: 3.75vw; }
  .scene-door .gauge, .scene-door .hold { width: 30.6vw; }
  .js .scene-door .scene-lead { font-size: max(17px, 1.528vw); }
  .js .scene-door:lang(tr) .scene-line { max-width: 30.6vw; font-size: 3.333vw; }
  .js .scene-boil .scene-say { width: 38.9vw; }
  .js .scene-boil :is(.scene-line, .scene-payoff) { max-width: 33.6vw; font-size: max(28px, 3.06vw); }
  .js .scene-boil .scene-act { left: 6.667vw; width: max(340px, 29.2vw); }
}
/* shorter screens: the capsule lower, so its vent cones (higher once it has turned part way) pass under the words, and
   the readouts end before the left cone's tip, which reaches furthest (about 0.72 W - 0.617 H) with the capsule turned */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 800px) {
  .scene-boil { --cap-y: .57; }
  .js .scene-boil .scene-act { width: min(420px, max(340px, 29.2vw), calc(65.3vw - .617 * max(100vh, 640px) - 12px)); }
}
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-height: 680px) { .scene-boil { --cap-y: .62; } }
/* squarer screens: a smaller capsule a little to the right (the ring kept on screen), the readouts again ending before
   the turned capsule's left vent tip (about 0.75 W - 0.542 H) */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 3/2) {
  .scene-boil { --cap-x: .75; --cap-h: .42; --ring-w: .24; }
  .js .scene-boil .scene-act { width: min(420px, max(300px, 29.2vw), calc(68.3vw - .542 * max(100vh, 640px) - 12px)); }
}
/* squarer screens: the plate's collar ring grows with the height, so the door moves right to clear the words */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 8/5) { .scene-door { --door-x: .69; } }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 3/2) { .scene-door { --door-x: .735; } }
@media (min-width: 900px) and (min-aspect-ratio: 5/4) and (max-aspect-ratio: 4/3) { .scene-door { --door-x: .76; } }

/* reduced motion: the press is a change of light, not of size (the scenes' own changes are opacity only, in JS) */
@media (prefers-reduced-motion: reduce) {
  .hold { transition: filter 120ms var(--ease-out); }
  .hold[aria-pressed="true"] { transform: none; filter: brightness(.93); }
}
@media (forced-colors: active) {
  .hold { border: 2px solid ButtonText; }
  .hold-fill { forced-color-adjust: none; background: Highlight; }
  .hold-arc, .hold-dot { stroke: ButtonText; fill: ButtonText; }
  .hold-arc { fill: none; }
}

/* ---- 40-light.css ---- */
/* Light mode (the scenes as stills, js/light.js), reduced motion, reduced transparency, more contrast, forced colours
   and focus. Owner: qa (evidence/orch/MODULES.md 1). Look: ART-BIBLE.md sections 5 and 9.
   Light mode moves nothing but opacity and one transform: the layers crossfade by the scene's own state numbers. The
   only loop is the crystals' glint while the vents are open, as the WebGL cones twinkle; it rests when they close, when
   the stage is off screen, and under reduced motion. */

/* ---- light mode: one still-sized frame per scene, fitted to its stage by a transform (light.js) ---- */
.lt { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; background: var(--void); }
.lt-fit { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lt-l { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.lt-l > img, img.lt-l { display: block; width: 100%; height: 100%; }
.lt-at { position: absolute; display: block; }
/* Only the one full-frame crossfade gets its own layer up front; the small boxes are promoted when they change. */
.lt-l.lt-x { will-change: opacity; }
/* Reduced motion: a state that jumps (the door's open pose, a montage cut) becomes a short crossfade, nothing moves. */
.lt[data-reduced] .lt-x { transition: opacity 300ms var(--ease-out); }

/* The ice-crystal cones, as gfx renders them: the steady jet at the nozzle and two halves of the cone (patches about a
   crystal wide) that glint in turn, so the cone shimmers in place while its mean light holds (the crystals are too fast
   to follow one by one).
   easeInOutSine: a glint, not UI. */
.lt-vents > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lt-vents > img + img { animation: lt-glint 840ms cubic-bezier(.37, 0, .63, 1) infinite alternate; }
.lt-vents > img:nth-child(3) { animation-delay: -840ms; }
@keyframes lt-glint { from { opacity: 1; } to { opacity: .46; } }
.lt[data-off] .lt-vents > img, .lt-vents[data-shut] > img { animation-play-state: paused; }

/* The orbit after the burn: the old one dotted on the horizon, the new one peeling above it (Gösterge: thin, exact). */
.lt-orbit { overflow: visible; }
.lt-orbit path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.lt-orbit-was { stroke: rgb(244 241 234 / .72); stroke-width: 1.25; stroke-dasharray: 2 6; }
.lt-orbit-now { stroke: var(--amber); stroke-width: 1.5; }

/* ---- reduced motion: fewer, gentler animations, never none of the meaning (ART-BIBLE 5) ---- */
@media (prefers-reduced-motion: reduce) {
  html, *, *::before, *::after { scroll-behavior: auto !important; }
  .lt-vents > img { animation: none; opacity: .8; }
  .lt-x { transition: opacity 300ms var(--ease-out); }
  .lang .fish { animation: none !important; transition: none !important; transform: none !important; }
}
.reduced .lt-vents > img, .lt[data-reduced] .lt-vents > img { animation: none; opacity: .8; }

/* ---- reduced transparency: the glass turns solid; nothing reads through a blurred picture ---- */
@media (prefers-reduced-transparency: reduce) {
  .glass { background: rgb(14 17 23); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgb(255 255 255 / .22); }
}

/* ---- more contrast: near-solid surfaces with a defined edge, secondary text at full ink ---- */
@media (prefers-contrast: more) {
  .glass { background: rgb(8 10 14); -webkit-backdrop-filter: none; backdrop-filter: none; border-color: rgb(244 241 234 / .7); }
  .verb { border-color: var(--amber-ink); }
}

/* ---- forced colours: system colours for the pills, the verb buttons and every focus ring; the pictures stay ---- */
@media (forced-colors: active) {
  /* the hold controls draw their progress as a fill: their system colours live with them, in 30-scene.css */
  .pill, .verb { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; forced-color-adjust: none; }
  .pill .ico { stroke: ButtonText; }
  .chip .ping { background: CanvasText; box-shadow: none; }
  .lt-orbit-now { stroke: Highlight; }
  .lt-orbit-was { stroke: CanvasText; }
  :focus-visible:not([tabindex='-1']) { outline: 2px solid Highlight !important; outline-offset: 3px; }
}

@media (forced-colors: active) and (hover: hover) and (pointer: fine) {
  .verb:hover, .pill:hover { border-color: Highlight; }
}

/* ---- focus: visible on every control, over the void, the glass and the plates alike; never on the headings and lines
   a view change or a payoff moves focus to (tabindex -1: they are not controls, 00-tokens.css) ---- */
:focus:not(:focus-visible) { outline: none; }
a:focus-visible, button:focus-visible, [tabindex]:not([tabindex='-1']):focus-visible { outline: 2px solid var(--amber-text); outline-offset: 3px; }
.verb:focus-visible, .pill:focus-visible { outline-offset: 4px; }
[tabindex='-1']:focus { outline: none; }

/* ---- 51-c1.css ---- */
/* Chapter I inherits the package's instrument system. No picture is placed under words. */
.c1-scene { --c1-measure: 780px; }
.js .c1-scene { display: flex; flex-direction: column; width: 100%; min-height: 0; margin: 3.5rem 0; overflow: visible; isolation: isolate; background: var(--void); }
.js .c1-scene > .stage.c1-plot { position: relative; inset: auto; flex: none; width: 100%; height: 310px; overflow: hidden; }
.js .c1-scene .scene-copy { position: relative; inset: auto; z-index: 1; width: 100%; max-width: var(--c1-measure); margin-inline: auto; }
.c1-scene .c1-heading { max-width: var(--c1-measure); margin: 0 auto; padding: 0; }
.c1-scene .bk { font-family: var(--serif); color: var(--book); }
.c1-scene .c1-heading .bk { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.42; }
.c1-scene .c1-panel { padding: 8px 0 0; }
.c1-scene .c1-telemetry { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; color: var(--ink-2); font: 500 14px/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.c1-telemetry span { white-space: nowrap; }
.c1-scene .c1-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: end; margin-top: 20px; }
.c1-scene label { display: block; font: 500 15px/1.4 var(--sans); color: var(--ink); }
.c1-scene input[type="range"] { display: block; grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; padding: 0; accent-color: var(--amber); cursor: pointer; touch-action: pan-y; }
.c1-scene :is(button, summary) { min-height: 44px; color: var(--ink); font: 600 16px/1.2 var(--sans); user-select: none; -webkit-user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.c1-scene button { padding: 10px 20px; border: 1px solid var(--ink-3); border-radius: 999px; background: var(--void); cursor: pointer; transition: transform 120ms var(--ease-out); }
.c1-scene button.verb { color: var(--amber-text); background: var(--void); border-color: var(--amber); }
.c1-scene button:active { transform: scale(.97); }
.c1-scene button:disabled { cursor: default; opacity: .65; }
.c1-scene :is(button, input, summary):focus-visible { outline: 2px solid var(--amber-text); outline-offset: 4px; }
.c1-scene input[type="range"] { border-radius: 999px; }
.c1-scene input[type="range"]:focus-visible { outline-offset: 1px; }
.c1-scene .c1-controls input[type="range"] { margin-top: 6px; }
.c1-controls .c1-launch { grid-row: 2; grid-column: 2; }
.c1-scene .c1-coaching { margin: 18px 0 0; color: var(--ink); font: 500 15px/1.5 var(--sans); }
.c1-scene .c1-outcome { min-height: 150px; padding-top: 18px; }
.c1-scene .c1-result { margin: 0; font-size: 19px; line-height: 1.5; }
.c1-scene .c1-twins { max-width: var(--c1-measure); margin: 24px auto 0; }
.c1-twins .bk { margin: 0 0 18px; font-size: 19px; line-height: 1.5; }
.c1-scene .c1-coach-host { min-height: 0; }
.c1-scene .kit-showme { margin-top: 14px; }
.c1-scene .c1-nojs { color: var(--ink-3); font: 500 14px/1.4 var(--sans); }
.js .c1-scene .c1-nojs { display: none; }
.c1-scene .c1-purpose-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.c1-purpose-options .bk { color: inherit; font: inherit; }
.c1-purpose-options button { text-align: left; min-height: 48px; }
.c1-purpose-options [aria-pressed="true"] { color: var(--void); background: var(--ink); border-color: var(--ink); }
.c1-scene .c1-time-label { margin-top: 18px; }
.c1-scene .c1-burn-controls { display: flex; gap: 12px; margin-top: 8px; }
.c1-burn-controls button { flex: 0 0 auto; min-width: 132px; height: 48px; text-align: center; }
.c1-scene .c1-now-result .bk { margin: 20px 0 0; font-size: 19px; line-height: 1.5; }
.c1-scene .c1-path-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.c1-path-labels .bk { margin: 0; font-size: 18px; line-height: 1.4; }
.js .c1-paths > .stage.c1-plot { height: 260px; }
.js .c1-slingshot { width: var(--vw, 100vw); min-height: 100svh; margin-inline: calc(50% - var(--vw, 100vw) / 2); padding: 28px 22px 32px; }
@media (min-width: 900px) {
  .js .c1-slingshot { padding: 72px 64px 48px; }
  .js .c1-slingshot > .stage.c1-plot { max-width: 1000px; margin-inline: auto; }
  .c1-slingshot .c1-controls { grid-template-columns: 1fr 1fr auto; }
  .c1-slingshot .c1-controls .c1-launch { grid-row: auto; grid-column: auto; }
  .c1-slingshot .c1-outcome { min-height: 96px; }
  .js .c1-now > .stage.c1-plot { height: 340px; }
  .js .c1-slingshot > .stage.c1-plot { height: 280px; }
}
@media (hover: hover) and (pointer: fine) {
  .c1-scene button:not(:disabled):hover { border-color: var(--amber); }
}
@media (prefers-reduced-motion: reduce) {
  .c1-scene button { transition: none; }
  .c1-scene button:active { transform: none; }
}
@media (forced-colors: active) {
  .c1-scene button { border-color: ButtonText; }
  .c1-scene button.verb { background: ButtonFace; color: ButtonText; }
  .c1-scene input { forced-color-adjust: auto; }
}
html:not(.js) .c1-scene :is(.c1-controls, .c1-telemetry, .c1-burn-controls, .c1-time-label, .c1-purpose-options, .c1-compare) { display: none; }
.c1-scene .c1-caption { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font: 500 15px/1.4 var(--sans); }
.c1-caption output { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c1-scene { scroll-margin-top: 112px; }
/* Native range track geometry belongs to the browser; label baselines stay aligned even in Turkish. */
.c1-scene .c1-caption label { font-size: 15px; }
@media (max-width: 499px) {
  .c1-scene .c1-controls { column-gap: 12px; }
  .c1-scene .c1-controls .c1-caption { display: grid; grid-template-rows: 21px 21px; row-gap: 2px; justify-content: start; }
  .c1-scene .c1-controls .c1-caption label { grid-row: 1; white-space: nowrap; }
  .c1-scene .c1-controls .c1-caption output { grid-row: 2; }
}
.c1-scene .c1-handback { margin: 14px 0 0; color: var(--ink); font: 500 15px/1.5 var(--sans); }

.c1-scene .c1-scale { margin: 0 auto 12px; width: 100%; max-width: var(--c1-measure); color: var(--ink-2); font: 500 14px/1.5 var(--mono); }
.c1-scene .c1-question { margin: 0 0 20px; font-size: 22px; line-height: 1.45; }
.c1-scene .c1-burn-controls [hidden], .c1-scene .c1-time-label[hidden] { display: none; }
@media (max-width: 499px) {
  .c1-scene .c1-purpose-options { grid-template-columns: 1fr; }
  .js .c1-now > .stage.c1-plot { height: 340px; }
  .js .c1-slingshot > .stage.c1-plot { height: 280px; }
}

/* Past it: an instrument in the existing reading world, with an uninterrupted book flow. */
.c1-yanindan { color: var(--ink); scroll-margin-top: 112px; }
.js .c1-yanindan { position: relative; width: min(1120px, calc(100vw - 44px)); margin: 24px 0 22px calc(50% - min(1120px, calc(100vw - 44px)) / 2); padding: 0; min-height: 0; background: var(--void); overflow: visible; }
.rd > .bk:has(+ .c1-yanindan), .rd > .c1-yanindan + .bk { width: min(1120px, calc(100vw - 44px)); max-width: none; margin-left: calc(50% - min(1120px, calc(100vw - 44px)) / 2); text-align: left; }
.c1-record-instrument { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 36px; align-items: center; }
.js .c1-yanindan .stage.c1-record-plot { position: relative; inset: auto; width: 100%; height: 420px; overflow: hidden; }
.c1-record-plot canvas { position: absolute; inset: 0; }
.c1-record-label { position: absolute; top: 0; left: 0; font: 400 14px/1.4 var(--sans); color: var(--ink-2); white-space: nowrap; }
.c1-record-label span { display: block; }
.c1-record-scale span:first-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.c1-record-motion { width: min(240px, calc(100% - 170px)); white-space: normal; text-align: center; font-size: 13px; }
.c1-record-motion span + span { font: 400 12px/1.6 var(--mono); }
.c1-yanindan .scene-copy { position: static; width: auto; max-width: none; padding: 0; }
.c1-record-data { font: 400 15px/1.4 var(--sans); }
.c1-record-entry { color: var(--ink-2); margin-bottom: 28px; }
.c1-record-frame { color: var(--ink-2); margin-bottom: 12px; }
.c1-record-own { color: var(--amber-text); }
.c1-record-data output { display: block; font: 500 clamp(19px, 1.8vw, 24px)/1.5 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.c1-record-mirror { margin-top: 16px; }
.c1-record-model { margin-top: 24px; max-width: 27ch; color: var(--ink-3); font-size: 14px; }
.c1-record-footnotes { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--ink-2); font: 400 14px/1.5 var(--sans); margin-top: 12px; }
.c1-record-vector-key { font: 400 14px/1.5 var(--sans); color: var(--ink-2); margin-top: 6px; }
.c1-record-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 26px; }
.c1-record-caption { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font: 500 16px/1.4 var(--sans); }
.c1-record-caption output, .c1-record-limits, .c1-record-duration { font: 400 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.c1-record-limits { color: var(--ink-2); }
.c1-record-slider { position: relative; height: 52px; margin-top: 10px; border-radius: 26px; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.c1-record-track { position: absolute; height: 2px; top: 25px; left: 26px; right: 26px; background: var(--ink-3); }
.c1-record-track i { position: absolute; top: 0; height: 2px; background: var(--amber); }
.c1-record-zero { position: absolute; left: 50%; top: -25px; transform: translateX(-50%); font: 400 12px/1 var(--mono); color: var(--ink-3); }
.c1-record-thumb { position: absolute; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; left: 0; top: 0; border: 1px solid var(--amber); border-radius: 50%; background: var(--void); color: var(--amber-text); font: 500 14px/1 var(--mono); box-shadow: inset 0 1px 0 rgb(244 241 234 / .16), 0 4px 12px rgb(0 0 0 / .28); }
.c1-record-time-thumb svg, .c1-contact-key { fill: none; stroke: currentColor; stroke-width: 1.2; }
.c1-contact-key { display: inline-block; vertical-align: -.15em; margin-right: 6px; }
.c1-record-duration { margin-top: 8px; }
.c1-record-note { color: var(--ink-2); font: 400 14px/1.5 var(--sans); margin-top: 14px; }
.c1-record-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.c1-record-actions button, .c1-record-calculation summary { min-height: 44px; padding: 10px 14px; border-radius: 999px; font: 500 15px/1.4 var(--sans); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.c1-record-actions button { border: 1px solid transparent; transition: transform 200ms var(--ease-out); }
.c1-record-actions [data-action="mirror"] { border-color: var(--ink-3); }
.c1-record-actions [data-action="mirror"][aria-pressed="true"] { border-color: var(--ink); background: rgb(244 241 234 / .06); }
.c1-record-actions button:active { transform: scale(.97); transition-duration: 120ms; }
.c1-record-calculation { margin-top: 8px; font: 400 14px/1.7 var(--mono); color: var(--ink-2); }
.c1-record-calculation summary { display: list-item; width: fit-content; cursor: pointer; }
.c1-record-calculation > div { padding: 12px 14px; }
.c1-record-help { font: 400 15px/1.5 var(--sans); margin-top: 14px; }
.c1-yanindan :is(button, [role="slider"], summary):focus-visible { outline: 2px solid var(--amber-text); outline-offset: 4px; }
.js .c1-record-nojs { display: none; }
html:not(.js) .c1-yanindan { display: none; }
.c1-yanindan[data-keyboard="true"] button { transition: none; transform: none; }
@media (max-width: 899px) {
  .c1-record-instrument { grid-template-columns: 1fr; gap: 4px; }
  .c1-record-motion { width: min(180px, calc(100% - 170px)); }
  .js .c1-yanindan .stage.c1-record-plot { height: 330px; }
  .c1-record-data { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .c1-record-entry { grid-column: 1 / -1; margin: 0 0 5px; font-size: 14px; }
  .c1-record-frame { grid-column: 1 / -1; margin: 0; font-size: 14px; }
  .c1-record-data output { font-size: clamp(15px, 4vw, 20px); letter-spacing: -.025em; }
  .c1-record-own p, .c1-record-mirror p { font-size: 14px; }
  .c1-record-mirror { margin: 0; }
  .c1-record-model { grid-column: 1 / -1; margin: 4px 0 0; max-width: none; }
  .c1-record-controls { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
  .c1-record-footnotes { margin-top: 14px; }
  .c1-record-vector-key { max-width: 42ch; }
}
@media (hover: hover) and (pointer: fine) {
  .c1-record-actions button:hover { background: rgb(244 241 234 / .08); }
}
@media (prefers-reduced-motion: reduce) {
  .c1-record-actions button { transition: none; }
  .c1-record-actions button:active { transform: none; }
}
@media (forced-colors: active) {
  .c1-record-thumb, .c1-record-actions button { border-color: ButtonText; }
  .c1-record-track, .c1-record-track i { background: CanvasText; }
}

.c1-record-label[data-label="boundary"] { max-width: calc(100% - 16px); white-space: normal; text-align: center; }

/* ---- 52-c2.css ---- */
/* Chapter II: the existing reading world, with precise flight instruments. */
.c2-scene { position:relative; margin:3rem 0; padding:1.25rem 0; color:var(--ink); background:var(--void); isolation:isolate; max-width:100%; }
.c2-scene .stage { position:relative; width:100%; height:18rem; overflow:hidden; }
.c2-scene .kit-canvas { display:block; }
.c2-scene .scene-copy { position:static; max-width:34em; margin-inline:auto; padding:1rem 0; width:100%; }
.c2-scene .bk { font-family:var(--serif); color:var(--book); font-size:inherit; line-height:1.62; }
.c2-scene .scene-copy>.bk { margin-bottom:1em; }
.c2-scene .c2-telemetry { margin:.4rem 0; font:400 14px/1.5 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.c2-scene .c2-description:not(.sr-only), .c2-glyph-note { max-width:34em; margin:.75rem 0; font:400 14px/1.5 var(--sans); color:var(--ink-3); }
.c2-parking { min-height:100svh; }
.c2-parking .stage { height:clamp(15rem,37svh,25rem); }
.c2-clamps { display:grid; gap:.4rem; margin:1rem 0; }
.c2-scene button { min-width:44px; min-height:44px; touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.c2-clamp { text-align:left; padding:.5rem 0; border-bottom:1px solid var(--ink-3); width:100%; }
.c2-clamp[aria-expanded="true"] { border-color:var(--amber); }
.c2-clamp:disabled { display:none; }
.c2-clamp-slot:has(>.c2-clamp:disabled) { display:none; }
.c2-test { padding:1rem 0; }
.c2-test .bk { margin-bottom:.5rem; font-size:1rem; }
.c2-release, .c2-scene .kit-showme { border:1px solid var(--ink); border-radius:999px; padding:.65rem 1.1rem; margin:.75rem 0; font-family:var(--sans); }
.c2-burn-row { display:flex; gap:1rem; align-items:center; margin-top:1rem; }
.c2-scene .c2-burn { min-width:9rem; touch-action:none; }
.c2-burn[aria-pressed="true"] { background:var(--amber); }
.c2-burn[aria-disabled="true"] { background:transparent; color:var(--ink-3); border-color:var(--ink-3); box-shadow:none; cursor:default; }
.c2-ready { font:500 14px/1.5 var(--mono); color:var(--ink); }
.c2-ready::before { content:''; display:inline-block; width:8px; height:8px; margin-right:.6rem; border-radius:50%; border:1px solid var(--ink-3); background:transparent; }
.c2-ready[data-on="true"]::before { background:#a4d9b1; border-color:#a4d9b1; }
.c2-scene .c2-zero-dv { font-size:16px; }
.c2-instruction { margin:1rem 0; font:400 16px/1.5 var(--sans); color:var(--ink); }
.c2-wait { margin-top:1rem; }
.c2-familiar .scene-copy { display:flex; flex-direction:column; }
.c2-familiar .rd-list { order:-1; padding-left:1.1em; margin-bottom:1.2rem; }
.c2-zero .stage { height:12rem; }
.c2-scene button:not(.c2-burn):active { opacity:.8; }
@media (hover:hover) and (pointer:fine) { .c2-scene button:not(:disabled):not([aria-disabled="true"]):hover { border-color:var(--amber); } }
@media (min-width:900px) {
 .c2-parking { width:min(90vw,1160px); max-width:none; margin-left:calc((100% - min(90vw,1160px))/2); display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:1rem 2rem; }
 .c2-parking>.stage { height:36rem; grid-column:1; grid-row:1; }
 .c2-parking>.c2-glyph-note { grid-column:1; grid-row:2; }
 .c2-parking .scene-copy { grid-column:2; grid-row:1/span 2; }
 .c2-familiar { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:center; }
 .c2-familiar>.stage { grid-column:1; grid-row:1; }
 .c2-familiar>.scene-copy { grid-column:2; grid-row:1; }
 .c2-familiar>.c2-description { grid-column:1/-1; }
 .c2-zero { display:grid; grid-template-columns:12rem minmax(0,1fr); gap:1rem; align-items:start; }
 .c2-zero>.stage { grid-column:1; grid-row:1; }
 .c2-zero>.scene-copy { grid-column:2; grid-row:1/span 2; }
}
@media (max-width:899px) {
 .c2-parking .c2-readouts { position:sticky; top:calc(var(--c2-top,6rem) + max(180px,28svh)); z-index:3; background:var(--void); padding:.4rem 0; }
 .c2-parking button { scroll-margin-top:calc(var(--c2-top,6rem) + max(180px,28svh) + 12px); }
 .c2-parking .stage { position:sticky; top:var(--c2-top,6rem); z-index:2; height:28svh; min-height:180px; background:var(--void); }
}
@media (prefers-reduced-motion:reduce) { .c2-scene .verb:active { transform:none; } }
@media (forced-colors:active) { .c2-ready::before { border:1px solid CanvasText; } }
/* Override package 1's full-bleed scene envelope for these reading instruments. */
.js .c2-scene.scene { width:100%; max-width:100%; min-height:0; margin:3rem 0; overflow:visible; }
.js .c2-parking.scene { min-height:100svh; }
@media (min-width:900px) {
 .js .c2-parking.scene { width:min(90vw,1160px); max-width:none; margin-left:calc((100% - min(90vw,1160px))/2); }
}

/* c2-b: the approved heading experiment. Page scrolling never advances its clock. */
.c2-heading h3 { font:400 clamp(1.6rem,3vw,2.2rem)/1.2 var(--serif); margin:0 0 .5rem; }
.c2-heading .c2-glyph-note { margin:0 0 1.5rem; color:var(--ink); }
.c2-heading-instrument { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; align-items:start; }
.c2-heading .c2-dial { position:relative; width:min(100%,360px); aspect-ratio:1; margin:auto; touch-action:pan-y pinch-zoom; }
.c2-ring { display:block; width:100%; height:100%; fill:none; stroke:var(--ink-3); stroke-width:1; overflow:visible; }
.c2-body { stroke:none; }
.c2-reference { stroke:var(--ink); }
.c2-selected { stroke:var(--amber); stroke-width:2; }
.c2-previous { stroke:var(--ink); stroke-dasharray:2 4; }
.c2-selected,.c2-previous { transform-origin:200px 200px; }
.c2-degrees span { position:absolute; transform:translate(-50%,-50%); font:400 14px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.c2-dial-group { min-width:0; }
.c2-heading .c2-ring-cue,.c2-heading .c2-dial-legend { margin:.5rem 0; text-align:center; }
.c2-heading-panel { min-width:0; }
.c2-heading-panel>.c2-telemetry:first-child { margin-top:0; }
.c2-angle-pair { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap:1rem; margin:1rem 0; }
.c2-angle-pair p { margin:0; font:400 14px/1.5 var(--sans); }
.c2-angle-pair output { display:block; font:400 clamp(1.5rem,3vw,2.2rem)/1.5 var(--mono); font-variant-numeric:tabular-nums; min-height:1.5em; white-space:nowrap; }
.c2-angle-pair [data-setting] { color:var(--amber); }
.c2-time { height:48px; touch-action:pan-y pinch-zoom; cursor:ew-resize; border-block:1px solid var(--ink-3); }
.c2-time svg { display:block; width:100%; height:48px; fill:none; stroke:var(--ink-3); }
.c2-time .c2-moon-position { fill:var(--ink); stroke:var(--ink); }
.c2-time .c2-time-mark { stroke:var(--ink); stroke-width:2; }
.c2-clock-status { min-height:3em; }
.c2-clock-status [data-rate] { display:block; }
.c2-clock-status [data-rate][hidden] { display:none; }
.c2-heading details { font:400 14px/1.5 var(--mono); margin:.75rem 0; }
.c2-heading summary { min-height:44px; cursor:pointer; padding:.6rem 0; }
.c2-controls { margin:1rem auto 0; max-width:34em; }
.c2-heading .c2-instruction { margin:.5rem 0; font-size:14px; }
.c2-band { height:78px; position:relative; overflow:hidden; touch-action:pan-y pinch-zoom; cursor:ew-resize; border-block:1px solid var(--ink-3); }
.c2-band-labels { position:relative; height:45px; margin-top:8px; }
.c2-band-labels span { position:absolute; left:0; margin-left:-14px; width:28px; text-align:center; font:400 14px/1.5 var(--mono); font-variant-numeric:tabular-nums; }
.c2-band-labels span::after { content:''; display:block; width:1px; height:9px; margin:3px auto; background:var(--ink-3); }
.c2-band-handle { position:absolute; left:calc(50% - 2px); bottom:6px; width:4px; height:16px; background:var(--amber); }
.c2-actions { display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin:.6rem 0; }
.c2-heading .c2-actions button,.c2-next { font:400 14px/1.5 var(--sans); border-bottom:1px solid var(--ink-3); padding:.5rem 0; min-height:48px; }
.c2-heading .c2-demo { font:400 14px/1.5 var(--sans); padding:1rem 0; }
.c2-heading [tabindex]:focus-visible,.c2-heading button:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
.c2-heading .scene-copy { max-width:34em; margin:1rem auto 0; padding:0; }
.c2-heading .c2-close { margin:0; }
.c2-heading:not([data-state="ready"]) .c2-heading-instrument,.c2-heading:not([data-state="ready"]) .c2-controls { display:none; }
@media(min-width:900px) {
 .js .c2-heading.scene { width:min(1100px,90vw); max-width:none; margin-left:calc((100% - min(1100px,90vw))/2); }
 .c2-heading-instrument { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:3rem; }
 .c2-heading .c2-dial { width:400px; max-width:100%; }
 .c2-heading .c2-controls { max-width:100%; margin:1rem 0; }
 .c2-heading .c2-band { max-width:34em; margin-inline:auto; }
 .c2-heading h3,.c2-heading>.c2-glyph-note { max-width:34em; margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { .c2-heading button:active { transform:none; } }
@media(max-width:899px) {
 .c2-heading .c2-dial { width:220px; }
 .c2-heading .c2-glyph-note { margin-bottom:.5rem; }
 .c2-heading-instrument { gap:.5rem; }
 .c2-heading .c2-telemetry { margin:.2rem 0; }
 .c2-heading .c2-angle-pair { margin:.35rem 0; }
 .c2-heading .c2-angle-pair output { font-size:1.6rem; }
 .c2-heading .c2-clock-status { min-height:1.5em; }
 .c2-heading details { margin:.2rem 0; }
 .c2-heading .c2-controls { margin-top:.5rem; }
 .c2-heading .c2-actions { gap:.25rem .75rem; }
}

.c2-heading .nojs { position:static; margin:1rem 0; font:400 14px/1.5 var(--sans); }
.js .c2-heading[data-state="error"]>.nojs,.js .c2-heading[data-state="missing"]>.nojs { display:block; }

/* ---- 53-c3.css ---- */
/* Chapter III extends the book's instrument language. No new visual identity. */
.js .scene.c3-scene { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 24px; padding: 88px 22px 32px;
  min-height: 100svh; overflow: clip; }
.js .c3-scene > .stage { position: relative; inset: auto; width: 100%; height: clamp(220px, 33svh, 380px); order: 0; }
.js .c3-scene > .scene-copy { position: relative; inset: auto; order: 1; width: 100%; max-width: 34em; margin: 0 auto; }
.c3-scene .c3-book { margin: 0 0 20px; font: 400 21px/1.42 var(--serif); color: var(--book); text-wrap: pretty; }
.c3-scene .c3-after { display: none; }
.c3-scene[data-phase='won'] .c3-before, .c3-race[data-reference='self'] .c3-before { display: none; }
.c3-scene[data-phase='won'] .c3-after, .c3-race[data-reference='self'] .c3-after { display: block; }
.c3-scene .c3-readouts { display: grid; gap: 5px; margin: 0 0 18px; font: 500 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.c3-readouts p { margin: 0; white-space: normal; }
.c3-scene .c3-hint { margin: 0 0 12px; font: 400 14px/1.4 var(--sans); color: var(--ink-3); }
.c3-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.c3-scene .c3-button, .c3-scene .kit-showme { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid var(--ink-3); color: var(--ink); background: var(--void); font: 550 16px/1.25 var(--sans);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 120ms var(--ease-out), background-color 120ms var(--ease-out); }
.c3-scene .c3-button.verb { min-height: 54px; border-color: var(--amber); background: var(--amber); color: var(--amber-ink); }
.c3-scene .c3-button[aria-pressed='true'] { border-color: var(--ink); background: rgb(244 241 234 / .13); }
.c3-scene .c3-button:is(:disabled, [aria-disabled='true']) { color: var(--ink-3); cursor: default; border-style: dashed; }
.c3-scene .c3-button.verb:is(:disabled, [aria-disabled='true']) { color: var(--ink-3); background: var(--void); border-color: var(--ink-3); box-shadow: none; }
.c3-scene .c3-button:active, .c3-scene .kit-showme:active { transform: scale(.97); }
.c3-scene button:focus-visible, .c3-scene input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.c3-scene button:focus-visible:active { transform: none; transition: none; }
.c3-scene .kit-showme { margin-top: 8px; }
.c3-scene [hidden] { display: none; }
.c3-range { display: grid; grid-template-columns: 1fr auto; align-items: center; margin: 4px 0 12px; font: 500 14px/1.4 var(--mono); color: var(--ink-2); }
.c3-range input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--amber); cursor: pointer; touch-action: pan-y; }
.c3-range output { white-space: nowrap; color: var(--ink); }
.c3-handback { min-height: 1.5em; margin: 10px 0 0; font: 500 14px/1.5 var(--sans); color: var(--ink-2); }
.js .scene.c3-fuel, .js .scene.c3-tether, .js .scene.c3-here, .js .scene.c3-compass { width: 100%; margin: 3em 0; padding: 24px 0; min-height: 0; overflow: visible; }
.js .scene.c3-tether { gap: 16px; }
.js .c3-tether > .stage { height: 260px; }
.js .c3-here > .stage { height: 180px; }
.js .c3-compass > .stage { height: 160px; }
.c3-cautions { display: grid; gap: 24px; margin: 0 0 24px; }
.c3-cautions .c3-book { margin-top: 12px; font-size: 19px; }
.c3-questions { display: grid; gap: 8px; margin-bottom: 24px; }
.c3-questions .c3-book { margin-bottom: 0; }
.c3-pace { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 16px; }
.c3-pace .c3-book { font-size: 18px; }
.c3-scene .nojs { font: 400 14px/1.4 var(--sans); }
.js .c3-scene .nojs { display: none; }
@media (hover: hover) and (pointer: fine) {
  .c3-scene .c3-button:not(.verb):not(:disabled):not([aria-disabled='true']):hover, .c3-scene .kit-showme:hover { background-color: rgb(244 241 234 / .1); }
}
@media (min-width: 900px) {
  .js .scene.c3-race, .js .scene.c3-rendezvous { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 64px; padding: 100px max(48px, 6.667vw) 64px; }
  .js .c3-race > .stage, .js .c3-rendezvous > .stage { height: min(66svh, 640px); }
  .c3-scene .c3-book { font-size: 25px; }
  .c3-scene .c3-readouts { font-size: 15px; }
  .c3-cautions { grid-template-columns: 1fr 1fr; gap: 28px; }
  .js .c3-tether > .stage { height: 340px; }
}
@media (max-width: 380px) {
  .c3-scene .c3-button { padding-inline: 14px; font-size: 15px; }
  .c3-scene .c3-book { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .c3-scene .c3-button, .c3-scene .kit-showme { transition: background-color 120ms var(--ease-out); }
  .c3-scene .c3-button:active, .c3-scene .kit-showme:active { transform: none; }
}
@media (forced-colors: active) {
  .c3-scene .c3-button, .c3-scene .kit-showme { border: 1px solid ButtonText; forced-color-adjust: auto; }
  .c3-range input { forced-color-adjust: auto; }
}

/* The final-approach state exposes every capture quantity and keeps plot plus controls together on a phone. */
.c3-rendezvous .c3-readouts { grid-template-columns: 1fr; gap: var(--c3-rdv-gap, 3px); margin-bottom: 12px; }
.c3-rendezvous .c3-book { margin-bottom: 14px; }

/* Annunciators remain legible when unlit; warning colour encodes the selected caution only. */
.c3-scene .c3-lamp { width: 100%; border-radius: 4px; justify-content: flex-start; gap: 10px; color: var(--ink); background: var(--void); }
.c3-lamp::before { content: ''; width: 10px; height: 10px; flex: none; border: 1px solid currentColor; }
.c3-scene .c3-low[aria-pressed='true'] { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); }
.c3-scene .c3-defective[aria-pressed='true'] { background: #f5a6a6; color: #290d0d; border-color: #f5a6a6; }
.c3-lamp[aria-pressed='true']::before { background: currentColor; }
.js .c3-fuel > .stage { height: 150px; }
.c3-fuel .c3-cautions { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.c3-fuel .c3-cautions .c3-book { font-size: 18px; margin: 8px 0 0; }
.c3-fuel .c3-button { padding-inline: 12px; }
.c3-tank { display: grid; gap: 6px; margin-bottom: 14px; font: 500 14px/1.4 var(--mono); color: var(--ink-2); }
.c3-tank meter { width: 100%; height: 14px; accent-color: var(--ink); }
.c3-tank meter::-webkit-meter-bar { background: var(--void); border: 1px solid var(--ink-3); border-radius: 0; }
.c3-tank meter::-webkit-meter-optimum-value { background: var(--ink); }
.c3-tank meter::-moz-meter-bar { background: var(--ink); }
.c3-systems { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; margin: 0 0 14px; font: 500 14px/1.3 var(--mono); color: var(--ink-2); }
.c3-systems > div { display: flex; flex-wrap: wrap; gap: 0 12px; justify-content: space-between; }
.c3-systems dd { margin: 0; color: var(--ink); }
.c3-scene .c3-button[data-c3='lock'][aria-pressed='true'] { background: rgb(245 166 91 / .15); border: 1px solid var(--amber); color: var(--amber-text); }
.c3-pace { display: block; margin-bottom: 16px; }
.c3-pace .c3-book { margin-bottom: 6px; }
@media (min-width: 900px) {
  .js .c3-fuel > .stage { height: 190px; }
  .c3-fuel .c3-systems { grid-template-columns: repeat(4, 1fr); }
  .c3-fuel .c3-systems > div { display: block; }
}
@media (max-width: 899px) {
  .c3-rendezvous { --c3-rdv-gap: 2px; }
  .c3-systems { grid-template-columns: 1fr; }
  .c3-systems > div { flex-wrap: nowrap; }
  .js .scene.c3-race, .js .scene.c3-rendezvous { align-content: start; padding-block: 24px; gap: 16px; }
  .js .c3-race > .stage { height: 220px; }
  .js .c3-rendezvous > .stage { height: 180px; }
  .c3-race .c3-readouts { gap: 2px; margin-bottom: 12px; }
  .c3-race .c3-button { padding-inline: 12px; }
}

/* Selected package-3 cards. Fixed photographs, honest measurement diagrams, one local composition. */
.scene.c3-card { width: min(100vw, 1440px); margin: 3em calc(50% - min(50vw, 720px)); padding: 40px 24px; background: rgb(1 1 2); box-sizing: border-box; overflow: clip; }
.c3-card h3 { font: 400 clamp(32px, 4vw, 48px)/1.1 var(--serif); letter-spacing: -.02em; margin: 0 0 20px; color: var(--ink); }
.c3-card-body { display: grid; gap: 24px; }
.c3-card p, .c3-card figure, .c3-card dl { margin: 0; }
.c3-card .c3-instrument { min-width: 0; font: 400 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.c3-card .c3-card-book { align-self: center; }
.c3-card .c3-card-book .bk { font: 400 21px/1.45 var(--serif); color: var(--book); text-wrap: pretty; }
.c3-card .c3-source-line { font: 400 12px/1.4 var(--mono); color: var(--ink-3); margin-top: 12px; }
.c3-card button, .c3-card summary, .c3-card-help a { min-height: 44px; box-sizing: border-box; color: var(--ink); font: 500 14px/1.3 var(--sans); touch-action: manipulation; }
.c3-card button { border: 1px solid var(--ink-3); background: transparent; padding: 10px 12px; cursor: pointer; transition: transform 120ms var(--ease-out); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.c3-card button:active { transform: scale(.97); }
.c3-card button:disabled { color: var(--ink-3); cursor: default; border-style: dashed; }
.c3-card :is(button, input, summary, [role='slider'], a):focus-visible { outline: 2px solid var(--amber-text); outline-offset: 3px; }
.c3-card [hidden] { display: none; }
.c3-card details { margin: 8px 0; }
.c3-card details p { margin: 8px 0; }
.c3-card summary { display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
.c3-card summary::after { content: '+'; margin-left: 12px; }
.c3-card details[open] summary::after { content: '−'; }
.c3-card details > div { white-space: pre-line; }
.c3-card details[open] > :not(summary) { animation: c3-record-in 160ms var(--ease-out); }
@keyframes c3-record-in { from { opacity: .3; } to { opacity: 1; } }
.c3-card-help { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin-top: 12px; }
.c3-card-help button { border: 0; padding: 10px 0; text-decoration: underline; text-underline-offset: 5px; }
.c3-card-help a { display: flex; align-items: center; text-underline-offset: 5px; }
.c3-example { margin-top: 12px; color: var(--amber-text); }
.c3-example label { display: grid; gap: 8px; }
.c3-card input[type='range'] { width: 100%; height: 44px; accent-color: var(--amber); margin: 0; touch-action: pan-y; }
.c3-card img { object-fit: contain; max-width: 100%; mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.c3-identities { display: flex; justify-content: space-around; }
.c3-identities figure { width: 40%; display: grid; justify-items: center; }
.c3-identities img { width: 100%; height: 116px; }
.c3-identities figcaption { color: var(--ink-3); padding: 4px; }
.c3-identities figure:first-child figcaption { color: var(--amber-text); }
.c3-card .c3-photo-note { color: var(--ink-3); font: 400 13px/1.35 var(--sans); margin-top: 6px; }
.c3-contact-diagram { position: relative; width: 100%; height: 108px; overflow: hidden; }
.c3-contact-svg { width: 100%; height: 125px; position: absolute; inset: 0; fill: none; stroke-width: 2; }
.c3-contact-svg .c3-own { stroke: var(--amber); }
.c3-contact-svg .c3-other { stroke: var(--ink); }
.c3-contact-svg .c3-past { stroke: var(--ink-3); stroke-dasharray: 2 5; stroke-width: 1; }
.c3-diagram-you, .c3-diagram-other { position: absolute; top: 0; font-size: 12px; }
.c3-diagram-you { left: 8%; color: var(--amber-text); }
.c3-diagram-other { right: 8%; }
.c3-previous-gap { position: absolute; top: 95px; color: var(--ink-3); font-size: 12px; }
.c3-card .c3-gap { font-size: 18px; margin-top: 8px; }
.c3-event-pair { margin-top: 12px; font: 500 14px/1.5 var(--mono); }
.c3-event-pair .c3-previous { color: var(--ink-3); }
.c3-card .c3-speeds { margin-top: 8px; color: var(--ink-2); }
.c3-flight-meta { display: grid; grid-template-columns: 1fr 1.2fr; align-items: start; gap: 12px; margin-top: 8px; }
.c3-flight-meta > div { padding-top: 12px; color: var(--ink-3); }
.c3-flight-meta:has(details[open]) { grid-template-columns: 1fr; }
.c3-speed-label, .c3-time-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 12px; }
.c3-speed-label output { color: var(--amber-text); }
.c3-speed-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }
.c3-time { position: relative; height: 58px; width: 220px; margin: 8px 0 0 auto; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.c3-time-track { position: relative; height: 20px; border-bottom: 1px solid var(--ink-3); }
.c3-time-track span { position: absolute; top: 26px; font-size: 12px; }
.c3-time-track span::before { content: ''; position: absolute; top: -12px; height: 10px; border-left: 1px solid var(--ink-3); }
.c3-time-cursor { position: absolute; left: 0; top: 8px; height: 24px; border-left: 2px solid var(--amber); }
/* The diagnosis and its available physical action stay together on wide screens. */
.c3-note-layout { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px 14px; }
.c3-photo { display: grid; align-content: start; }
.c3-photo img { width: 132px; height: 198px; }
.c3-photo figcaption { font: 400 11px/1.35 var(--sans); color: var(--ink-3); margin-top: 4px; }
.c3-diagnosis { align-self: center; }
.c3-nominal { font: 400 13px/1.65 var(--mono); }
.c3-nominal > div { display: flex; justify-content: space-between; gap: 4px; }
.c3-nominal dd { margin: 0; }
.c3-card .c3-diagnosis > p:not(.c3-no-go) { margin-top: 10px; color: var(--ink-3); font: 400 12px/1.4 var(--sans); }
.c3-card .c3-no-go { font-size: 16px; }
.c3-card[data-scope='tank'] .c3-no-go { color: var(--ink-3); }
.c3-scope-area { grid-column: 1 / -1; position: relative; }
.c3-scope-area > p { font: 400 13px/1.4 var(--sans); color: var(--ink-3); }
.c3-scope-rail { position: relative; display: flex; align-items: end; justify-content: space-between; height: 100px; padding: 0; }
.c3-scope-line { position: absolute; top: 24px; left: 0; right: 0; border-top: 1px solid var(--ink-3); }
.c3-card button.c3-note { position: absolute; left: 0; top: 2px; width: 168px; height: 44px; border-color: var(--amber); color: var(--amber-text); background: rgb(1 1 2); font: 500 14px/1 var(--mono); touch-action: pan-y; cursor: grab; transition: transform 180ms var(--ease-out), opacity 160ms var(--ease-out); z-index: 1; }
.c3-card button.c3-note::before { content: ''; display: inline-block; width: 14px; height: 8px; margin-right: 8px; border-block: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.c3-card button.c3-note[data-dragging] { transition: none; cursor: grabbing; }
.c3-card button.c3-note:active { scale: 1; }
.c3-card[data-full='true'] button.c3-note { color: var(--ink-3); border-color: var(--ink-3); }
.c3-card .c3-scope-end { border: 0; padding: 10px 0; min-width: 52px; font: 400 12px/1 var(--mono); }
.c3-mass { grid-column: 1 / -1; width: min(100%, 272px); justify-self: center; }
.c3-card .c3-model { font: 400 13px/1.4 var(--sans); margin: 8px 0 16px; color: var(--ink-3); }
.c3-mass-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; margin-bottom: 6px; }
.c3-mass-label span:last-child { font-size: 12px; color: var(--ink-3); }
.c3-mass-bar { width: 100%; height: 18px; outline: 1px solid var(--ink-3); }
.c3-mass-bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; }
.c3-mass-bar.c3-source { width: calc(100% * 900 / 940); }
.c3-mass-ticks { position: relative; height: 28px; font: 400 10px/1.4 var(--mono); color: var(--ink-3); background: repeating-linear-gradient(to right, var(--ink-3) 0 1px, transparent 1px calc(100% * 100 / 940)) top / 100% 6px no-repeat; }
.c3-mass-ticks span { position: absolute; top: 8px; left: calc(100% * 100 / 940 + 4px); }
.c3-card .c3-valve { display: grid; grid-template-columns: 16px 1fr; text-align: left; align-items: center; gap: 4px 8px; width: 100%; margin-top: 16px; border-color: var(--amber); }
.c3-valve [data-readout='rate'] { grid-column: 2; font: 400 12px/1.3 var(--mono); }
.c3-card .c3-valve:disabled { border-color: var(--ink-3); }
.c3-card .c3-valve-state { font-size: 12px; margin-top: 8px; color: var(--ink-3); }
.c3-card .nojs { display: none; }
html:not(.js) .c3-card .c3-instrument { display: none; }
html:not(.js) .c3-card .nojs { display: block; position: static; margin-top: 16px; }
@media (min-width: 900px) {
  .scene.c3-card { padding: 64px 96px; }
  .c3-card-body { grid-template-columns: minmax(0, 660px) minmax(260px, 1fr); gap: 64px; }
  .c3-card .c3-card-book .bk { font-size: 25px; }
  .c3-identities img { height: 170px; }
  .c3-identities figcaption { font-size: 14px; }
  .c3-card .c3-gap { font-size: 22px; }
  .c3-event-pair { font-size: 17px; }
  .c3-speed-label, .c3-time-label { justify-content: flex-start; gap: 24px; }
  .c3-time { margin-left: 0; }
  .c3-card-fuel .c3-card-body { grid-template-columns: 1fr; gap: 32px; }
  .c3-note-layout { grid-template-columns: 190px 190px minmax(0, 620px); grid-template-rows: auto auto; gap: 24px 36px; }
  .c3-photo { grid-row: 1 / 3; }
  .c3-photo img { width: 180px; height: 270px; }
  .c3-diagnosis { grid-column: 2; grid-row: 1; align-self: start; }
  .c3-scope-area { grid-column: 2 / 4; grid-row: 2; }
  .c3-scope-rail { max-width: 620px; }
  .c3-mass { grid-column: 3; grid-row: 1; width: 100%; max-width: 620px; }
  .c3-card .c3-model { margin-top: 0; }
  .c3-nominal { font-size: 14px; }
  .c3-card .c3-valve { grid-template-columns: 18px 1fr auto; }
  .c3-valve [data-readout='rate'] { grid-column: auto; }
  .c3-card-fuel .c3-card-book { max-width: 48em; }
}
@media (hover: hover) and (pointer: fine) {
  .c3-card button:not(:disabled):hover { color: var(--amber-text); }
}
@media (prefers-reduced-motion: reduce) {
  .c3-card button, .c3-card button.c3-note { transition: none; }
  .c3-card button:active { transform: none; }
  .c3-card details[open] > :not(summary) { animation: none; }
}
/* Fit the instrument and its time strip together; the reading flow always remains passable. */
@media (min-width: 900px) {
  .scene.c3-card { padding-block: 32px; }
  .c3-identities img { height: 100px; }
  .c3-card-body { gap: 48px; }
  .c3-card .c3-speeds { margin-top: 4px; }
  .c3-event-pair { margin-top: 8px; }
}
@media (max-width: 899px) {
  .scene.c3-card { padding: 16px 24px 24px; }
  .c3-card h3 { margin-bottom: 12px; }
  .c3-card-body { gap: 16px; }
  .c3-identities img { height: 66px; }
  .c3-identities figcaption { padding-block: 0; font-size: 12px; }
  .c3-card .c3-photo-note { font-size: 12px; }
  .c3-event-pair { margin-top: 6px; font-size: 13px; }
  .c3-card .c3-speeds { margin-top: 4px; font-size: 12px; }
  .c3-card .c3-gap { font-size: 16px; }
  .c3-flight-meta { margin-top: 0; }
  .c3-speed-label, .c3-time-label { margin-top: 6px; font-size: 12px; }
  .c3-time { height: 50px; margin-top: 0; }
  .c3-photo img { height: 156px; }
  .c3-note-layout { gap: 8px 14px; }
  .c3-scope-rail { height: 92px; }
  .c3-card .c3-model { margin-bottom: 10px; }
  .c3-card .c3-valve { margin-top: 10px; }
}
.c3-note-layout { position: relative; }
.c3-note-layout > svg.c3-scope-link { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; fill: none; stroke: var(--amber); stroke-width: 1; pointer-events: none; z-index: 0; }
.c3-note-layout > :not(svg) { position: relative; z-index: 1; }
.c3-scope-rail { z-index: 2; }
.c3-time-track span { white-space: nowrap; }
.c3-speed-label [data-readout='command'] { color: var(--amber-text); }

.c3-card .c3-speeds, .c3-valve [data-readout="rate"], .c3-mass-label span:last-child, .c3-time-track span { font-size: 14px; }
.c3-card .c3-last-command { font-size: 14px; color: var(--ink-3); margin: 0 0 4px; }

/* Identity artwork uses the very same interface coordinates as the metric diagram.
   Its complete photographs are schematic markers, never a new hardware dimension. */
.c3-card .c3-identities { display: block; position: relative; height: 140px; overflow: hidden; }
.c3-card .c3-identities figure { position: absolute; left: 0; top: 0; width: 78px; display: grid; justify-items: center; }
.c3-card .c3-identities img { width: 78px; height: 117px; max-width: none; mask-image: none; }
@media (min-width: 900px) {
  .c3-card .c3-identities { height: 190px; }
  .c3-card .c3-identities figure { width: 110px; }
  .c3-card .c3-identities img { width: 110px; height: 165px; }
}

/* ---- 54-c4.css ---- */
/* Chapter IV: the inherited flight instrument world, scoped to this lane. */
.js .c4-scene.scene {
  display: grid; grid-template-rows: minmax(230px, 38svh) auto;
  min-height: 100svh; padding: 76px 22px 48px; gap: 22px;
  align-content: center; overflow: visible; scroll-margin-top: 70px;
}
.js .c4-scene > .stage { position: relative; inset: auto; min-height: 230px; width: 100%; max-width: 880px; margin-inline: auto; }
.js .c4-scene > .scene-copy { position: relative; inset: auto; width: 100%; max-width: 640px; margin-inline: auto; display: grid; gap: 16px; }
.c4-scene .bk { font: 400 19px/1.42 var(--serif); color: var(--book); }
.c4-scene .c4-question { font-size: clamp(19px, 2vw, 25px); line-height: 1.42; }
.c4-scene .c4-readout, .c4-scene .c4-caution, .c4-scene .c4-hint {
  display: block; font: 400 14px/1.6 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.c4-scene .c4-readout { min-height: 23px; }
.c4-scene .c4-caution { color: var(--ink); }
.c4-scene .c4-control, .c4-scene .kit-showme {
  justify-self: start; min-height: 48px; padding: 10px 22px; border: 1px solid var(--ink-3); border-radius: 999px;
  font: 600 16px/1.35 var(--sans); color: var(--ink); background: var(--void); touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform 120ms var(--ease-out), opacity 120ms var(--ease-out);
}
.c4-scene .c4-control:active, .c4-scene .kit-showme:active { transform: scale(.97); }
.c4-scene button:is(:disabled, [aria-disabled='true']) { opacity: .65; cursor: default; }
.c4-scene .c4-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.c4-scene .c4-range { display: grid; gap: 4px; font: 500 16px/1.4 var(--sans); }
.c4-scene input[type='range'] { width: 100%; min-height: 48px; accent-color: var(--amber); margin: 0; touch-action: pan-y; }
.c4-scene input[type='range']::-webkit-slider-thumb { min-width: 24px; min-height: 24px; }
.c4-scene .c4-manifest { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 3px 12px; }
.c4-scene .c4-package {
  flex: 0 0 78%; text-align: left; padding: 12px 16px; border: 1px solid var(--ink-3); border-radius: 0;
  min-height: 76px; scroll-snap-align: start; touch-action: pan-x pan-y;
}
.c4-scene .c4-package .bk { font-size: 18px; }
.c4-scene .c4-package[aria-pressed='true'] { border-color: var(--amber); }
.c4-scene .c4-package[data-owner] { border-style: dashed; }
.c4-scene .c4-package[data-owner='theirs'] { color: var(--ink-3); }
.c4-scene .c4-hold { position: relative; overflow: hidden; isolation: isolate; min-width: 180px; min-height: 62px; touch-action: none; }
.c4-scene .c4-fill { position: absolute; z-index: -1; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--amber); opacity: .3; pointer-events: none; }
.c4-scene .c4-return-labels { min-height: 52px; }
.c4-scene .c4-return-label { font-size: 19px; }
.c4-scene .c4-beacon { min-height: 54px; color: var(--cold); transition: opacity 180ms var(--ease-out); }
.c4-scene .c4-beacon .bk { color: inherit; font-size: 18px; }
.js .c4-reflections.scene, .js .c4-far-side.scene { min-height: 78svh; }
.js .c4-silence.scene { min-height: 65svh; grid-template-rows: 20svh auto; }
.js .c4-connection.scene, .js .c4-compass.scene { min-height: 60svh; grid-template-rows: 26svh auto; }
.js .c4-connection > .stage, .js .c4-compass > .stage, .js .c4-silence > .stage { min-height: 140px; }
@media (min-width: 900px) {
  .js .c4-scene.scene { padding: 80px 48px 56px; grid-template-rows: minmax(260px, 40svh) auto; gap: 24px; }
  .c4-scene .c4-manifest { gap: 12px; }
  .c4-scene .c4-package { flex-basis: 47%; }
  .js .c4-cargo.scene { min-height: 110svh; }
}
@media (hover: hover) and (pointer: fine) {
  .c4-scene .c4-control:hover, .c4-scene .kit-showme:hover { border-color: var(--amber); }
}
@media (prefers-reduced-motion: reduce) {
  .c4-scene .c4-control:active, .c4-scene .kit-showme:active { transform: none; opacity: .8; }
}
@media (forced-colors: active) {
  .c4-scene .c4-package[aria-pressed='true'] { outline: 2px solid Highlight; }
  .c4-scene .c4-fill { background: Highlight; forced-color-adjust: none; }
}

/* Round 2: flight instrument controls and full, labelled cargo hardware. */
.c4-scene .c4-readout { white-space: pre-line; }
.c4-scene input[type='range'] { appearance: none; -webkit-appearance: none; background: transparent; color: var(--ink); cursor: ew-resize; }
.c4-scene input[type='range']::-webkit-slider-runnable-track { height: 1px; background: var(--ink-3); }
.c4-scene input[type='range']::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 3px; min-width: 3px; height: 24px; min-height: 24px; margin-top: -12px; border: 0; border-radius: 0; background: var(--ink); }
.c4-scene input[type='range']::-moz-range-track { height: 1px; background: var(--ink-3); }
.c4-scene input[type='range']::-moz-range-thumb { width: 3px; height: 24px; border: 0; border-radius: 0; background: var(--ink); }
.c4-scene input[type='range']:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.c4-scene .c4-range { position: relative; }
.c4-scene .c4-range::after { content: ''; height: 5px; margin-top: -22px; pointer-events: none; background: repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px 10%); }
.c4-scene .c4-manifest { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0; overflow: visible; scroll-snap-type: none; }
.c4-scene .c4-package { min-width: 0; min-height: 66px; width: 100%; padding: 9px 14px; border-color: var(--ink-3); touch-action: manipulation; }
.c4-scene .c4-package .bk { display: block; font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.c4-scene .c4-system { display: block; margin-bottom: 4px; font: 400 14px/1.4 var(--mono); color: var(--ink-2); }
.c4-scene .c4-package[data-owner='theirs'] { border-style: dashed; }
.js .c4-cargo.scene { grid-template-rows: 190px auto; padding-block: 48px; }
.js .c4-cargo > .stage { min-height: 190px; }
.c4-cargo .scene-copy { gap: 12px; }
.c4-cargo .c4-question { font-size: 19px; }
.c4-no .c4-caution { justify-self: start; padding: 9px 14px; border: 1px solid var(--amber); background: var(--amber); color: var(--amber-ink); font-size: 16px; line-height: 1.3; }
.c4-no .c4-caution[data-settled='true'] { background: var(--void); border-color: var(--ink-3); color: var(--ink); }
.c4-no .c4-return-labels { min-height: 80px; }
.c4-no .c4-beacon { padding: 12px 16px; border: 1px solid var(--cold); display: grid; grid-template-columns: 12px 1fr; gap: 12px; align-items: start; }
.c4-no .c4-beacon .bk { font-size: 17px; color: var(--ink); }
.c4-no .c4-beacon-node { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: var(--cold); transition: opacity 180ms var(--ease-out); }
.c4-no .c4-beacon[data-dimmed='true'] { border-color: var(--ink-3); }
.c4-no .c4-beacon[data-dimmed='true'] .c4-beacon-node { opacity: .16; }
.c4-no .c4-hold[aria-disabled='true'] { opacity: 1; }
@media (min-width: 900px) {
  .js .c4-cargo.scene { grid-template-rows: 210px auto; }
  .c4-scene .c4-manifest { grid-template-columns: 1fr; }
  .c4-scene .c4-package { flex-basis: auto; }
}
.js .c4-cargo.scene { grid-template-rows: 140px auto; padding-block: 24px; gap: 16px; }
.js .c4-cargo > .stage { min-height: 140px; }
.c4-cargo .scene-copy { gap: 8px; }
.c4-cargo .c4-question { font-size: 17px; }
@media (min-width: 1000px) {
  .js .c4-cargo.scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto; align-items: center; gap: 48px; padding: 48px; min-height: 100svh; }
  .js .c4-cargo > .stage { height: 480px; min-height: 140px; }
  .js .c4-cargo > .scene-copy { min-width: 0; }
}
.js .c4-no.scene { grid-template-rows: 180px auto; padding: 24px 22px; gap: 10px; }
.js .c4-no > .stage { min-height: 180px; }
.js .c4-no > .scene-copy { gap: 8px; }
.c4-no .c4-question { font-size: 19px; }

/* ---- 55-c5.css ---- */
/* Chapter V extends the approved instrument system. Picture and HTML words occupy separate grid rows. */
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .bk { font-family: var(--serif); color: var(--book); line-height: 1.5; }
.scene.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) { --c5-line: rgb(244 241 234 / .3); }
.js .scene.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) { display: grid; grid-template-rows: auto auto; min-height: 0; padding: 64px 0 40px; overflow: clip; }
.js .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .stage { position: relative; width: min(100%, 1080px); height: clamp(270px, 48svh, 480px); margin: 0 auto; touch-action: pan-y; }
.js .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .scene-copy { position: relative; inset: auto; width: min(100% - 44px, 680px); margin: 0 auto; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-readout { font: 500 14px/1.6 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); margin: 10px 0 18px; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-readout span { display: block; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button, .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .kit-showme { min-height: 48px; padding: 10px 20px; font: 600 16px/1.4 var(--sans); color: var(--ink); background: var(--void); border: 1px solid var(--c5-line); border-radius: 999px; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; transition: transform 120ms var(--ease-out), background 160ms var(--ease-out); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button:not(.c5-center):active { transform: scale(.97); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button[aria-pressed="true"] { color: var(--amber-ink); background: var(--amber); border-color: var(--amber); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button:disabled { opacity: .7; cursor: default; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) :is(button,input):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) input[type="range"] { display: block; width: 100%; min-height: 48px; accent-color: var(--amber); touch-action: pan-y; cursor: ew-resize; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) label, .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-endpoints { font: 500 15px/1.5 var(--sans); color: var(--ink); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-endpoints { display: flex; justify-content: space-between; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 0 0 20px; padding: 0; list-style: none; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-questions .bk { margin: 0; font: 400 17px/1.5 var(--serif); color: var(--book); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .bk.c5-line { font-size: clamp(21px, 2.5vw, 29px); line-height: 1.4; margin: 18px 0; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-center { position: absolute; left: 0; top: 0; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid var(--amber); background: transparent; touch-action: none; cursor: grab; transition: none; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-center::after { content: ''; position: absolute; width: 6px; height: 6px; left: 20px; top: 20px; border-radius: 50%; background: var(--amber); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-center:active { cursor: grabbing; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-earth { margin-top: 24px; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-earth[hidden], .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) [hidden] { display: none !important; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-earth figure { margin: 0; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-transmission { min-height: 5.5em; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-log { margin-top: 28px; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-log summary { min-height: 48px; padding: 12px 0; cursor: pointer; font: 500 16px/1.5 var(--sans); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-log p:not(.bk) { margin: 8px 0; font: 500 14px/1.6 var(--mono); }
.js .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass).c5-compass, .js .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass).c5-beacon { width: 100%; margin: 3em 0; padding: 22px 0; }
.js .c5-beacon .stage { height: 160px; }
.js .c5-compass .stage { height: 160px; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .nojs { font: 400 14px/1.5 var(--sans); }
.js .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .nojs { display: none; }
@media (hover: hover) and (pointer: fine) { .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button:not(:disabled):hover { background: rgb(244 241 234 / .1); } .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button[aria-pressed="true"]:hover { background: var(--amber); } }
@media (min-width: 900px) { .js .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass).c5-untangle, .js .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass).c5-fly-beside { padding-top: 50px; min-height: 860px; } .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-controls { flex-wrap: nowrap; } }
@media (prefers-reduced-motion: reduce) { .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button { transition: none; } .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button:not(.c5-center):active { transform: none; } }
@media (forced-colors: active) { .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) button { border-color: ButtonText; } .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) input { forced-color-adjust: auto; } }
/* Round 2: the single goal opens into its own photographic window, in the instrument's frame. */
.js .c5-untangle .stage { height: clamp(470px, 63svh, 640px); overflow: hidden; }
.js .c5-untangle .c5-questions { position: absolute; inset: 0; display: block; margin: 0; z-index: 2; pointer-events: none; }
.js .c5-untangle .c5-questions .bk { position: absolute; left: 0; top: 0; padding: 4px 7px; background: var(--void); font-size: 17px; line-height: 1.4; text-wrap: pretty; }
.c5-untangle .c5-earth { position: absolute; inset: 0; z-index: 4; margin: 0; pointer-events: none; }
.c5-untangle .c5-earth .film { width: 100%; height: 100%; aspect-ratio: auto; mix-blend-mode: normal; background: var(--void); }
.c5-untangle .c5-earth img, .c5-untangle .c5-earth video { object-fit: contain; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-center { z-index: 3; border-color: var(--ink-3); border-style: dashed; }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-center::after { background: var(--ink); }
.js .c5-beacon .stage { height: 200px; }
.c5-beacon .c5-decoded { padding: 10px 0; }
.js .c5-fly-beside .stage { height: clamp(350px, 53svh, 560px); overflow: hidden; }
@media (max-width: 600px) { .js .c5-untangle .c5-questions .bk { font-size: 17px; } }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-center::after { left: 15px; top: 23px; width: 16px; height: 1px; border-radius: 0; background: var(--ink-3); }
.c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-center::before { content: ''; position: absolute; left: 23px; top: 15px; width: 1px; height: 16px; background: var(--ink-3); }

 :where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass) .c5-decoded .c5-acquired{ background: rgb(245 166 91 / .18); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

::highlight(c5-acquired) { background-color: rgb(245 166 91 / .18); }

/* Frozen selected cards, selector-isolated from retained incumbents. */
/* Chapter V: three owner-selected cards, inherited night instrument and book tokens. */
.scene.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) { --c5-panel: #0c1017; font:400 16px/1.4 var(--sans); color:var(--ink); }
.js .scene.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor), .scene.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) { width:min(1088px,calc(var(--vw,100vw) - 44px)); min-height:0; margin:24px calc((100% - min(1088px,var(--vw,100vw) - 44px)) / 2) 28px; padding:0; overflow:visible; background:var(--void); }
.js .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) .scene-copy, .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) .scene-copy { position:relative; inset:auto; width:100%; margin:0; }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) .stage { position:relative; width:100%; touch-action:pan-y; }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) svg { display:block; width:100%; height:100%; overflow:hidden; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-label{ position:absolute; padding:0 2px; background:var(--void); color:var(--ink-2); font:400 14px/1.3 var(--sans); white-space:nowrap; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-label.mono, .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-metric{ display:grid; gap:5px; font-size:14px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-metric strong{ font:400 16px/1.3 var(--mono); color:var(--ink); }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-note, .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) figcaption { font:400 14px/1.4 var(--sans); color:var(--ink-3); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-blue-stage{ height:590px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-blue-chart{ position:absolute; inset:0; height:590px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-window{ position:absolute; left:368px; top:75px; width:720px; margin:0; transform-origin:0 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-window img{ display:block; width:100%; height:auto; object-fit:contain; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-window figcaption{ padding-top:10px; max-width:48ch; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-controls{ display:grid; gap:12px; margin:14px 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-control{ min-width:0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-control-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; min-height:28px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-control-top output{ font:400 14px/1.4 var(--mono); font-variant-numeric:tabular-nums; text-align:right; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-rail{ position:relative; width:100%; height:44px; cursor:ew-resize; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-track{ position:absolute; left:30px; right:30px; top:21px; height:1px; background:var(--ink-3); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-thumb{ position:absolute; left:8px; top:0; width:44px; height:44px; border:1px solid transparent; border-radius:50%; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-thumb::after{ content:''; position:absolute; left:14px; top:14px; width:14px; height:14px; border-radius:50%; background:var(--ink); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-rail[data-held] .c5-thumb{ border-color:var(--amber); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-rail[data-held] .c5-thumb::after{ background:var(--amber); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-rail:focus-visible{ outline:2px solid var(--amber-text); outline-offset:3px; border-radius:3px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-ends{ display:flex; justify-content:space-between; gap:12px; font:400 14px/1.4 var(--sans); color:var(--ink-3); }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) button { min-width:44px; min-height:44px; padding:10px 14px; border:1px solid rgb(244 241 234 / .4); border-radius:999px; font:500 14px/1.3 var(--sans); background:var(--void); color:var(--ink); user-select:none; -webkit-user-select:none; touch-action:manipulation; transition:transform var(--press) var(--ease-out); }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) button:active { transform:scale(.97); }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) button[data-show] { margin-top:8px; border-color:transparent; padding-left:0; text-decoration:underline; text-underline-offset:4px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-help{ margin:18px 0; padding:16px 0; border-top:1px solid rgb(244 241 234 / .25); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-examples{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-bottom:16px; }
.c5-ilk-mavi .c5-examples { grid-template-columns:repeat(3,minmax(0,1fr)); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-example-chart{ position:relative; max-width:346px; margin:12px 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-example-blue{ aspect-ratio:346 / 590; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-example-signal{ aspect-ratio:346 / 190; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-example-orbit{ aspect-ratio:346 / 210; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-presets{ display:none; gap:8px; flex-wrap:wrap; margin:12px 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-reduced-note{ display:none; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-skip{ margin-top:10px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-message-stage{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-link-wrap{ position:relative; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-link-chart{ position:relative; height:310px; background:var(--c5-panel); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-link-chart .c5-label{ background:var(--c5-panel); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-reference{ position:absolute; left:153px; top:141px; width:96px; height:144px; object-fit:contain; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-signal-chart{ position:relative; height:190px; margin-top:44px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-received{ margin:18px 0 12px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-received [data-decoded]{ min-height:40px; font:400 25px/1.4 var(--serif); margin:6px 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-instrument-head{ display:flex; justify-content:space-between; gap:22px; font:400 14px/1.4 var(--sans); color:var(--ink-3); margin-bottom:8px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-orbit-chart{ height:360px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-legend{ display:flex; gap:24px; flex-wrap:wrap; font:400 14px/1.4 var(--sans); color:var(--ink-3); margin:8px 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-legend span::before{ content:''; display:inline-block; width:24px; border-top:1px dotted var(--ink-3); margin-right:8px; vertical-align:middle; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-legend [data-burn-legend]::before{ border-top:1px dashed var(--amber); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-measures{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin:14px 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-measures dt{ font:400 14px/1.4 var(--sans); color:var(--ink-3); }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-measures dd{ font:400 24px/1.4 var(--mono); font-variant-numeric:tabular-nums; margin:4px 0 0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-orbit-controls{ grid-template-columns:1fr 1fr; gap:40px; }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) [data-revolutions] { margin-top:6px; }
/* Reading and scene share the same left edge around each selected anchor. */
@media(min-width:1140px) { .rd:has(> .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor)):where(:not(:has(> .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass)))) { max-width:1088px; } .rd:has(> .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor)):where(:not(:has(> .c5:where(.c5-without-me,.c5-beacon,.c5-fly-beside,.c5-compass))))>:is(p,h2,h3,ul,ol,hr) { max-width:714px; } }
@media(max-width:1139px) and (min-width:700px) { .js .scene.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor),.scene.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) { width:calc(var(--vw,100vw) - 44px); }  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-blue-stage{ height:590px; }  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-window{ left:33.82%; width:66.18%; } }
@media(max-width:699px) {
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-blue-stage{ height:590px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-blue-chart{ height:590px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-window{ left:0; top:318px; width:100%; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-window figcaption{ padding-top:8px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-message-stage{ grid-template-columns:1fr; gap:18px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-link-chart{ height:240px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-reference{ left:105px; top:116px; width:72px; height:108px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-signal-chart{ margin-top:8px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-orbit-chart{ height:210px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-controls.c5-orbit-controls{ grid-template-columns:1fr; gap:12px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-examples, .c5-ilk-mavi .c5-examples { grid-template-columns:1fr; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-control-top{ font-size:15px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-measures dd{ font-size:20px; }
  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-instrument-head span:first-child{ max-width:205px; }
}
/* Static alternatives change the same mathematical state, without tweened geometry. */
@media(prefers-reduced-motion:reduce) {  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-presets{ display:flex; }  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-reduced-note{ display:block; } .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) button { transition:none; } .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) button:active { transform:none; } }
.c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor)[data-reduced='true'] .c5-presets { display:flex; }
html:not(.js) .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) :is(.c5-controls,[data-show],.c5-presets) { display:none; }
@media(hover:hover) and (pointer:fine) { .c5:where(.c5-ilk-mavi,.c5-mesaj-geciyor) button:hover { color:var(--amber-text); } }

 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-example-window{ position:absolute; left:0; top:318px; width:100%; height:auto; object-fit:contain; }

/* A keyed reference plate, distinct from the unlit map surface. Image pixels remain unchanged. */
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-reference{ outline:1px solid rgb(244 241 234 / .3); outline-offset:4px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-role-metric{ max-width:166px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-blue-label{ max-width:166px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-role-sun-direction{ max-width:150px; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-fallback-phone, :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-fallback-desktop{ position:absolute; inset:0; }
 :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-fallback-phone{ display:none; }
@media(max-width:699px) {  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-fallback-phone{ display:block; }  :where(.c5-ilk-mavi,.c5-mesaj-geciyor) .c5-fallback-desktop{ display:none; } }

/* ---- 56-c6.css ---- */
/* The existing instrument world, one composition at every chapter-VI anchor. */
.c6-scene { --c6-space: clamp(20px,4vw,44px); }
.js .scene.c6-scene { display: flex; flex-direction: column; width: var(--vw,100vw); min-height: 0; margin: 3em calc(50% - var(--vw,100vw)/2); padding: 32px var(--c6-space); overflow: visible; isolation: isolate; }
.js .c6-scene .scene-copy { position: static; width: 100%; max-width: 60ch; padding: 22px 0 0; margin: 0 auto; background: var(--void); }
.c6-scene .c6-window { position: relative; width: 100%; height: 340px; overflow: hidden; background: var(--void); flex-shrink: 0; }
.c6-scene .stage { position: absolute; inset: 0; width: 100%; height: 100%; }
.c6-scene .kit-canvas { display: block; }
.c6-scene .bk { font-family: var(--serif); }
.c6-scene .c6-anchor { margin: 12px 0 24px; font-size: 20px; line-height: 1.5; color: var(--book); }
.c6-scene .c6-context { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }
.c6-scene :is(.c6-readout,.c6-fact,.c6-ref,.c6-status) { display: block; margin: 12px 0; color: var(--ink-2); font: 500 14px/1.5 var(--mono); font-variant-numeric: tabular-nums; }
.c6-scene .c6-readout { display: flex; flex-wrap: wrap; column-gap: 18px; align-items: baseline; min-height: 2.8em; color: var(--ink); text-wrap: pretty; }
.c6-scene .c6-readout > span { white-space: nowrap; }
.c6-scene .c6-status { min-height: 1.5em; }
.c6-scene .c6-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c6-scene button { min-width: 44px; min-height: 48px; padding: 10px 20px; border: 1px solid var(--ink-3); border-radius: 999px; background: var(--void); color: var(--ink); font: 600 16px/1.2 var(--sans); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.c6-scene button:is([data-c6="fly"],[data-c6="test"],[data-c6="correct"],[data-c6="cut"]) { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.c6-scene button[aria-pressed="true"] { border-color: var(--amber-text); }
.c6-scene button:active:not(:disabled) { border-color: var(--amber-text); }
.c6-scene button:disabled { background: var(--void); border-color: var(--ink-3); color: var(--ink-2); cursor: default; }
.c6-scene :is(button,input,.c6-panel):focus-visible { outline: 2px solid var(--amber-text); outline-offset: 4px; }
.c6-scene .kit-showme { margin-top: 10px; }
.c6-scene .c6-slider { flex: 1 0 100%; display: grid; grid-template-columns: 1fr auto; gap: 4px; min-width: 0; color: var(--ink); font: 500 15px/1.4 var(--mono); }
.c6-scene .c6-slider > input { grid-column: 1 / -1; }
.c6-scene input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--amber); cursor: ew-resize; touch-action: pan-y; font-size: 16px; border-radius: 24px; }
.c6-scene input:disabled { accent-color: var(--ink-3); cursor: default; }
.c6-scene .c6-detents { grid-column: 1 / -1; position: relative; display: flex; justify-content: space-between; margin: -6px 0 10px; font-size: 14px; }
.c6-scene .c6-detents > :nth-child(2) { position: absolute; left: 83.333%; transform: translateX(-50%); }
.c6-scene .c6-panels { position: absolute; inset: 32px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; pointer-events: none; }
/* Frosted panels obscure the physical window, never the outside book/control column. */
.c6-scene .c6-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--ink-3); border-radius: 10px; background: rgb(10 15 23 / .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; touch-action: pan-y; cursor: grab; text-align: left; font-weight: 400; }
.c6-scene .c6-panel:active { cursor: grabbing; }
.c6-scene .c6-panel .bk { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.35; }
.c6-scene .c6-grip { font: 500 24px/1 var(--sans); color: var(--ink); align-self: flex-end; user-select: none; }
.c6-scene [hidden] { display: none !important; }
.js .scene.c6-panels { min-height: 100svh; justify-content: center; }
.c6-panels .c6-window { height: 370px; border: 8px solid rgb(244 241 234 / .12); border-radius: 34px; box-shadow: inset 0 0 0 1px var(--ink-3); }
.c6-panels .c6-observe { margin: 0; font-size: 17px; line-height: 1.45; }
.c6-panels[data-folded="true"] .c6-observe { visibility: hidden; }
.c6-panels .c6-anchor { margin: 8px 0 14px; }
.c6-panels .c6-status { margin-bottom: 0; }
.c6-compass .c6-window { height: 220px; }
.c6-compass .scene-copy > .bk:not(.c6-anchor) { font-size: 19px; line-height: 1.5; }
html:not(.js) .c6-scene :is(.c6-window,.c6-controls,.c6-readout,.c6-status,.c6-ref,.c6-fact) { display: none; }
/* Saved physical readings appear together, then occupy the window frame after dismissal. Empty means no overlay. */
.c6-scene .c6-instruments { position: absolute; inset: 40px 20px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 8px; overflow: auto; opacity: 1; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
.c6-scene .c6-instrument { padding: 8px; margin: 0; background: var(--void); color: var(--ink); border: 1px solid var(--ink-3); font: 500 14px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.c6-panels[data-window="instruments"] .c6-panels { visibility: hidden; }
.c6-panels[data-folded="true"] .c6-instruments { opacity: 0; transform: scale(.96); pointer-events: none; }
.c6-panels[data-input="keyboard"] .c6-instruments { transition: none; }
@media (min-width: 900px) {
  .js .scene.c6-scene { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(32px,5vw,72px); align-items: center; padding: 60px 6.667vw; }
  .c6-scene .c6-window { height: 420px; }
  .js .c6-scene .scene-copy { padding: 0; }
  .c6-panels .c6-window { height: min(560px,66svh); }
  .c6-panels .c6-panels { inset: 45px 22px; gap: 12px; }
  .c6-panels .c6-panel { padding: 20px; }
  .c6-panels .c6-panel .bk { font-size: 19px; line-height: 1.45; }
  .c6-panels .c6-anchor { font-size: 24px; line-height: 1.42; }
  .c6-panels .c6-observe { font-size: 20px; }
}
@media (max-width: 767px) {
  .c6-scene .c6-controls { gap: 8px; }
  .c6-scene .c6-anchor { font-size: 18px; }
  .c6-panels .c6-panel { padding: 10px; }
}
@media (hover: hover) and (pointer: fine) { .c6-scene button:hover:not(:disabled) { border-color: var(--amber-text); } }
@media (prefers-reduced-motion: reduce) {
  .c6-scene button { transition: none; }
  .c6-scene button:active { transform: none; }
  .c6-scene .c6-panel { transform: none !important; }
  .c6-scene .c6-instruments { transition-property: opacity; transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) { .c6-scene .c6-panel { background: var(--void); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (forced-colors: active) {
  .c6-scene button { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .c6-scene :is(button,input,.c6-panel):focus-visible { outline-color: Highlight; }
}

/* Keep the readiness instruction from moving the throttle while the reference settles. */
.c6-value [data-c6="condition"] { min-height: 3em; }

/* ---- 57-c7.css ---- */
/* C7 extends the existing book and instrument tokens; no shared shell rules. */
.c7-scene .c7-instrument { display: none; }
.c7-photo { margin-top: 2rem; }
.c7-photo img { display: block; width: 100%; height: auto; object-fit: contain; }
.c7-photo figcaption { margin-top: .75rem; color: var(--ink-3); font: 14px/1.6 var(--sans); }
.js .scene.c7-scene { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; min-height: 0; overflow: visible; padding: 2rem 22px calc(max(34px, env(safe-area-inset-bottom, 0px)) + 16px); }
.js .c7-scene .scene-copy { position: static; display: block; min-width: 0; }
.c7-reading { min-width: 0; }
.c7-lead { margin: 0 0 1rem; font: 400 21px/1.4 var(--serif); color: var(--book); }
.c7-anchor { font: 400 clamp(1.9rem, 3.1vw, 3rem)/1.16 var(--serif); color: var(--book); text-wrap: balance; }
.c7-scene[data-landed='true'] .c7-anchor { color: var(--amber-text); transform: translateY(-4px); }
.c7-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
.c7-heading h3 { font: 600 16px/1.4 var(--sans); letter-spacing: .04em; }
.c7-heading p { color: var(--ink-3); font: 14px/1.5 var(--sans); }
.c7-telemetry { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 1.75rem 0 1.5rem; font: 14px/1.7 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.c7-telemetry p:first-child { display: grid; }
.c7-telemetry p:last-child { text-align: right; }
.c7-telemetry [data-c7='dv'] { white-space: nowrap; font-size: 30px; line-height: 1.3; color: var(--amber-text); }
.c7-chart { font: 14px/1.4 var(--mono); color: var(--ink-2); }
.c7-axis-title { margin-bottom: 1rem; }
.c7-grid line { stroke: var(--ink-3); stroke-width: .5px; opacity: .25; vector-effect: non-scaling-stroke; }
.c7-stage { overflow: visible; position: relative; height: 190px; margin: 0 16px 0 42px; border-bottom: 1px solid var(--ink-3); }
.c7-stage > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.c7-record, .c7-coast, .c7-draft { fill: none; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.c7-record { stroke-linecap: round; stroke: var(--amber); }
.c7-coast { stroke: var(--ink); }
.c7-draft { stroke: var(--ink); stroke-dasharray: 6 5; }
.c7-y-ticks { position: absolute; inset: 0; pointer-events: none; }
.c7-y-ticks span { position: absolute; right: calc(100% + 10px); transform: translateY(-50%); }
.c7-x-ticks { position: relative; height: 24px; margin: 30px 16px 0 42px; }
.c7-x-ticks span { position: absolute; transform: translateX(-50%); }
.c7-time-title { text-align: right; margin-right: 8px; }
.c7-now { position: absolute; top: 0; bottom: 0; left: -22px; width: 44px; touch-action: pan-y; cursor: ew-resize; color: var(--ink); font: 14px/1.4 var(--sans); }
.c7-now::before { content: ''; position: absolute; width: 1px; top: 0; bottom: 0; left: 22px; background: var(--ink-3); }
.c7-now > span:first-child { position: absolute; top: 6px; left: 50%; transform: translateX(-25%); background: var(--void); padding: 0 4px; }
.c7-grab { position: absolute; bottom: -24px; left: 7px; width: 30px; background: var(--void); border: 1px solid var(--ink-3); border-radius: 6px; }
.c7-legend { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; align-items: center; margin-top: 1rem; font: 14px/1.5 var(--mono); color: var(--ink-2); }
.c7-legend > span::before { content: ''; display: inline-block; width: 24px; margin-right: 8px; vertical-align: middle; border-top: 1.5px solid var(--ink); }
.c7-legend > .c7-key-record::before { border-color: var(--amber); }
.c7-legend > .c7-key-draft::before { border-top-style: dashed; }
.c7-legend output { margin-left: auto; }
.c7-vector { font: 14px/1.7 var(--mono); color: var(--ink-2); margin-top: .75rem; }
.c7-draft-controls { margin-top: 1.5rem; font: 14px/1.5 var(--mono); color: var(--ink-2); }
.c7-draft-controls label { display: flex; justify-content: space-between; gap: 1rem; }
.c7-draft-controls input { width: 100%; height: 44px; margin: .5rem 0 0; accent-color: var(--ink); touch-action: pan-y; cursor: ew-resize; font-size: 16px; }
.c7-draft-controls input::-webkit-slider-thumb { width: 44px; height: 44px; }
.c7-draft-controls input::-moz-range-thumb { width: 44px; height: 44px; }
.c7-motor-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 1rem; }
.c7-scene button { min-height: 44px; min-width: 44px; padding: 10px 14px; border: 1px solid var(--ink-3); border-radius: 999px; font-size: 14px; line-height: 1.4; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.c7-scene .c7-now { border: 0; border-radius: 0; padding: 0; touch-action: pan-y; }
.c7-scene .c7-fire { min-height: 54px; padding-inline: 24px; background: var(--amber); color: var(--amber-ink); border-color: var(--amber); font-weight: 600; font-size: 16px; transition: transform 80ms var(--ease-out); }
.c7-fire[aria-pressed='true'] { transform: scale(.97); transition-duration: 120ms; }
.c7-scene button:disabled { cursor: default; opacity: .65; }
.c7-alternatives { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.c7-alternatives button { font-size: 14px; }
.c7-alternatives { display: none; }
.c7-instrument:focus-within .c7-alternatives { display: flex; }
.c7-example { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ink-3); }
.c7-example h4 { margin: 0 0 1rem; font: 600 16px/1.4 var(--sans); }
.c7-example svg { display: block; width: 100%; height: 65px; }
.c7-example p { font: 14px/1.7 var(--mono); margin: .5rem 0 1rem; }
@media (pointer: coarse) { .js .c7-alternatives { display: flex; } }
@media (min-width: 900px) {
 .js .scene.c7-scene { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); padding: 4rem var(--g); }
 .c7-reading { padding-top: 4rem; }
 .c7-photo { margin-top: 3rem; }
 .c7-stage { height: 230px; }
 .c7-heading h3 { font-size: 18px; }
}
@media (max-width: 899px) {
 .c7-reading { display: flex; flex-direction: column; }
 .c7-photo { order: -1; margin: 0 0 3rem; }
 .c7-vector { max-width: none; font-size: 14px; }
 .js .scene.c7-scene { gap: .5rem; }
 .c7-anchor { font-size: 24px; line-height: 1.25; }
 .c7-lead { font-size: 19px; }
 .c7-stage { height: 154px; }
 .c7-telemetry { margin: .5rem 0; line-height: 1.5; }
 .c7-axis-title { margin-bottom: .5rem; }
 .c7-draft-controls { margin-top: .5rem; }
 .c7-motor-row { margin-top: .25rem; }
 .c7-legend { margin-top: .25rem; }
}
@media (hover: hover) and (pointer: fine) { .c7-scene button:not(:disabled):hover { border-color: var(--amber-text); } }
@media (prefers-reduced-motion: no-preference) { .c7-anchor { transition: transform 180ms var(--ease-out); } }
@media (prefers-reduced-motion: reduce) {
 .c7-scene[data-landed='true'] .c7-anchor, .c7-fire[aria-pressed='true'] { transform: none; }
 .c7-scene .c7-fire { transition: none; }
 .c7-fire[aria-pressed='true'] { outline: 1px solid var(--ink); outline-offset: 3px; }
}
.c7-scene[data-keyboard='true'] .c7-anchor, .c7-scene[data-keyboard='true'] .c7-fire { transition: none; transform: none; }
@media (forced-colors: active) { .c7-record, .c7-coast, .c7-draft { stroke: CanvasText; } .c7-now::before { background: ButtonText; } }

.js .c7-scene:is([data-state='error'], [data-state='missing']) .c7-instrument { display: none; }

/* Input-only plane: preserve the native range's paint and document flow. */
.c7-draft-controls { position: relative; }
.c7-draft-controls input { pointer-events: none; }
.c7-draft-plane { position: absolute; left: 0; right: 0; top: 29px; height: 44px; touch-action: pan-y pinch-zoom; cursor: ew-resize; }
.c7-scene .c7-now, .c7-scene .c7-fire { touch-action: pan-y pinch-zoom; }

/* ---- 58-epilogue.css ---- */
/* epi-a: existing book column, fixed photographic close-up. No global reader changes. */
.view-chapter[data-chapter="epilogue"] .rd { max-width: 720px; }
.scene.epi-scene, .js .scene.epi-scene { width:100%; min-height:0; margin:1.6em 0 1.8em; overflow:visible; background:transparent; font:400 15px/1.5 var(--sans); }
.epi-place { color:var(--ink-2); margin:0 0 10px; }
.epi-stage { position:relative; width:100%; aspect-ratio:720/340; overflow:hidden; background:#33362f; }
.epi-stage > svg { display:block; width:100%; height:100%; pointer-events:none; }
.epi-glass { position:absolute; border-radius:50%; clip-path:ellipse(50% 50%); touch-action:pan-y pinch-zoom; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.epi-glass canvas { display:block; width:100%; height:100%; pointer-events:none; }
.epi-glass:focus-visible { outline:3px solid var(--amber); outline-offset:-4px; }
.epi-contact { position:absolute; width:16.129%; height:16.129%; border:1px solid var(--amber); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.epi-contact[hidden] { display:none; }
.epi-tools { display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; margin-top:8px; }
.epi-tools p { margin:0; flex:1 1 180px; }
.epi-scene button, .epi-description summary { min-height:44px; padding:10px 0; font:inherit; color:var(--ink); text-underline-offset:4px; cursor:pointer; touch-action:manipulation; }
.epi-scene button { background:transparent; border:0; text-decoration:underline; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.epi-scene button:active { opacity:.65; }
.epi-scene button:focus-visible, .epi-description summary:focus-visible { outline:2px solid var(--amber); outline-offset:4px; }
.epi-key { margin:6px 0; color:var(--ink-2); display:none; }
.epi-scene:has(.epi-glass:focus-visible) .epi-key { display:block; }
.epi-state { margin:4px 0; min-height:1.5em; color:var(--ink-2); }
.epi-description { color:var(--ink-2); }
.epi-description p { margin:4px 0 12px; max-width:60ch; }
.epi-description summary { width:fit-content; }
.epi-example { padding:14px 0; }
.epi-example-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:420px; }
.epi-example figure { margin:0; }
.epi-example canvas { display:block; width:100%; height:auto; border-radius:50%; }
.epi-example figcaption { padding-top:6px; }
.epi-nojs { color:var(--ink-2); }
.epi-tools, .epi-glass, .epi-state { display:none; }
.epi-scene[data-state="ready"] :is(.epi-tools,.epi-state) { display:flex; }
.epi-scene[data-state="ready"] .epi-glass { display:block; }
.epi-scene[data-state="ready"] .epi-nojs { display:none; }
@media (max-width:800px) {
  .epi-stage { width:calc(100% + 44px); margin-left:-22px; aspect-ratio:390/360; }
  .epi-tools { gap:2px 18px; }
}
@media (hover:hover) and (pointer:fine) { .epi-scene button:hover { color:var(--amber-text); } }
@media (forced-colors:active) { .epi-glass { outline:1px solid CanvasText; }.epi-glass:focus-visible { outline-color:Highlight; } }
@media (prefers-reduced-motion:reduce) { .epi-scene * { scroll-behavior:auto; } }

/* ---- 59-final.css ---- */
/* Final: inherit the book's night, typography and instrument tokens. Geometry is a MODEL, not a picture. */
.scene.final-scene { position:relative; min-height:0; height:auto; width:min(1248px,100%); margin:64px auto; padding:28px 0; overflow:visible; scroll-margin-top:90px; }
.final-scene h3 {font:650 clamp(26px,3vw,42px)/1.12 var(--sans);letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance;}
.final-scene .final-layout {display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start;}
.final-scene .stage {position:relative;inset:auto;width:100%;height:430px;overflow:hidden;}
.final-scene canvas {display:block;width:100%;height:100%;}
.final-scene .scene-copy {position:static;max-width:none;inset:auto;transform:none;}
.final-scene .fin-mono {font:400 14px/1.5 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);}
.final-scene .fin-model {margin-bottom:8px;}
.final-scene .fin-readout {min-height:64px;white-space:pre-line;}
.final-scene .fin-controls {display:grid;gap:8px;}
.final-scene label {display:block;font:400 14px/1.5 var(--mono);color:var(--ink-2);}
.final-scene input[type='range'] {display:block;appearance:none;width:100%;height:56px;background:transparent;accent-color:var(--ink);margin:0;touch-action:pan-y;font-size:16px;}
.final-scene input[type='range']::-webkit-slider-runnable-track {height:2px;background:var(--ink-3);}
.final-scene input[type='range']::-webkit-slider-thumb {appearance:none;width:56px;height:56px;margin-top:-27px;border:2px solid var(--ink);border-radius:50%;background:var(--void);}
.final-scene input[type='range']::-moz-range-thumb {width:52px;height:52px;border:2px solid var(--ink);border-radius:50%;background:var(--void);}
.final-scene input[type='range']::-moz-range-track {height:2px;background:var(--ink-3);}
.final-scene .fin-actions {display:flex;gap:8px;flex-wrap:wrap;}
.final-scene .fin-button,.final-scene .fin-continue {min-height:44px;padding:10px 16px;border:1px solid var(--ink-3);border-radius:999px;color:var(--ink);background:var(--void);font:500 15px/1.3 var(--sans);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;transition:transform var(--press) var(--ease-out);}
.final-scene .fin-button:active {transform:scale(.97);}
.final-scene .fin-burn {min-width:98px;min-height:64px;font-size:23px;touch-action:none;}
.final-scene .fin-burn[aria-pressed='true'] {border-color:var(--amber);color:var(--amber-text);}
.final-scene [aria-disabled='true'] {border-style:dashed;}
.final-scene .fin-help-line {min-height:24px;margin:6px 0;font:400 14px/1.5 var(--mono);color:var(--ink-2);}
.final-scene .bk {font:400 clamp(23px,2.1vw,31px)/1.4 var(--serif);color:var(--book);margin:22px 0;max-width:65ch;}
.final-scene .bk[data-acted='true'] {transform:translateY(-8px);transition:transform 180ms var(--ease-out);}
.final-scene .fin-history {margin:12px 0;white-space:pre-line;}
.final-scene .fin-help {border-top:1px solid var(--ink-3);padding-top:10px;margin:8px 0;}
.final-scene .fin-help h4 {font:500 16px/1.4 var(--mono);margin:0 0 8px;}
.final-scene .fin-photo {margin:0;}
.final-scene .fin-photo img {display:block;width:100%;height:350px;object-fit:contain;}
.final-scene figcaption {font:400 14px/1.5 var(--mono);color:var(--ink-2);margin:8px 0;}
.final-scene .fin-circuit {position:relative;width:100%;height:280px;margin-top:0;}
.final-scene .fin-circuit svg {display:block;width:100%;height:100%;overflow:visible;}
.final-scene .fin-handle {position:absolute;top:0;left:0;width:56px;height:56px;padding:0;border:2px solid var(--ink);border-radius:50%;background:var(--void);touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.final-scene .fin-handle:focus-visible {outline-offset:5px;}
.final-scene .fin-state {min-height:70px;white-space:pre-line;}
.final-scene .fin-detail {font:400 14px/1.5 var(--mono);margin:18px 0;color:var(--ink-2);}
.final-scene .fin-detail summary {cursor:pointer;min-height:44px;padding:12px 0;}
.final-scene .fin-detail p {margin:10px 0;}
@media (hover:hover) and (pointer:fine) {.final-scene .fin-button:hover,.final-scene .fin-continue:hover {border-color:var(--ink);}}
@media(max-width:800px){
 .scene.final-scene {margin:36px 0;padding:16px 0;}
 .final-scene .final-layout {grid-template-columns:1fr;gap:12px;}
 .final-scene h3 {margin-bottom:12px;font-size:27px;}
 .final-scene .stage {height:225px;}
 .final-scene .fin-photo img {width:180px;height:170px;margin:0 auto;}
 .final-scene .fin-photo figcaption {text-align:center;}
 .final-scene .fin-circuit {height:250px;}
 .final-scene .bk {font-size:23px;margin:18px 0;}
 .final-scene .fin-controls {gap:4px;}
 .final-scene .fin-help-line {margin:2px 0;}
 .final-scene .fin-button,.final-scene .fin-continue {font-size:14px;padding:10px 12px;}
}
@media(prefers-reduced-motion:reduce){.final-scene .fin-button,.final-scene .bk[data-acted='true'] {transition:none;transform:none;}}
.final-scene[data-instant='true'] .bk[data-acted='true'] {transition:none;transform:none;}
@media(forced-colors:active){.final-scene .fin-handle,.final-scene input[type='range']::-webkit-slider-thumb {border-color:ButtonText;}}
/* Break out of the reading measure, just as existing chapter scenes do. */
.js .scene.final-scene {display:block;width:var(--vw,100vw);max-width:none;margin:3em calc(50% - var(--vw,100vw)/2);padding:32px max(22px,6.667vw);}
.js .final-scene .scene-copy {width:auto;padding:0;margin:0;}
html:not(.js) .final-scene :is(.stage,.fin-controls,.fin-actions,.fin-circuit,.fin-state,.fin-help-line,.fin-model,.fin-detail) {display:none;}
@media(max-width:800px){.js .scene.final-scene {padding:16px 22px;}}
/* Crop empty photographic margins only; mast, heat shield, service body and bells remain visible. */
.final-scene .fin-photo img {width:min(350px,100%);height:350px;object-fit:cover;object-position:center center;margin:0 auto;}
.js .final-scene .nojs {display:none;}
.final-scene .fin-burn {justify-self:start;width:112px;}
@media(max-width:800px){
 .final-scene .fin-photo {display:grid;grid-template-columns:180px minmax(0,1fr);column-gap:12px;align-items:center;}
 .final-scene .fin-photo img {width:180px;height:170px;grid-column:1;grid-row:1;}
 .final-scene .fin-photo>.fin-mono {grid-column:2;grid-row:1;}
 .final-scene .fin-photo figcaption {grid-column:1/-1;grid-row:2;text-align:left;margin:4px 0;}
 .final-scene .fin-circuit {height:240px;}
 .final-scene .fin-state {min-height:63px;line-height:1.5;}
 .final-scene .stage {height:190px;}
 .final-corridor .fin-controls {grid-template-columns:98px minmax(0,1fr);column-gap:12px;align-items:center;}
 .final-corridor .fin-controls>label:first-child,.final-corridor .fin-controls>[data-final='prediction'],.final-corridor .fin-controls>[data-final='actual'] {grid-column:1/-1;}
 .final-corridor .fin-burn {width:98px;grid-column:1;grid-row:4/7;}
 .final-corridor .fin-controls>.fin-mono:not([data-final]) {grid-column:2;font-size:12px;}
 .final-corridor .fin-controls>label.fin-time-control {grid-column:2;}
 .final-corridor [data-final='rate'] {grid-column:2;font-size:12px;}
 .final-corridor .bk {font-size:22px;line-height:1.35;margin:12px 0;}
 .final-beacon .bk {font-size:22px;line-height:1.35;margin:12px 0;}
}
.final-scene .fin-handle {background:transparent;}
.final-scene :is(.fin-handle,.fin-burn):focus-visible {outline-color:var(--ink);}
.final-scene .fin-example-plot {width:100%;height:90px;}
.final-scene .fin-example-plot svg {display:block;width:100%;height:90px;}

.final-scene .fin-photo {display:grid;}
.final-scene .fin-photo img {grid-row:1;}
.final-scene .fin-photo figcaption {grid-row:2;}
.final-scene .fin-photo>.fin-mono {grid-row:3;}
@media(max-width:800px){.final-scene .fin-photo>.fin-mono {grid-row:1;}}
/* Fix-r1: keep plot coordinates, schematic geometry and their scale labels separate. */
.final-scene .fin-visual {min-width:0;}
.final-scene .fin-schematic {border:1px solid var(--ink-3);margin-top:12px;padding:10px 12px;}
.final-scene .fin-schematic-stage {position:relative;width:100%;height:115px;}
.final-scene .fin-time-value {display:block;white-space:nowrap;}
.final-scene .fin-nowrap {white-space:nowrap;}
.final-scene .fin-electrical {white-space:pre-line;margin:8px 0;}
.final-scene .fin-inspection {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin:20px 0;}
.final-scene .fin-inspection>div {display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;}
.final-scene .fin-inspection dt {color:var(--ink-2);}
.final-scene .fin-inspection dd {margin:0;color:var(--ink);}
.final-scene .fin-inspection [data-final='inspect-altitude'],.final-scene .fin-inspection [data-final='inspect-speed'],.final-scene .fin-inspection [data-final='inspect-time'],.final-scene .fin-inspection [data-final='inspect-density'] {white-space:nowrap;}
@media(max-width:800px){.final-scene .fin-inspection {grid-template-columns:1fr;}.final-scene .fin-photo>.fin-mono {font-size:13px;}}

/* ---- 60-film.css ---- */
/* The photographic window is a separate image, never a paragraph background.
   Match the build's picture query and reserve its box before either source decodes. */
.film {
  position: relative;
  isolation: isolate;
  mix-blend-mode: screen;
  width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0;
  overflow: hidden;
  background: #000;
}
.film picture { display: block; width: 100%; height: 100%; transition: opacity 0s; }
/* Keep the poster opaque through the video reveal; restore it immediately on failure. */
.film[data-playing="true"] picture,
.film[data-playing="done"] picture { opacity: 0; transition-delay: 180ms; }
.film img, .film-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.film-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--ease-out);
}
.film[data-playing="true"] .film-video,
.film[data-playing="done"] .film-video { opacity: 1; }
/* A top-of-chapter photograph leaves the heading within reach and never changes height on playback. */
.view-chapter > .film { max-height: 66svh; margin-bottom: 24px; }
.scene .film { max-width: 100%; }
@media (min-width: 900px), (orientation: landscape) {
  .film { aspect-ratio: 16 / 9; }
  .view-chapter > .film { max-height: 64svh; }
}
@media (prefers-reduced-motion: reduce) {
  .film-video { display: none; transition: none; }
  .film picture { transition: none; }
}

/* Screen composites the complete photographic box over the page's void.
   A black backing also keeps contained-image gutters seamless during playback. */

/* The unresolved goal remains at its photographed position, but survives a dim phone.
   Left uses the contained image's width, capped by the opening height, not the full figure width. */
.view-chapter > .film[data-film="c5-open"]:not([data-playing])::after {
  content: "";
  position: absolute;
  left: calc(50% - min(21.91%, 8.138svh));
  top: 45.329%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
@media (min-width: 900px), (orientation: landscape) {
  .view-chapter > .film[data-film="c5-open"]:not([data-playing])::after {
    left: calc(50% - min(21.655%, 24.626svh));
    top: 45.606%;
  }
}