/* ==========================================================================
   Olsaar v-next — the three NEW chapters (scaffolds, phase A).
     02 The dashboard  (#dashboard, .tour,   paper)  one product window + four callouts
     04 Clips          (#clips,     .reel,   flood)  one long video in → short clips out
     07 AI agents      (#agents,    .agents, paper)  a plain-English request → real phones
   Plus .ch-head, the shared chapter opener (same grid as the platform opener).
   Clip frames come from css/clips.css. Copy: ~/landing-media/docs/COPY.md.
   int1 (2026-10-23): 04's output phones are feed phones (css/feed.css) with real reels.
   agents-1 (2026-10-27): 07's figure plays one real recipe step by step: typed request →
   key check → three Warmup phones open Instagram, scroll and like → plain-English reply.
   ========================================================================== */

/* ---------- Shared opener ---------- */

.ch-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: clamp(1.25rem, 2.4vw, 2rem);
  align-items: end;
}
.ch-head .t-eyebrow { grid-column: 1 / -1; justify-self: start; }
.ch-title { grid-column: 1 / span 8; }
.ch-lead { grid-column: 9 / -1; padding-bottom: 0.45em; }
@media (max-width: 1000px) {
  .ch-title, .ch-lead { grid-column: 1 / -1; }
  .ch-lead { max-width: 40rem; padding-bottom: 0; }
}

/* 03 follows 02 on the same paper field: start it closer, like 05 does. */
.tour + .flow { padding-top: clamp(1.75rem, 3.6vw, 3.5rem); }
/* 05 now follows the blue Clips field, so it needs its full top again. */
.platform.crest { padding-top: var(--section-y); }

/* Visible marker for placeholder footage; delete with the placeholder. */
.ph-note { font-weight: 500; opacity: 0.8; }

/* ---------- 02 The dashboard ---------- */

