/* temno.io, pass 2. design/collab/DIRECTION.md is the contract; design/collab/SYSTEM.md documents this file.
   Part 1, the system (Claude, DIRECTION §2 and §4): tokens, rails, navigation, film, controls, motion states,
   native-density caps. Part 2, the compositions (Astra, rounds 4–7).
   Astra composes chapters 1-8 in DIRECTION §8 step 2; final joint visual signoff remains separate. */

@font-face { font-family: "Inter"; src: url("assets/fonts/Inter.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("assets/fonts/RobotoMono.woff") format("woff"); font-weight: 100 700; font-display: swap; }

/* ================================================================ Part 1. The system ================== */

:root {
  color-scheme: dark;
  --ground: #0b0b0d;
  --raise: #121216;
  --line: rgb(255 255 255 / .10);
  --line-2: rgb(255 255 255 / .20);
  --ink: #f3f3f6;
  --ink-2: #aeb0bf;
  --ink-3: #9295a6;
  --beam: #5160fe;
  --beam-ink: #9097ff;
  --glow: 81 96 254;
  --font: "Inter", system-ui, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, Consolas, monospace;

  /* One bounded composition unit: unchanged through 117.125rem (1874px at root16), +10% at 160rem.
     The visitor's root is never overridden. The rem threshold doubles with a 32px default. */
  --wide-step: clamp(0rem, (100vw - 117.125rem) * .002332361516, .1rem);
  --unit: calc(1rem + var(--wide-step));

  /* Keep the signed small-screen ramps. Only their wide plateau gains the same proportional increment;
     physical type remains monotone under zoom, with an owner 100→200 ratio of 2/1.1 = 1.818. */
  --display: calc(clamp(3rem, min(1rem + 8.2vw, 3.85rem + 3.94vw), 7rem) + 7 * var(--wide-step));
  --h2: calc(clamp(2.5rem, min(.75rem + 7.2vw, 2.75rem + 2.82vw), 5rem) + 5 * var(--wide-step));
  --h3: calc(clamp(1.25rem, 1rem + .625vw, 1.5rem) + 1.5 * var(--wide-step));
  --lede: calc(clamp(1.25rem, 1rem + .625vw, 1.5rem) + 1.5 * var(--wide-step));
  --body: calc(clamp(1.125rem, 1rem + .3125vw, 1.25rem) + 1.25 * var(--wide-step));
  --meta: calc(clamp(.8125rem, .75rem + .15625vw, .875rem) + 0.875 * var(--wide-step));

  /* Space (§2.2). Local measures use --unit; viewport ramps add their capped wide increment. */
  --section: calc(clamp(4rem, .5rem + 6.875vw, 6rem) + 6 * var(--wide-step));
  --block: calc(clamp(2rem, 1rem + 1.875vw, 2.5rem) + 2.5 * var(--wide-step));
  --gap: calc(clamp(1rem, .5rem + 1.875vw, 2rem) + 2 * var(--wide-step));
  --pad: calc(clamp(1rem, .25rem + 3vw, 2.5rem) + 2.5 * var(--wide-step));
  --gutter: min(5vw, clamp(1.25rem, 1rem + 1vw, 4rem));

  /* Rails (§2.3) and chrome */
  --shell: min(100% - 2 * var(--gutter), 112.7825 * var(--unit));
  --cinema: min(100%, 160rem);
  --nav: calc(3.5 * var(--unit));
  --target: max(44px, 2.75 * var(--unit));
  --raster-dpr: var(--dpr, 1);
  --ease: cubic-bezier(.16, .84, .24, 1);
}
@media (min-width: 90em) { :root { --nav: calc(4 * var(--unit)); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + calc(1 * var(--unit))); }
@media (prefers-reduced-motion: no-preference) { html:not(.reduce) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--body)/1.55 var(--font);
       -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img, video, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
code { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
::selection { background: rgb(var(--glow) / .55); color: #fff; }
:focus-visible { outline: 2px solid var(--beam-ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
                   clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; z-index: 100; left: var(--gutter); top: calc(.5 * var(--unit)); padding: calc(.75 * var(--unit)) calc(1 * var(--unit)); border-radius: 8px;
             background: var(--ink); color: var(--ground); text-decoration: none; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* The shell: one centred rail for every chapter (§2.3). It is the named container "shell"; its inline size is
   the C of the composition matrix, so chapter layouts query it in rem and reflow the same way at a 32 px root.
   A layout that changes its own columns sits inside the shell, never on it (an element cannot query itself). */
.shell { width: var(--shell); margin-inline: auto; container: shell / inline-size; }
.shell > *, .reading > * { min-width: 0; }

/* Type roles */
.display { font: 600 var(--display)/.98 var(--font); letter-spacing: -.045em; text-wrap: balance; }
.h2 { font: 600 var(--h2)/1.04 var(--font); letter-spacing: -.035em; text-wrap: balance; }
.h3 { font: 600 var(--h3)/1.25 var(--font); letter-spacing: -.015em; text-wrap: balance; }
.lede { font-size: var(--lede); line-height: 1.45; color: var(--ink-2); max-width: 38ch; text-wrap: pretty; }
.lede-strong { color: var(--ink); }
.meta { font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
p, li, dt, dd, summary, figcaption { text-wrap: pretty; }
/* Reading groups keep local rem gaps (§2.1), never a share of a viewport-sized heading. */
.display + .lede { margin-top: calc(1.5 * var(--unit)); }
.h2 + .lede { margin-top: calc(1.25 * var(--unit)); }
.lede + .meta { margin-top: calc(1 * var(--unit)); }
.h3 + p { margin-top: calc(.75 * var(--unit)); }

/* Controls. Every target is at least 44 CSS px in both dimensions and grows with its content; labels may wrap
   below 30em and hold one line from 30em up (§2.3). */
.btn, .pill { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-width: var(--target);
              min-height: var(--target); border-radius: 999px; cursor: pointer; text-align: center; text-decoration: none; }
.btn { padding: calc(.5 * var(--unit)) calc(1.25 * var(--unit)); border: 1px solid transparent; font: 560 var(--body)/1.2 var(--font); }
.btn-solid { background: var(--ink); color: var(--ground); }
.btn-solid:hover { background: #fff; }
.btn:disabled { cursor: not-allowed; opacity: .6; }
.pill { padding: calc(.5 * var(--unit)) calc(1.1 * var(--unit)); border: 1px solid var(--line-2); background: rgb(255 255 255 / .05); color: var(--ink);
        font: 500 var(--meta)/1.2 var(--mono); }
.pill:hover { background: rgb(255 255 255 / .10); }
.pill[aria-busy="true"] { cursor: progress; opacity: .7; }
@media (min-width: 30em) { .btn, .pill { white-space: nowrap; } }
/* Sound only works with script; without it the icon is not offered. */
html:not(.js) :is([data-film-sound], [data-captions-sound]) { display: none; }
/* Sound on the picture (owner, round 9): an icon over the media's corner, shown while the pointer is over the
   media, on keyboard focus, while it loads, and always on a screen with no hover. It names its action. */
.sound-toggle { position: absolute; right: calc(.75 * var(--unit)); bottom: calc(.75 * var(--unit)); z-index: 2;
  display: inline-grid; place-items: center; width: var(--target); height: var(--target); padding: 0; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .2); background: rgb(11 11 13 / .6); color: var(--ink); cursor: pointer;
  opacity: 0; transition: opacity .2s ease, background-color .2s ease; }
.sound-toggle svg { width: calc(1.25 * var(--unit)); height: auto; }
.sound-toggle .sound-on, .sound-toggle[data-on] .sound-off { display: none; }
.sound-toggle[data-on] .sound-on { display: inline; }
.sound-toggle:hover { background: rgb(11 11 13 / .8); }
.sound-toggle[aria-busy="true"] { cursor: progress; }
:is(.film-frame, .captions-picture):hover .sound-toggle, .sound-toggle:focus-visible, .sound-toggle[aria-busy="true"] { opacity: 1; }
@media (hover: none) { .sound-toggle { opacity: 1; } }
.reduce .sound-toggle { transition: none; }

/* Navigation: the chapter ruler. Its head is the line of light; aria-current marks the chapter being read. */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav); display: flex; align-items: center;
       gap: clamp(calc(.5 * var(--unit)), calc(.25 * var(--unit)) + 1.5vw, calc(3 * var(--unit))); padding-inline: calc((100% - var(--shell)) / 2); transition: background-color .4s; }
.nav.solid { background: rgb(11 11 13 / .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
             box-shadow: inset 0 -1px 0 var(--line); }
.nav-mark { flex: none; display: flex; align-items: center; min-height: var(--target); }
.nav-mark img { width: calc(6.25 * var(--unit)); height: auto; }
.ruler { position: relative; flex: 1; align-self: stretch; min-width: 0; }
.ruler ol { height: 100%; display: flex; align-items: center; justify-content: space-between; padding-inline: calc(1.25 * var(--unit)); }
.ruler ol::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: var(--line); }
.ruler a { position: relative; display: flex; align-items: center; justify-content: center; min-width: var(--target);
           min-height: var(--target); height: var(--nav); padding: 0 calc(.35 * var(--unit)); font: 500 var(--meta)/1 var(--mono);
           letter-spacing: .04em; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.ruler a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: calc(.5 * var(--unit)); background: var(--line-2); }
.ruler a:hover, .ruler a[aria-current] { color: var(--ink); }
.ruler-head { position: absolute; left: 0; top: calc(50% + calc(.75 * var(--unit))); bottom: 0; width: 2px; margin-left: -1px; background: #dfe2ff;
              box-shadow: 0 0 10px 2px rgb(var(--glow) / .8), 0 0 28px 4px rgb(var(--glow) / .35);
              transform: translateX(var(--head, 0px)); will-change: transform; }
.nav-cta { flex: none; padding: calc(.5 * var(--unit)) calc(1 * var(--unit)); font-size: var(--meta); }
.progress { display: none; position: absolute; inset: auto 0 0; height: 2px; transform-origin: left;
            transform: scaleX(var(--p, 0)); background: var(--beam); box-shadow: 0 0 8px rgb(var(--glow) / .8); }
@media (max-width: 64em) {
  .ruler { display: none; }
  .progress { display: block; }
  .nav-mark { margin-right: auto; }
  .nav-mark img { width: calc(5 * var(--unit)); }
}
/* Too narrow for the updates link beside the brand: the film credit carries it instead. With the motion toggle
   gone it fits from 320 px at a 16 px root; at a 32 px default the credit carries it below 624 px. */
.credit-updates { display: none; }
@media (max-width: 19.5em) { .nav-cta[data-prelaunch] { display: none; } .credit-updates { display: inline-flex; } }

/* 0. The film (§3.3.0): the whole 16:9 frame and its credit fit the first screen at the default font. The movie is
   never cropped; width limits phones, height limits desktops. --credit reserves the credit's height. The credit
   follows the film's edges, or the shell's rail when the film is wider than the shell. */
.film-section { padding-top: var(--nav); container-type: inline-size; }
.film { --credit: calc(5 * var(--unit)); width: min(var(--cinema), max(calc(20 * var(--unit)), calc((100svh - var(--nav) - var(--credit)) * 16 / 9)));
        margin-inline: auto; }
/* The film's frame clips a video drawn 1 px larger on every side. Where the browser or the GPU snaps the playing
   video to whole pixels, whatever it leaves at the video's edge falls outside the frame. That edge was a black
   line: 2 px at 200% here, and one column at 100% on the owner's screen. The box is the ground, as the film's
   first and last frames are, so nothing that shows can read as a line. */
.film-frame { position: relative; overflow: hidden; }
.film-media { display: block; width: calc(100% + 2px); max-width: none; height: auto; margin: -1px; aspect-ratio: 16 / 9;
  background: var(--ground); }
.credit { min-height: var(--credit); display: flex; align-items: center; justify-content: space-between; gap: calc(.75 * var(--unit)) calc(2 * var(--unit));
          padding-block: calc(.75 * var(--unit)); padding-inline: max(0px, (100% - min(100cqw - 2 * var(--gutter), calc(112.7825 * var(--unit)))) / 2); }
.credit-actions { flex: none; display: flex; flex-wrap: wrap; gap: calc(.75 * var(--unit)); }
@media (max-width: 64em) {
  .credit { flex-wrap: wrap; align-content: center; }
  .credit-actions { flex: 0 1 auto; max-width: 100%; }
}
/* A short, wide screen (a phone on its side): the band is never needed there (the nav carries the link), so the
   film takes the height and stays centred. Round 10: the credit sentence is gone (owner). */
@media (max-height: 30em) and (min-aspect-ratio: 3/2) {
  .film { --credit: calc(1.5 * var(--unit)); }
  .credit { min-height: var(--credit); padding: 0; }
}

/* Motion states set by site.js: .reduce follows prefers-reduced-motion live; .motion-held is the ?held capture hold. */
.reduce *, .reduce *::before, .reduce *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Native density: desktops use actual DPR, including Windows 200% plus browser zoom. Coarse-pointer
   devices retain the signed phone exception, reviewed at output size. --native is real source width, not
   an enlarged encode's width. site.js updates --dpr when zoom changes. */
@media (pointer: coarse) { :root { --raster-dpr: min(var(--dpr, 1), 2); } }
.native-cap { max-width: calc(var(--native) * 1.25 / var(--raster-dpr)); }

.pending-note { max-width: 36ch; padding: var(--pad); text-align: center; font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }

/* ================================================================ Part 2. Compositions ===============
   Astra, pass 2 / round 4. References: .collab/astra/round4/refs-index.md. Decisions: DIRECTION section 10.
   Text stays on the shared rail. Media owns its inner alignment; density is measured from real source pixels. */

.chapter, .statement { padding-top: var(--section); }
.reading { min-width: 0; }
.reading .h2 { max-width: 20ch; }
.chapter > .shell > .reading { max-width: calc(62 * var(--unit)); }

/* 1. Statement and lede precede the product at every width. Window and detail keep the owner’s
   1874px relationship as the bounded composition grows; extra width stays outside the rail. */
.statement-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.reading-display .display { max-width: 20ch; }
.editor-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--block);
  padding: var(--pad); container-type: inline-size;
  background: radial-gradient(46% 62% at 66% 46%, rgb(var(--glow) / .12), transparent 78%);
  --win: min(100cqw - calc(4 * var(--unit)), calc((100svh - var(--nav) - calc(4 * var(--unit))) * 2544 / 1432), calc(96 * var(--unit))); }
.window { width: var(--win); max-width: min(100%, calc(2355.5556px / var(--raster-dpr))); justify-self: end; }
.window-media { width: 100%; height: auto; aspect-ratio: 2544 / 1432; border-radius: calc(.5 * var(--unit)); background: #000;
  box-shadow: 0 calc(2 * var(--unit)) calc(5 * var(--unit)) rgb(0 0 0 / .4), 0 0 0 1px var(--line-2); }
.pullout { display: none; position: absolute; left: var(--pad); bottom: var(--pad); height: auto; aspect-ratio: 900 / 310;
  width: min(calc(56.25 * var(--unit)), calc(var(--win) * .62)); max-width: calc(900px * 1.25 / var(--raster-dpr));
  border-radius: calc(.375 * var(--unit)); background: #000; box-shadow: 0 calc(1 * var(--unit)) calc(3 * var(--unit)) rgb(0 0 0 / .55), 0 0 0 1px rgb(var(--glow) / .45); }
.pullout-on .pullout { display: block; }

@media (max-height: 40em) { .editor-stage { --win: calc(100cqw - calc(4 * var(--unit))); } }
@container shell (max-width: 47.99rem) {
  .editor-stage { padding: 0; background: none; --win: 100%; }
  .pullout-on .pullout { display: none; }
}

/* 2. The hand makes one decision: the crown's tail closes a 12-frame gap and opens it again (§3.3.2). */
.hand-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block) calc(var(--gap) * 1.5); align-items: start; }
.hand-grid > .reading { max-width: calc(36 * var(--unit)); }
@container shell (min-width: 80rem) {
  .hand-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .hand-grid .notes { grid-column: 1 / -1; }
}
/* The take is 1498 x 562 (8:3). Narrow screens show a 16:10 cover of it, 899 source px across, kept on the boundary.
   Both are capped by the density rule and by the height below the nav, as the captions picture is. */
.trim {
  --trim-native: 1498px;
  --trim-height: max(1px, calc(100svh - var(--nav) - calc(2 * var(--unit)) - var(--target) - calc(1 * var(--unit))));
  --trim-w: min(100%, calc(var(--trim-native) * 1.25 / var(--raster-dpr)), calc(var(--trim-height) * 8 / 3));
  min-width: 0; }
.trim-frame { width: var(--trim-w); aspect-ratio: 8 / 3; border-radius: calc(.5 * var(--unit)); background: #000; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-2); }
.trim-frame video, .trim-pair img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
/* Reduced motion shows the real before and after in place of the recording. */
.trim-pair { display: none; gap: calc(1 * var(--unit)); }
.trim-pair figure { width: var(--trim-w); }
.trim-pair img { height: auto; aspect-ratio: 8 / 3; border-radius: calc(.5 * var(--unit)); background: #000; box-shadow: 0 0 0 1px var(--line-2); }
.trim-pair figcaption { padding-top: calc(.5 * var(--unit)); font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
.reduce .trim .trim-frame { display: none; }
.reduce .trim .trim-pair { display: grid; }
.trim-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: calc(.75 * var(--unit)) calc(1.5 * var(--unit));
  padding-top: calc(1 * var(--unit)); font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
@container shell (max-width: 47.99rem) {
  .trim { --trim-w: min(100%, calc(899px * 1.25 / var(--raster-dpr)), calc(var(--trim-height) * 16 / 10)); }
  .trim-frame, .trim-pair img { aspect-ratio: 16 / 10; }
}
.notes { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(2 * var(--unit)) calc(var(--gap) * 1.5); margin-top: var(--block); }
.notes li { min-width: 0; padding-top: calc(1.25 * var(--unit)); border-top: 1px solid var(--line); }
.notes p { color: var(--ink-2); max-width: 36ch; }
.hand-grid .notes { margin-top: 0; }
@container shell (min-width: 36rem) { .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container shell (min-width: 80rem) { .notes-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 3. Source material, a request, then the changed timeline. The log is evidence, not a second product mockup. */
.sources { display: grid; gap: calc(1.25 * var(--unit)) var(--gap); margin-top: var(--block); grid-template-columns: minmax(0, 1fr); }
@container shell (min-width: 18rem) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container shell (min-width: 36rem) { .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container shell (min-width: 64rem) { .sources { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.sources img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(.375 * var(--unit)); background: #000; }
.sources figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 calc(.75 * var(--unit)); padding-top: calc(.75 * var(--unit));
  font: 400 var(--meta)/1.4 var(--mono); color: var(--ink-3); }
.sources figcaption span:first-child { color: var(--ink-2); }
.instrument { container: instrument / inline-size; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: calc(1.5 * var(--unit)); margin-top: var(--block); padding: var(--pad); background: #101014;
  border: 1px solid var(--line-2); border-radius: calc(.75 * var(--unit)); }
.instrument-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(1 * var(--unit)) calc(2 * var(--unit));
  padding-bottom: calc(1.25 * var(--unit)); border-bottom: 1px solid var(--line); }
.instrument-bar .note { min-width: 0; }
.readout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(1.5 * var(--unit)) var(--gap);
  padding-block: calc(.5 * var(--unit)) calc(1 * var(--unit)); }
.request { flex: 1 1 calc(28 * var(--unit)); max-width: 44ch; min-width: 0; padding-left: calc(1.25 * var(--unit)); border-left: 2px solid var(--beam);
  font-size: var(--lede); line-height: 1.45; text-wrap: pretty; }
.request-who { display: block; margin-bottom: calc(.75 * var(--unit)); font: 500 var(--meta)/1.4 var(--mono); color: var(--beam-ink); }
.numerals { display: flex; flex-wrap: wrap; gap: calc(1.5 * var(--unit)) calc(2.5 * var(--unit)); }
.numerals > span { display: flex; flex-direction: column; gap: calc(.5 * var(--unit)); font: 500 var(--meta)/1.4 var(--mono); color: var(--ink-3); }
.numerals b { font: 600 var(--h2)/1 var(--font); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* Reserve the finished count and plural label, so each repeating pass has the same footprint. */
.numerals > span:first-child b { min-width: 2ch; }
.numerals > span:last-child { min-width: 5ch; }
.agent-panels { position: relative; aspect-ratio: 2544 / 314; border-radius: calc(.375 * var(--unit)); overflow: hidden; background: #000;
  max-width: calc(2544px * 1.25 / var(--raster-dpr)); }
.agent-panels img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.agent-panels:not([data-step]) img[data-panel="8"], .agent-panels[data-step] img.on { visibility: visible; }
/* A recorded cut lands as an indigo flash at its x in the panel, spanning V2 to A1 (y 96-276 of 314): it grows, then fades. */
.cut-flash { position: absolute; top: calc(96 / 314 * 100%); height: calc(180 / 314 * 100%); width: 2px; margin-left: -1px;
  background: #fff; pointer-events: none; box-shadow: 0 0 6px 2px rgb(var(--glow)), 0 0 28px 8px rgb(var(--glow) / .6);
  opacity: 0; transform: scaleY(0); animation: cut-flash 1000ms var(--ease) forwards; }
@keyframes cut-flash { 0% { opacity: 1; transform: scaleY(0); } 18% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1); } }
.agent-state, .agent-before figcaption, .call1 figcaption { padding-top: calc(.75 * var(--unit)); font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
.agent-state { display: grid; }
.agent-state > span { grid-area: 1 / 1; }
.agent-state-measure { visibility: hidden; }
.call1 figcaption code { font-size: 1em; }
.agent-before img, .calls-timeline { width: 100%; height: auto; max-width: calc(2544px * 1.25 / var(--raster-dpr)); border-radius: calc(.375 * var(--unit)); }
.calls { display: grid; gap: calc(.375 * var(--unit)) calc(.75 * var(--unit)); grid-template-columns: minmax(0, 1fr); font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
@container instrument (min-width: 44rem) { .calls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container instrument (min-width: 88rem) { .calls { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.calls li, .calls-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .6em; align-items: baseline;
  padding: calc(.75 * var(--unit)) calc(.875 * var(--unit)); border: 1px solid var(--line); border-left: 2px solid var(--line); border-radius: calc(.25 * var(--unit)); }
.calls code, .calls-list code { color: var(--ink-2); font-size: 1em; }
.calls .ms, .calls-list .ms { text-align: right; white-space: nowrap; }
.calls li.done { color: var(--ink-2); }
.calls li.active { border-left-color: var(--beam-ink); background: rgb(var(--glow) / .09); color: var(--ink); }
.calls li.active code { color: var(--beam-ink); }
.calls-all summary { display: flex; align-items: center; min-height: var(--target); cursor: pointer;
  font: 500 var(--meta)/1.5 var(--mono); color: var(--ink-2); text-decoration: underline; text-underline-offset: .25em; }
.calls-list { display: grid; gap: calc(.5 * var(--unit)); margin-top: calc(.75 * var(--unit)); font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-2); }
.calls-timeline { margin-top: calc(1 * var(--unit)); }
.call1 { padding-top: calc(1.25 * var(--unit)); border-top: 1px solid var(--line); }
.call1-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(1 * var(--unit)) var(--gap); }
@container instrument (min-width: 40rem) { .call1-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.call1-side span { display: block; padding-bottom: calc(.5 * var(--unit)); font: 500 var(--meta)/1.4 var(--mono); color: var(--ink-3); }
.crop { position: relative; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); border-radius: calc(.375 * var(--unit)); background: #000;
  max-width: calc(var(--cw) * 1px * 1.25 / var(--raster-dpr)); }
.crop img { position: absolute; max-width: none; width: calc(var(--sw) / var(--cw) * 100%); height: auto;
  left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); }
.note { font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
.agent-before, .calls-all, .call1 { display: none; }
@container shell (max-width: 47.99rem) {
  /* Hidden rows share one track: the active call never shifts the disclosure or following chapter. */
  .instrument .calls { grid-template-columns: minmax(0, 1fr); }
  .instrument .calls li { grid-area: 1 / 1; visibility: hidden; align-content: start; }
  .instrument .calls li.current { visibility: visible; }
  .calls-all, .call1 { display: block; }
  .instrument { padding: calc(1 * var(--unit)); }
}
@container instrument (max-width: 19.5rem) {
  .calls li, .calls-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .calls .args, .calls-list .args { grid-column: 1 / -1; grid-row: 2; }
}
/* At a large default font the function name should read as a name, not three isolated syllables. */
@container instrument (max-width: 12rem) {
  .calls li, .calls-list li { grid-template-columns: minmax(0, 1fr); row-gap: calc(.25 * var(--unit)); padding-inline: calc(.5 * var(--unit)); }
  .calls .args, .calls-list .args { grid-column: 1; grid-row: auto; }
  .calls .ms, .calls-list .ms { grid-column: 1; text-align: left; }
}
.reduce .agent-before, .reduce .call1 { display: block; }
.agent-notes { max-width: calc(90 * var(--unit)); }

/* 4. Two phrases beside the matched 1920px exports; reading rail and gap share the composition unit. */
.color-grid { --grade-native: 1920px; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block) var(--gap); align-items: start; }
.color-grid > .reading { max-width: calc(42 * var(--unit)); }
.color-grid .h2 { max-width: 14ch; }
@container shell (min-width: 98rem) {
  .color-grid { grid-template-columns: calc(36 * var(--unit)) minmax(0, 1fr); }
  .color-grid .wipe { justify-self: end; }
}
.wipe { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(.5 * var(--unit)); background: #000;
  max-width: min(1920px, calc(var(--grade-native) * 1.25 / var(--raster-dpr))); user-select: none; -webkit-user-select: none; }
.wipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.wipe-before { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.wipe-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #dfe2ff;
  pointer-events: none; box-shadow: 0 0 12px 2px rgb(var(--glow) / .65); }
.wipe-line::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(1.5 * var(--unit)); height: calc(3 * var(--unit));
  border: 1px solid rgb(255 255 255 / .7); border-radius: 999px; background: rgb(11 11 13 / .65); transform: translate(-50%, -50%); }
.wipe-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize;
  touch-action: pan-y; -webkit-appearance: none; appearance: none; background: transparent; }
.wipe-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 2px; height: 100vh; }
.wipe-input::-moz-range-thumb { width: 2px; height: 100vh; border: 0; }
.wipe:focus-within { outline: 2px solid var(--beam-ink); outline-offset: 4px; }
.wipe:focus-within .wipe-line { width: 4px; margin-left: -2px; }
.wipe:focus-within .wipe-line::after { border-color: var(--ink); background: rgb(var(--glow) / .6); }
.wipe-label { position: absolute; top: calc(1 * var(--unit)); padding: calc(.4 * var(--unit)) calc(.65 * var(--unit)); border-radius: calc(.25 * var(--unit)); background: rgb(11 11 13 / .8);
  font: 500 var(--meta)/1.25 var(--mono); pointer-events: none; }
.wipe-label-before { left: calc(1 * var(--unit)); }
.wipe-label-after { right: calc(1 * var(--unit)); }
@container shell (max-width: 22rem) { .wipe-label { display: none; } }

/* 5. Captions — round 5. References: .collab/astra/round5/refs-index.md. */
/* The chapter names the result before showing its picture and the real settings. */
.captions-stage {
  --picture-native: 1920px;
  --panel-native: 688px;
  --panel-ratio: calc(920 / 688);
  --picture-height: max(1px, calc(100svh - var(--nav) - calc(2 * var(--unit))));
  --pic: min(1920px, calc(var(--picture-native) * 1.25 / var(--raster-dpr)), calc(var(--picture-height) * 16 / 9));
  --panel: min(calc(28 * var(--unit)), calc(var(--panel-native) * 1.25 / var(--raster-dpr)));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block); align-items: start;
}
.captions-copy { grid-column: auto; grid-row: auto; max-width: calc(60 * var(--unit)); }
.captions-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block) var(--gap); align-items: start; min-width: 0; }
.captions-picture { grid-column: auto; grid-row: auto; position: relative; display: grid; width: 100%; max-width: var(--pic); min-width: 0; }
.captions-panel { grid-column: auto; grid-row: auto; position: static; width: 100%; max-width: var(--panel); }
.captions-picture video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: calc(.5 * var(--unit)); background: #000; }
.captions-panel img { width: 100%; height: auto; border-radius: calc(.5 * var(--unit)); border: 1px solid var(--line-2);
  box-shadow: 0 calc(1.5 * var(--unit)) calc(4 * var(--unit)) rgb(0 0 0 / .4); }
@container shell (min-width: 36rem) {
  /* Fit the result beside the panel. Their bottom edges agree, without forcing the heading into this
     narrower media group or putting a tall panel ahead of the result. */
  .captions-media {
    --pair-height: min(var(--picture-height), calc((100cqw - var(--gap)) / (16 / 9 + 1 / var(--panel-ratio))),
      calc(var(--panel) * var(--panel-ratio)), calc(var(--pic) * 9 / 16));
    grid-template-columns: calc(var(--pair-height) * 16 / 9) calc(var(--pair-height) / var(--panel-ratio));
  }
}
@container shell (min-width: 80rem) {
  /* The last two terms solve panel-height <= .42 * picture-width even when the picture shrinks to C.
     The 4rem overlap stays above the lower 20% caption-safe band. */
  .captions-media { --panel: min(calc(28 * var(--unit)), calc(var(--panel-native) * 1.25 / var(--raster-dpr)),
      calc((100cqw + calc(4 * var(--unit))) * .42 / (var(--panel-ratio) + .42)), calc(var(--pic) * .42 / var(--panel-ratio)));
    column-gap: 0; grid-template-columns: minmax(0, calc(var(--pic) - calc(4 * var(--unit)))) calc(4 * var(--unit)) minmax(0, calc(var(--panel) - calc(4 * var(--unit)))); }
  .captions-picture { grid-column: 1 / 3; grid-row: 1; }
  .captions-panel { grid-column: 2 / 4; grid-row: 1; position: relative; z-index: 1; }
}

/* 6. Ownership is a digest; the detailed specifications remain a disclosure. */
.yours > .shell { padding-top: var(--block); border-top: 1px solid var(--line-2); }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap); margin-top: var(--block); }
@container shell (min-width: 36rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container shell (min-width: 80rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.facts div { min-width: 0; padding: calc(1.25 * var(--unit)) 0; }
.facts dt, .specs dt { font: 500 var(--meta)/1.55 var(--mono); color: var(--ink-3); }
.facts dd { margin-top: calc(.5 * var(--unit)); font-size: var(--lede); line-height: 1.35; max-width: 26ch; }
.specs-more { margin-top: calc(1.25 * var(--unit)); border-block: 1px solid var(--line); }
.specs-more summary, .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: calc(1 * var(--unit));
  min-height: var(--target); padding: calc(1.25 * var(--unit)) 0; cursor: pointer; list-style: none; font-weight: 560; }
.specs-more summary::-webkit-details-marker, .faq-list summary::-webkit-details-marker { display: none; }
.specs-more summary::after, .faq-list summary::after { content: "+"; flex: none; color: var(--beam-ink); font-family: var(--mono); }
.specs-more[open] summary::after, .faq-list details[open] summary::after { content: "\2212"; }
.specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(1.5 * var(--unit)) var(--gap); padding-block: calc(.5 * var(--unit)) calc(2 * var(--unit)); }
@container shell (min-width: 50rem) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.specs dd { margin-top: calc(.375 * var(--unit)); }