.tour-body {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 2rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.tour-body > .clip { grid-column: 1 / span 8; }
.tour-steps { grid-column: 9 / -1; display: grid; gap: clamp(1.25rem, 2.2vw, 2rem); counter-reset: tour; }
.tour-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: 0.875rem;
  row-gap: 0.25rem;
  transition: opacity 0.5s var(--ease-out);
}
.tour-n {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.tour-steps .t-small { color: var(--fg-2); }
/* While the clip plays, the panel it's on lights up; the rest step back. */
.tour-steps.is-live li { opacity: 0.45; }
.tour-steps.is-live li.is-on { opacity: 1; }
.tour-steps li.is-on .tour-n { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
.tour-more { margin-top: clamp(2rem, 3.6vw, 3rem); max-width: 46rem; }
@media (max-width: 1000px) {
  .tour-body > .clip, .tour-steps { grid-column: 1 / -1; }
  .tour-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
}
@media (max-width: 560px) {
  .tour-steps { grid-template-columns: 1fr; }
}

/* ---------- 04 Clips ---------- */

.reel-fig { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.reel-flow {
  display: grid;
  grid-template-columns: minmax(0, 7fr) clamp(3rem, 6vw, 6rem) minmax(0, 5fr);
  align-items: center;
}
.reel-k { display: block; margin-bottom: 0.875rem; color: var(--fg-2); }
.reel-k .t-mono { margin-left: 0.375rem; font-weight: 400; }
/* The content path: one solid line with a head, white on flood. */
.reel-arrow { width: 100%; height: 1.5rem; overflow: visible; color: var(--accent); }
.reel-arrow path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.reel-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); }
.reel-phones .clip--phone { max-width: none; }
.reel-phones .clip--phone:nth-child(2) { transform: translateY(-1.5rem); }
.reel-fig > .clip-cap { margin-top: clamp(1.5rem, 2.6vw, 2.25rem); }
.reel-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.reel-points li { display: grid; gap: 0.5rem; align-content: start; }
.reel-points .t-title { display: flex; align-items: center; gap: 0.625rem; }
.reel-points .t-small { color: var(--fg-2); }
@media (max-width: 1000px) {
  .reel-points { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 760px) {
  .reel-flow { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .reel-arrow { width: 3rem; height: 1.5rem; margin-block: 0.75rem; justify-self: center; transform: rotate(90deg); }
  .reel-out { max-width: 22rem; justify-self: center; width: 100%; }
  .reel-phones .clip--phone:nth-child(2) { transform: none; }
}
@media (max-width: 560px) {
  .reel-points { grid-template-columns: 1fr; }
}

/* ---------- 07 AI agents ---------- */

.agents .ch-lead { display: grid; gap: 1rem; }
.agents .ag-say { font-size: clamp(1.375rem, 2vw, 1.875rem); font-weight: 560; line-height: 1.25; letter-spacing: -0.015em; color: var(--fg); }

/* The figure is the 3-node path, read left to right: your computer (the request, the steps
   it takes, its reply) → Olsaar checks the key → your phones. The phones stand in
   a deep-blue well (data-theme="deep" data-island: the phones chapter's colour, without
   recolouring the nav), so the two ends read as two different places.
   Final state is the default; js/chapters.js adds .is-armed to play it from empty. */
.ag-fig { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: clamp(0.75rem, 1.4vw, 1.125rem); }
.ag-fig > .clip-cap { margin: clamp(0.75rem, 1.4vw, 1rem) clamp(0.5rem, 1vw, 0.875rem) clamp(0.25rem, 0.6vw, 0.5rem); }
.ag-flow {
  display: grid;
  grid-template-columns: minmax(0, 6.6fr) minmax(10.5rem, 2.1fr) minmax(0, 5.9fr);
  align-items: center;
}
.ag-k { display: grid; gap: 0.125rem; }
.ag-k-name { font-size: 0.9375rem; font-weight: 620; line-height: 1.3; color: var(--fg); }
.ag-sub { font-size: 0.875rem; line-height: 1.35; color: var(--fg-3); }

/* ---- Your computer: a Claude Code session (agents-4) ----
   A terminal window on the card, in the site's abyss navy. Mono is Geist Mono; one accent,
   Claude's orange, on the spark only. The bullet and the ⎿ elbow are drawn in CSS (the
   font has no such glyphs). The input box sits at the bottom: while the request is typed
   its frame grows upward over the still-empty transcript, so the window never changes size. */
.ag-you { display: grid; align-content: center; gap: 0.875rem; padding: clamp(0.75rem, 1.6vw, 1.25rem) clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.25rem) clamp(0.25rem, 0.6vw, 0.5rem); }
.ag-term {
  --t-bg: #0e1014;
  --t-bar: #15181e;
  --t-fg: #e5e7eb;
  --t-mut: #a1a7b3;
  --t-dim: #747b88;
  --t-ok: #5fd38d;
  --t-spark: #d97757;
  --t-line: rgba(229, 231, 235, 0.1);
  min-width: 0;
  border-radius: var(--r-3);
  background: var(--t-bg);
  box-shadow: 0 0 0 1px rgba(11, 13, 16, 0.1), var(--shadow);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--t-fg);
  overflow: hidden;
}
.ag-term-bar { display: flex; align-items: center; gap: 0.875rem; padding: 0.625rem 0.875rem; background: var(--t-bar); box-shadow: inset 0 -1px 0 var(--t-line); color: var(--t-fg); }
.ag-term-dots { display: flex; gap: 0.375rem; }
.ag-term-dots i { width: 0.5625rem; height: 0.5625rem; border-radius: 50%; background: rgba(229, 231, 235, 0.16); }
.ag-term-title { display: inline-flex; align-items: center; gap: 0.4375rem; white-space: nowrap; }
.ag-term-title span { color: var(--t-dim); }
.ag-spark { flex: none; width: 0.875rem; height: 0.875rem; fill: none; stroke: var(--t-spark); stroke-width: 2.6; stroke-linecap: round; }
.ag-term-chip { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; padding: 0.125rem 0.5625rem; border-radius: var(--r-pill); background: rgba(95, 211, 141, 0.1); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 560; color: #a6e6c0; white-space: nowrap; }
.ag-term-chip i { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--t-ok); }
.ag-term-body { position: relative; padding: 0.875rem 0.875rem 0.875rem; }
.ag-log { display: grid; gap: 0.5rem; }
.ag-l { position: relative; padding-left: 1.25rem; overflow-wrap: anywhere; }
.ag-l i { font-style: normal; }
.ag-dot { position: absolute; left: 0.3125rem; top: 0.55em; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--t-fg); }
.ag-l--tool .ag-dot { background: var(--t-ok); }
.ag-gt { position: absolute; left: 0.375rem; top: 0; color: var(--t-dim); }
.ag-l--you { padding-block: 0.25rem; border-radius: 0.3125rem; background: rgba(229, 231, 235, 0.06); }
.ag-l--you .ag-gt { top: 0.25rem; }
.ag-call { display: block; color: var(--t-mut); }
.ag-call b { font-weight: 650; color: var(--t-fg); }
.ag-call em { font-style: normal; color: var(--t-dim); }
.ag-out { position: relative; display: block; padding-left: 1.375rem; color: var(--t-mut); }
.ag-out::before { content: ""; position: absolute; left: 0.375rem; top: 0.1em; width: 0.5rem; height: 0.75em; border-left: 1px solid var(--t-dim); border-bottom: 1px solid var(--t-dim); }
.ag-term-wait { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; color: var(--t-mut); visibility: hidden; }
.ag-term-wait span { color: var(--t-dim); }
.ag-term-input { position: relative; height: calc(1.6em + 1rem + 2px); margin-top: 0.375rem; }
.ag-term-box { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.75rem 0.5rem 1.625rem; border-radius: 0.5rem; background: var(--t-bg); box-shadow: inset 0 0 0 1px rgba(229, 231, 235, 0.22); overflow-wrap: anywhere; }
.ag-term-box .ag-gt { left: 0.6875rem; top: 0.5rem; }
.ag-cur { display: inline-block; width: 0.5em; height: 1.2em; margin-left: 1px; vertical-align: -0.25em; background: rgba(229, 231, 235, 0.85); font-style: normal; }
.ag-term-note { padding-left: 0.25rem; font-size: 0.875rem; color: var(--fg-3); }

/* ---- The middle: the Olsaar mark, relaying commands ----
   The mark is the nav's own assets/favicon.png (256 px, crisp up to 128 px wide). Its label
   says what it is doing (idle, finding, sending); the end state ("Sent to 3 phones") is the default. With JS, .ag-lines
   (an SVG over the whole flow, js/chapters.js) draws computer → mark → a branch to each
   phone and carries the pulses; the dotted .ag-wire spans are the no-JS lines. */
.ag-flow { position: relative; }
.ag-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.ag-hub { position: relative; z-index: 3; }
.ag-hub-mark { position: relative; display: block; width: 4.75rem; height: 4.75rem; }
.ag-hub-mark img { display: block; width: 100%; height: 100%; }
/* While it relays: one flat ring, repeating. No glow. */
.ag-hub-mark::after { content: ""; position: absolute; inset: -0.625rem; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--flood); opacity: 0; pointer-events: none; }
.ag-hub-say {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.875rem);
  display: grid;
  width: 10.5rem;
  transform: translateX(-50%);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--fg);
}
.ag-hub-say > span { grid-area: 1 / 1; align-self: center; opacity: 0; transition: opacity 0.3s ease; }
.ag-hub-say > [data-say="done"] { opacity: 1; }
.ag-hub-say .i { display: inline-block; width: 0.875rem; height: 0.875rem; margin-right: 0.3125rem; vertical-align: -0.125em; color: var(--ok); stroke-width: 2.75; }
.ag-fig[data-hub="idle"] .ag-hub-say > [data-say="done"],
.ag-fig[data-hub="find"] .ag-hub-say > [data-say="done"],
.ag-fig[data-hub="live"] .ag-hub-say > [data-say="done"] { opacity: 0; }
.ag-fig[data-hub="idle"] .ag-hub-say > [data-say="idle"],
.ag-fig[data-hub="find"] .ag-hub-say > [data-say="find"],
.ag-fig[data-hub="live"] .ag-hub-say > [data-say="live"] { opacity: 1; }
.ag-fig[data-hub="idle"] .ag-hub-say > [data-say="idle"] { font-weight: 500; color: var(--fg-3); }
.ag-fig[data-hub="find"] .ag-hub-say > [data-say="find"],
.ag-fig[data-hub="live"] .ag-hub-say > [data-say="live"] { color: var(--link); }
.ag-fig.is-relay .ag-hub-mark::after { animation: ag-relay 1.3s var(--ease-out) infinite; }
@keyframes ag-relay { 0% { opacity: 0.6; transform: scale(0.82); } 100% { opacity: 0; transform: scale(1.3); } }
.ag-fig.is-hub .ag-hub-mark img { animation: ag-hub-in 0.6s var(--ease-out); }
@keyframes ag-hub-in { 40% { transform: scale(1.08); } }

/* The lines (SVG, js/chapters.js): dotted, the line grammar's "control". Navy on the card,
   foam inside the phones' well. A pulse is a short flood-blue stroke running along a route,
   on a thin white underlay that keeps it crisp on the deep blue. */
.ag-lines { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ag-line { fill: none; stroke: var(--fg); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 7; }
.ag-line--in { stroke: rgba(229, 231, 235, 0.78); }
.ag-comet { opacity: 0; }
.ag-comet path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ag-comet .u { stroke: var(--white); stroke-width: 6.5; }
.ag-comet .o { stroke: var(--flood); stroke-width: 3.25; }
.ag-fig.has-lines .ag-wire { visibility: hidden; }
/* The no-JS lines: dotted, the one into the phones ends in an arrowhead. */
.ag-wire {
  position: relative;
  display: block;
  height: 0.1875rem;
  margin-inline: 0.5rem;
  background: radial-gradient(circle, var(--fg) 0.09rem, transparent 0.1rem) left center / 0.5rem 0.1875rem repeat-x;
}
.ag-wire--to { margin-right: 0.75rem; }
.ag-wire--to::after {
  content: "";
  position: absolute;
  right: 0.0625rem;
  top: 50%;
  width: 0.5625rem;
  height: 0.5625rem;
  border-top: 2px solid var(--fg);
  border-right: 2px solid var(--fg);
  transform: translateY(-50%) rotate(45deg);
}

/* ---- Your phones ---- */
.ag-them {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 3rem;   /* room for the branch line that runs above the phones, and its drops */
  padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1rem, 2.4vw, 2.25rem);
  border-radius: var(--r-3);
  background: var(--bg) radial-gradient(circle, var(--line) 1px, transparent 1.4px) 0.6875rem 0.6875rem / 1.375rem 1.375rem;
}
.ag-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.ag-phones .clip--phone { max-width: none; }
.ag-phone { display: grid; gap: 0.75rem; justify-items: center; min-width: 0; }
.ag-phone .phone-frame { outline: 0.1875rem solid transparent; outline-offset: 0.5rem; transition: outline-color 0.35s ease, outline-offset 0.45s var(--ease-out); }
.ag-still,
.ag-track,
.ag-slot,
.ag-slot video { position: absolute; inset: 0; width: 100%; height: 100%; }
.ag-still,
.ag-slot video { display: block; object-fit: cover; background: #05070b; }
.ag-track { transition: opacity 0.5s var(--ease-out); }
.ag-slot { top: calc(var(--k) * 100%); transition: filter 0.6s ease; }
.ag-slot.is-past { filter: brightness(0.7); }
/* Motion-only marks on the screen: the app opening, a swipe, a tap. Built by js/chapters.js. */
.ag-launch { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--white); opacity: 0; pointer-events: none; }
.ag-launch .g { width: 30cqi; height: 30cqi; }
.ag-touch,
.ag-swipe { position: absolute; z-index: 1; left: 50%; top: 50%; border-radius: 50%; opacity: 0; pointer-events: none; }
.ag-touch { width: 24cqi; height: 24cqi; margin: -12cqi 0 0 -12cqi; box-shadow: inset 0 0 0 1.2cqi rgba(255, 255, 255, 0.95), 0 0 0 0.6cqi rgba(11, 13, 16, 0.18); }
.ag-swipe { width: 11cqi; height: 11cqi; margin: -5.5cqi 0 0 -5.5cqi; background: rgba(255, 255, 255, 0.92); box-shadow: 0 0.8cqi 3cqi rgba(11, 13, 16, 0.35); }
.ag-tag { display: inline-flex; align-items: center; gap: 0.4375rem; font-size: 0.75rem; color: var(--fg-2); white-space: nowrap; }
.ag-tag .dot { width: 0.4375rem; height: 0.4375rem; background: var(--ok); transition: background-color 0.3s ease; }
.ag-likes { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.25rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); }
.ag-likes svg { flex: none; width: 0.8125rem; height: 0.8125rem; fill: currentColor; }
.ag-likes.is-bump svg { animation: ag-bump 0.45s var(--ease-out); }
@keyframes ag-bump { 40% { transform: scale(1.45); } }