/* 7. Questions form one reading channel. The title gets enough room to speak in phrases. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--block) calc(var(--gap) * 2); align-items: start; }
.faq-grid .h2 { max-width: 14ch; }
@container shell (min-width: 80rem) { .faq-grid { grid-template-columns: calc(32 * var(--unit)) minmax(0, 1fr); } }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { font-size: calc(var(--body) * 1.12); line-height: 1.4; }
.faq-list details[open] summary { color: var(--ink); }
.faq-list details p { max-width: 62ch; padding-bottom: calc(1.5 * var(--unit)); color: var(--ink-2); }

/* 8. The mark completes the film's arc. The form sends only with a configured endpoint, and says so otherwise. */
.endcard { position: relative; isolation: isolate; margin-top: var(--section); padding-block: calc(var(--section) * 1.5);
  min-height: min(100svh, calc(56 * var(--unit))); display: grid; align-content: center; }
.endcard::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 42% at 42% 37%, rgb(var(--glow) / .13), transparent 78%); }
.end { display: grid; justify-items: center; text-align: center; }
.end-mark { width: min(100%, calc(64 * var(--unit))); height: auto; }
.end-line { margin-top: var(--block); font-size: var(--lede); line-height: 1.4; }
.end-sub { margin-top: calc(.75 * var(--unit)); font: 500 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
.signup { container: signup / inline-size; width: min(100%, calc(34 * var(--unit))); margin-top: var(--block); text-align: left; }
.signup-label { display: block; margin-bottom: calc(.75 * var(--unit)); font: 500 var(--meta)/1.4 var(--mono); color: var(--ink-2); }
.signup-row { display: flex; flex-direction: column; gap: calc(.75 * var(--unit)); }
@container signup (min-width: 30rem) { .signup-row { flex-direction: row; } }
.signup input { flex: 1; min-width: 0; min-height: var(--target); padding: calc(.5 * var(--unit)) calc(1.1 * var(--unit)); border-radius: 999px;
  border: 1px solid var(--line-2); background: rgb(255 255 255 / .04); }
.signup input::placeholder { color: var(--ink-3); }
.signup input[aria-invalid="true"] { border-color: #ff8a8a; }
.signup .btn[aria-disabled="true"] { cursor: progress; }
.signup-trap { display: none; }                               /* the honeypot: never shown, focused or autofilled */
.signup-about { display: grid; justify-items: start; margin-top: calc(.875 * var(--unit)); font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-2); }
.signup-state, .signup-status { margin-top: calc(.875 * var(--unit)); font: 400 var(--meta)/1.5 var(--mono); color: var(--ink-3); }
.signup-about + .signup-state { margin-top: calc(.25 * var(--unit)); }
.signup-status:empty { display: none; }
.end-download { margin-top: var(--block); }
@media (max-width: 48em) { .endcard { min-height: 0; padding-block: var(--section); } }
.footer { padding-block: var(--block); border-top: 1px solid var(--line); }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1 * var(--unit)) calc(2 * var(--unit)); color: var(--ink-3); font-size: var(--meta); }
.foot p { flex: 1 1 calc(18 * var(--unit)); max-width: 72ch; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 calc(1 * var(--unit)); margin-left: auto; }
.foot a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); text-decoration: none; }
.foot a:hover { color: var(--ink); }