/* ---- Caption controls ---- */
.ag-ctl { display: inline-flex; flex: none; align-items: center; gap: 0.5rem; }
.ag-again {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  height: 2.375rem;
  padding: 0 0.9375rem 0 0.75rem;
  border-radius: var(--r-pill);
  font-size: 0.8438rem;
  font-weight: 600;
  color: var(--fg);
  box-shadow: inset 0 0 0 1.5px var(--line-2);
  transition: box-shadow var(--dur-1) ease, transform var(--dur-1) ease;
}
.ag-again:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.ag-again:active { transform: scale(0.96); }
.ag-again:focus-visible { border-radius: var(--r-pill); }
.ag-again .i { width: 1rem; height: 1rem; stroke-width: 2; }
.ag-again[hidden] { display: none; }

/* ---- Stacked (tablet and phone): request → key → phones → steps → reply ---- */
@media (min-width: 1001px) and (max-width: 1279.98px) {
  .ag-flow { grid-template-columns: minmax(0, 6.4fr) minmax(9.5rem, 1.9fr) minmax(0, 6fr); }
  .ag-them { align-self: center; padding-inline: 1rem; }
  .ag-phones { gap: 0.75rem; }
}
@media (max-width: 1000px) {
  .ag-flow { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-inline: auto; }
  .ag-you { display: contents; }
  .ag-term { order: 1; }
  .ag-mid { order: 3; grid-template-columns: none; grid-template-rows: 1.75rem auto 2.25rem; justify-items: center; padding-block: 0.5rem; }
  .ag-them { order: 4; }
  /* Under the phones when stacked: the line runs down the middle under the terminal. */
  .ag-term-note { order: 5; padding: 0.875rem 0.25rem 0.25rem; }
  .ag-wire { width: 0.1875rem; height: 100%; margin: 0; background: radial-gradient(circle, var(--fg) 0.09rem, transparent 0.1rem) center top / 0.1875rem 0.5rem repeat-y; }
  .ag-wire:first-child { margin-bottom: 0.5rem; }
  .ag-wire--to { margin-top: 0.5rem; }
  .ag-wire--to::after { right: auto; left: 50%; top: auto; bottom: 0.0625rem; transform: translateX(-50%) rotate(135deg); }
  .ag-hub-mark { width: 4rem; height: 4rem; }
  .ag-hub-say { left: calc(100% + 1rem); top: 50%; width: 9.5rem; transform: translateY(-50%); text-align: left; }
}
@media (max-width: 560px) {
  .ag-term { font-size: 0.6875rem; }
  .ag-term-bar { gap: 0.625rem; padding: 0.5625rem 0.75rem; }
  .ag-term-dots { display: none; }
  .ag-term-chip { font-size: 0.6875rem; }
  .ag-term-body { padding: 0.75rem 0.625rem; }
  .ag-l { padding-left: 1.125rem; }
  .ag-them { padding: 1.125rem 0.875rem 1rem; }
  .ag-phones { gap: 0.625rem; }
  /* The line drops into the well at its centre: keep the label clear of it. */
  .ag-them .ag-k-name { font-size: 0.8125rem; }
  .ag-hub-say { width: 7rem; font-size: 0.8125rem; }
  /* Name on one line, the like count under it: three tags side by side don't fit on one line here. */
  .ag-tag { flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.3125rem; font-size: 0.6875rem; }
  .ag-likes { flex-basis: 100%; justify-content: center; margin-left: 0; font-size: 0.6875rem; }
  .ag-phone .phone-frame { outline-width: 0.125rem; }
  .ag-fig.is-armed .ag-phone.is-picked:not(.is-done) .phone-frame { outline-offset: 0.125rem; }
  .ag-fig > .clip-cap { flex-wrap: wrap; }
}

/* ---- The run (js/chapters.js) ----
   .is-armed = the empty "before" state; the script then adds .is-sent, .is-hub, .is-relay and
   .is-working on the figure (data-hub idle → find → live → done), .is-on / .is-run / .is-res /
   .is-ok on each transcript line, and .is-picked / .is-open / .is-done on each phone. Only ever
   set when motion is allowed, so no JS / reduced motion shows the final state above. */
/* Paused by the viewer: the spinner and caret hold too. */
.ag-fig.is-paused * { animation-play-state: paused !important; }
/* "Play again" rewinds to the empty state in one frame. */
.ag-fig.is-resetting,
.ag-fig.is-resetting * { transition: none !important; animation: none !important; }
/* The transcript: lines appear as the session reaches them; a tool's bullet blinks grey while it
   runs and turns green with its result. The spinner line shows while Claude works. */
.ag-fig.is-armed .ag-l { transition: opacity 0.22s ease; }
.ag-fig.is-armed .ag-l:not(.is-on) { opacity: 0; visibility: hidden; }
.ag-fig.is-armed .ag-l--tool:not(.is-res) .ag-out { visibility: hidden; }
.ag-fig.is-armed .ag-l--tool:not(.is-ok) .ag-dot { background: var(--t-dim); }
.ag-fig.is-armed .ag-l--tool.is-run:not(.is-ok) .ag-dot { animation: ag-blink 0.9s steps(1) infinite; }
.ag-fig.is-working .ag-term-wait { visibility: visible; }
.ag-fig.is-working .ag-term-wait .ag-spark { animation: ag-spin 1.8s linear infinite; }
.ag-fig.is-armed .ag-cur { animation: ag-blink 1.05s steps(1) infinite; }
.ag-fig.is-armed.is-typing .ag-cur { animation: none; }
@keyframes ag-blink { 55% { opacity: 0; } }
@keyframes ag-spin { to { transform: rotate(1turn); } }

/* The lines wait faintly until the request is sent. */
.ag-fig.is-armed .ag-line { transition: opacity 0.5s ease; }
.ag-fig.is-armed:not(.is-sent) .ag-line { opacity: 0.3; }

.ag-fig.is-armed .ag-still { opacity: 0; }
/* Before Instagram opens, a screen at rest: deep ink with a soft sheen, not a flat black slab. */
.ag-fig.is-armed .phone-screen { background: linear-gradient(165deg, #1a1d23 0%, #0e1013 55%, #0a0c0f 100%); }
.ag-fig.is-armed .ag-track { opacity: 0; }
.ag-fig.is-armed .ag-phone.is-open .ag-track { opacity: 1; }
.ag-fig.is-armed .ag-phone.is-picked:not(.is-done) .phone-frame { outline-color: var(--flood); outline-offset: 0.25rem; }
.ag-fig.is-armed .ag-tag .dot { background: var(--line-2); }
.ag-fig.is-armed .ag-phone.is-picked .ag-tag .dot { background: var(--flood); }
.ag-fig.is-armed .ag-phone.is-done .ag-tag .dot { background: var(--ok); }
.ag-fig.is-armed .ag-likes { opacity: 0; transition: opacity 0.3s ease; }
.ag-fig.is-armed .ag-phone.is-open .ag-likes { opacity: 1; }

/* ---- No OCR: the element tree (agents-2) ----
   The section's second headline beat, open on the paper (no card): a display statement in
   capitals, then a phone with four outlined, numbered elements, and the same four as lines
   of the screen's element tree. 1 is the hot one: flood outline, a line to its row, and the
   tap by name under it. Final state is the default; js/chapters.js adds .is-armed, then .is-in. */
.ag-tree { margin-top: clamp(4.5rem, 9vw, 8.5rem); }
.ag-tree-head { display: grid; gap: clamp(1.25rem, 2.2vw, 1.75rem); }
.ag-tree-title {
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(2.125rem, 5.4vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fg);
}
.ag-tree-title span { display: block; }
.ag-tree-lead { max-width: 44rem; color: var(--fg-2); }

.ag-tree-fig { margin-top: clamp(2.5rem, 5vw, 4.25rem); }
/* agents-5: two calm cards, the same screen after an app update moved the buttons: reading
   pixels (the tap lands where Like was) and reading the element tree (found by name). */
.ag-vs { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: clamp(1rem, 1.8vw, 1.5rem); align-items: stretch; }
.ag-vs-card { display: grid; align-content: start; gap: 1.25rem; min-width: 0; padding: clamp(1.125rem, 2vw, 1.75rem); border-radius: var(--r-4); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ag-vs-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; }
.ag-vs-k { font-size: 0.9375rem; font-weight: 640; color: var(--fg); }
.ag-vs-phone .clip--phone { max-width: 12.5rem; margin-inline: auto; }
.ag-vs-note { font-size: 0.875rem; line-height: 1.45; color: var(--fg-3); text-align: center; text-wrap: balance; }
/* Where Like was (dashed) and the tap that went there (red ring with a cross). */
.ag-ghost { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 1.6cqi; border: 0.6cqi dashed rgba(255, 255, 255, 0.85); }
.ag-miss { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: 13cqi; height: 13cqi; margin: -6.5cqi 0 0 -6.5cqi; border-radius: 50%; box-shadow: inset 0 0 0 1cqi #ff8076, 0 0 0 0.6cqi rgba(11, 13, 16, 0.25); }
.ag-miss::before,
.ag-miss::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6cqi; height: 1cqi; margin: -0.5cqi 0 0 -3cqi; border-radius: 1cqi; background: #ff8076; transform: rotate(45deg); }
.ag-miss::after { transform: rotate(-45deg); }
/* Quiet status chips (also on the terminal-style panels below). */
.ag-chip { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.1875rem 0.625rem 0.1875rem 0.5rem; border-radius: var(--r-pill); font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.ag-chip i { flex: none; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; }
.ag-chip--ok { background: rgba(15, 122, 87, 0.1); color: #0b5e43; }
.ag-chip--ok i { background: var(--ok); }
.ag-chip--bad { background: rgba(197, 53, 43, 0.09); color: #9b2a22; }
.ag-chip--bad i { background: var(--err); }
.ag-tree-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(2.5rem, 1fr) minmax(0, 36rem);
  align-items: center;
}
.ag-tree-phone { grid-column: 1; }
.ag-tree-side { grid-column: 3; min-width: 0; }
.ag-tree-phone .clip--phone { max-width: 12.5rem; }
.ag-tree-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-tree-scrim { position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
/* Generic marks on the screen (no app's own UI): three icons and a caption line. */
.ag-ui,
.ag-el { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
svg.ag-ui { padding: 1.4cqi; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0.2cqi 0.8cqi rgba(0, 0, 0, 0.35)); }
.ag-ui--text { display: flex; align-items: center; padding-left: 1.6cqi; font-size: 4.4cqi; font-weight: 620; color: #fff; white-space: nowrap; text-shadow: 0 0.2cqi 1.2cqi rgba(0, 0, 0, 0.35); }
/* The outlines: white on the video, the hot one in flood. Numbers sit on the top-left corner. */
.ag-el { border-radius: 1.6cqi; box-shadow: 0 0 0 0.5cqi rgba(255, 255, 255, 0.95), 0 0 0 1.1cqi rgba(11, 13, 16, 0.22); }
.ag-el.is-hot { background: rgba(255, 61, 113, 0.22); box-shadow: 0 0 0 0.75cqi var(--flood), 0 0 0 1.4cqi rgba(11, 13, 16, 0.22); }
.ag-el b,
.ag-xml b {
  display: grid;
  place-items: center;
  width: 1.1875rem;
  height: 1.1875rem;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  font-style: normal;
  line-height: 1;
}
/* On the phone the numbers sit just left of each outline (the caption's on its corner). */
.ag-el b { position: absolute; right: calc(100% + 0.375rem); top: 50%; width: 1rem; height: 1rem; margin-top: -0.5rem; font-size: 0.625rem; background: var(--white); color: var(--navy); box-shadow: 0 0.125rem 0.375rem rgba(11, 13, 16, 0.3); }
.ag-el--cap b { right: auto; left: -0.375rem; top: -0.5rem; margin-top: 0; }
.ag-el.is-hot b { background: var(--flood); color: var(--abyss); }
.ag-tree-tap { position: absolute; left: var(--x); top: var(--y); width: 12cqi; height: 12cqi; margin: -6cqi 0 0 -6cqi; border-radius: 50%; box-shadow: inset 0 0 0 1cqi #fff; opacity: 0; pointer-events: none; }

/* The tree: a light well inside its card, mono for the data only. */
.ag-tree-code {
  min-width: 0;
  padding: 1rem 1.25rem 1.25rem;
  border-radius: var(--r-3);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.ag-tree-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.375rem 1rem; padding-bottom: 0.75rem; margin-bottom: 0.625rem; box-shadow: inset 0 -1px 0 var(--line); }
.ag-tree-file-k { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.ag-tree-file .t-label { color: var(--fg); }
.ag-tree-file .t-mono { color: var(--fg-3); }
.ag-xml { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; color: var(--fg-2); }
.ag-xml li {
  position: relative;
  padding: 0.3125rem 0.5rem 0.3125rem calc(2.25rem + var(--lv) * 1.5rem);
  border-radius: var(--r-1);
  white-space: nowrap;
}
.ag-xml i { font-style: normal; }
.ag-xml .p { color: var(--fg-3); }
.ag-xml .t { color: var(--fg); font-weight: 560; }
.ag-xml .a { color: var(--fg-3); }
.ag-xml .v,
.ag-tree-call .v { color: var(--link); font-style: normal; }
.ag-xml b { position: absolute; left: 0.5rem; top: 50%; margin-top: -0.59375rem; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ag-xml li.is-hot { background: rgba(255, 61, 113, 0.1); box-shadow: inset 0.1875rem 0 0 var(--flood); }
.ag-xml li.is-hot b { background: var(--flood); color: var(--abyss); box-shadow: none; }
/* From the hot outline to its row; drawn by js/chapters.js (positions), so no JS = no line. */
.ag-tree-link { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ag-tree-link path { fill: none; stroke: var(--flood); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.ag-tree-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.875rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--fg-2);
}
.ag-tree-k { font-weight: 620; color: var(--fg); }
.ag-tree-call q { padding: 0.4375rem 0.875rem; border-radius: var(--r-2) var(--r-2) var(--r-1) var(--r-2); background: var(--flood); color: var(--abyss); font-weight: 560; quotes: "\201C" "\201D"; }
.ag-tree-or { color: var(--fg-3); }
.ag-tree-call code { padding: 0.375rem 0.75rem; border-radius: var(--r-1); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-family: var(--font-mono); font-size: 0.8125rem; color: var(--fg); overflow-wrap: anywhere; }
.ag-tree-fig > .clip-cap { margin-top: clamp(1rem, 1.8vw, 1.375rem); }

@media (max-width: 1100px) {
  /* One card above the other; the pixels card lays out sideways. */
  .ag-vs { grid-template-columns: minmax(0, 1fr); }
  .ag-vs-card--px { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); grid-template-areas: "phone head" "phone note"; align-content: center; column-gap: clamp(1.25rem, 3vw, 2.5rem); }
  .ag-vs-card--px .ag-vs-head { grid-area: head; align-self: end; justify-content: flex-start; }
  .ag-vs-card--px .ag-vs-phone { grid-area: phone; }
  .ag-vs-card--px .ag-vs-note { grid-area: note; align-self: start; text-align: left; }
  .ag-tree-stage { grid-template-columns: minmax(0, 12.5rem) minmax(2.5rem, 1fr) minmax(0, 34rem); }
  .ag-xml { font-size: 0.75rem; }
  .ag-xml li { padding-left: calc(2rem + var(--lv) * 1.125rem); }
  .ag-xml b { left: 0.375rem; }
}
/* Stacked: phone, then the tree; numbers do the linking, so the drawn line goes. Long lines
   wrap with their continuation indented. */
@media (max-width: 760px) {
  /* "No OCR." keeps its own line; the rest balances over the lines below it. */
  .ag-tree-title { text-wrap: balance; }
  .ag-tree-title span + span { display: inline; }
  .ag-tree-stage { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; }
  .ag-tree-phone,
  .ag-tree-side { grid-column: 1; }
  .ag-tree-phone .clip--phone { max-width: 12rem; margin-inline: auto; }
  .ag-vs-card--px { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); }
  .ag-tree-link { display: none; }
  .ag-tree-code { padding: 0.875rem 0.75rem 1rem; }
  .ag-xml { font-size: 0.6875rem; }
  .ag-xml li { padding-left: calc(1.875rem + var(--lv) * 0.75rem + 1.5ch); text-indent: -1.5ch; white-space: normal; overflow-wrap: anywhere; }
  .ag-xml b { left: 0.25rem; text-indent: 0; }
  .ag-tree-call code { font-size: 0.75rem; }
}

/* The draw-in: lines appear top to bottom, each element's outline with its line; then the hot
   row lights, the line runs to it, the call appears and the phone takes the tap. The hidden
   state applies at once (.is-armed); the transitions belong to .is-in, so only the reveal moves. */
.ag-tree.is-armed:not(.is-in) .ag-xml li,
.ag-tree.is-armed:not(.is-in) .ag-el,
.ag-tree.is-armed:not(.is-in) .ag-tree-file,
.ag-tree.is-armed:not(.is-in) .ag-tree-call { opacity: 0; }
.ag-tree.is-armed:not(.is-in) .ag-xml li { transform: translateX(-0.5rem); }
.ag-tree.is-armed:not(.is-in) .ag-el { transform: scale(1.18); }
.ag-tree.is-armed:not(.is-in) .ag-tree-call { transform: translateY(0.5rem); }
/* The pixels card: the tap lands on the empty spot a beat after the card is in view. */
.ag-tree.is-armed:not(.is-in) .ag-miss,
.ag-tree.is-armed:not(.is-in) .ag-ghost { opacity: 0; }
.ag-tree.is-in .ag-ghost { transition: opacity 0.4s ease 0.3s; }
.ag-tree.is-armed.is-in .ag-miss { animation: ag-miss-in 0.7s var(--ease-out) 0.7s both; }
@keyframes ag-miss-in { 0% { opacity: 0; transform: scale(1.7); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.ag-tree.is-armed:not(.is-in) .ag-xml li.is-hot { background-color: transparent; box-shadow: inset 0 0 0 var(--flood); }
.ag-tree.is-armed:not(.is-in) .ag-el.is-hot { background-color: transparent; }
.ag-tree.is-armed .ag-tree-link path { stroke-dasharray: var(--len, 0) var(--len, 0); }
.ag-tree.is-armed:not(.is-in) .ag-tree-link path { stroke-dashoffset: var(--len, 0); }
.ag-tree.is-in .ag-tree-file { transition: opacity 0.4s ease; }
.ag-tree.is-in .ag-xml li,
.ag-tree.is-in .ag-el { transition: opacity 0.45s var(--ease-out) calc(0.15s + var(--d) * 0.14s), transform 0.55s var(--ease-out) calc(0.15s + var(--d) * 0.14s); }
/* The hot row and outline light up once every line is in. */
.ag-tree.is-in .ag-xml li.is-hot { transition: opacity 0.45s var(--ease-out) 0.43s, transform 0.55s var(--ease-out) 0.43s, background-color 0.4s ease 1.3s, box-shadow 0.4s ease 1.3s; }
.ag-tree.is-in .ag-el.is-hot { transition: opacity 0.45s var(--ease-out) 0.43s, transform 0.55s var(--ease-out) 0.43s, background-color 0.4s ease 1.3s; }
.ag-tree.is-in .ag-tree-link path { transition: stroke-dashoffset 0.7s var(--ease-in-out) 1.55s; }
.ag-tree.is-in .ag-tree-call { transition: opacity 0.5s var(--ease-out) 2.15s, transform 0.6s var(--ease-out) 2.15s; }
.ag-tree.is-armed.is-in .ag-tree-tap { animation: ag-tree-tap 0.9s var(--ease-out) 2.6s 2 both; }
@keyframes ag-tree-tap { 0% { opacity: 0.95; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---- Set it up: one panel, four tools (agents-5) ----
   Tabs for Claude Code, Codex, Claude Desktop and the Go SDK (js/chapters.js agentPick: a
   real tablist, arrow keys, Home/End). Commands sit in the same abyss blocks as the Claude
   Code window, each with a Copy button. No JS: no tab row, the four follow one another. */
.ag-pick { margin-top: clamp(4rem, 8vw, 7rem); padding: clamp(1.25rem, 2.8vw, 2.5rem); border-radius: var(--r-4); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ag-pick-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1.5rem; }
.ag-pick-sub { margin-top: 0.5rem; max-width: 40rem; }
.ag-pick-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; width: fit-content; max-width: 100%; margin-top: clamp(1.25rem, 2.4vw, 1.75rem); padding: 0.3125rem; border-radius: var(--r-3); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.ag-pick-tabs[hidden] { display: none; }
.ag-pick-tab { padding: 0.5rem 1rem; border-radius: calc(var(--r-3) - 0.3125rem); font-size: 0.9375rem; font-weight: 600; color: var(--fg-2); transition: background-color var(--dur-1) ease, color var(--dur-1) ease; }
.ag-pick-tab:hover { color: var(--fg); }
.ag-pick-tab[aria-selected="true"] { background: var(--navy); color: var(--paper); }
.ag-pick-tab:focus-visible { border-radius: calc(var(--r-3) - 0.3125rem); }
.ag-pick-panel { margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.ag-pick-panel[hidden] { display: none; }
.ag-pick-h { margin-bottom: 1rem; font-size: 1.0625rem; font-weight: 640; color: var(--fg); }
.ag-pick.is-tabbed .ag-pick-h { display: none; }
.ag-pick:not(.is-tabbed) .ag-pick-panel + .ag-pick-panel { padding-top: clamp(1.5rem, 2.6vw, 2rem); box-shadow: inset 0 1px 0 var(--line); }
.ag-pick-steps { display: grid; gap: 1.125rem; }
.ag-pick-steps > li { display: grid; grid-template-columns: 1.75rem minmax(0, 15rem) minmax(0, 1fr); column-gap: 1rem; row-gap: 0.625rem; align-items: start; }
.ag-pick-n { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: 0.8125rem; font-weight: 650; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ag-pick-do { padding-top: 0.1875rem; font-weight: 600; line-height: 1.4; color: var(--fg); }
.ag-pick-note { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.45; color: var(--fg-3); }
.ag-pick-r { display: grid; justify-items: start; gap: 0.625rem; min-width: 0; }
.ag-cmd { position: relative; justify-self: stretch; border-radius: var(--r-2); background: #0e1014; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.6; color: #e5e7eb; }
.ag-cmd pre { margin: 0; padding: 0.6875rem 4.75rem 0.6875rem 1rem; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.ag-cmd .c { color: #8b919e; }
.ag-cmd .s { color: #ff9db6; }
.ag-copy { position: absolute; top: 0.5rem; right: 0.5rem; padding: 0.1875rem 0.625rem; border-radius: var(--r-pill); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; color: #d1d5db; box-shadow: inset 0 0 0 1px rgba(229, 231, 235, 0.28); transition: box-shadow var(--dur-1) ease, color var(--dur-1) ease; }
.ag-copy:hover { color: var(--white); box-shadow: inset 0 0 0 1px rgba(229, 231, 235, 0.55); }
.ag-copy:focus-visible { outline-color: #ff9db6; border-radius: var(--r-pill); }
.ag-copy[hidden] { display: none; }
.ag-ask { padding: 0.5rem 0.875rem; border-radius: var(--r-2) var(--r-2) var(--r-2) var(--r-1); background: var(--flood); font-weight: 560; line-height: 1.4; color: var(--abyss); quotes: "\201C" "\201D"; }
.ag-pick-foot { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); font-size: 0.875rem; color: var(--fg-3); }
@media (max-width: 860px) {
  .ag-pick-steps > li { grid-template-columns: 1.75rem minmax(0, 1fr); }
  .ag-pick-r { grid-column: 2; }
}
@media (max-width: 560px) {
  .ag-pick-tab { padding: 0.4375rem 0.75rem; font-size: 0.875rem; }
  .ag-cmd { font-size: 0.6875rem; }
  .ag-cmd pre { padding: 2.25rem 0.875rem 0.75rem; }
  .ag-pick-steps > li { column-gap: 0.75rem; }
}

.ag-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: inset 0 1px 0 var(--line);
}
.ag-safe { display: flex; gap: 0.75rem; align-items: flex-start; max-width: 44rem; color: var(--fg-2); }
.ag-safe .i { margin-top: 0.15em; color: var(--fg); }

/* On flood, white is for display type only (>= 40px); small heads are abyss navy (5.7:1). */
[data-theme="flood"] .reel-points .t-title { color: var(--fg-2); }
[data-theme="flood"] .reel-points .t-title .tile { background: var(--fg-2); }