chore: import upstream snapshot with attribution

skills/hyperframes-creative/frame-presets/claude/FRAME.md

@@ -0,0 +1,277 @@
+---
+version: alpha
+name: Claude — Frame (video / frame layer)
+description: >
+  Video-first companion to Claude's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — warm cream paper (never pure white, never cool), a single terracotta coral
+  as scarce "voltage", hairline ink elevation (no heavy shadow), EB Garamond for all
+  display + Inter body + JetBrains Mono for the index/code voice on a warm-navy code surface,
+  sentence-case display, and the ✱ coral spike mark. Composition + frame scale rewritten. Motion out
+  of scope.
+unit: the frame — 1920×1080 primary; 9:16 and 1:1 documented
+principle: atoms are sacred · composition is free · numbers come from the script
+
+colors:
+  ink: "#141413"
+  cream: "#FAF9F5"
+  tile: "#EFE9DE"
+  tile-strong: "#ECE3D4"
+  coral: "#CC785C"
+  navy: "#181715"
+  navy-soft: "#1F1E1B"
+  navy-elev: "#252320"
+
+borders: { hairline: "1px solid ink@12%", hairline-strong: "1px solid ink@20%", dark: "1px solid cream@14% (on navy)" }
+shadows: { card: "0 1px 3px ink@8%, 0 4px 16px ink@4%", none: "none" }
+
+typography:
+  # — reading + chrome ramp —
+  body:    { fontFamily: "Inter", cqw: 1.5, weight: 400, lineHeight: 1.5 }
+  lead:    { fontFamily: "Inter", cqw: 2.08, weight: 400, lineHeight: 1.5 }
+  card-title:{ fontFamily: "Inter", cqw: 2.3, weight: 500, lineHeight: 1.25, tracking: "-0.005em" }
+  button:  { fontFamily: "Inter", cqw: 1.46, weight: 500, lineHeight: 1.0 }
+  tag-upper:{ fontFamily: "Inter", cqw: 1.35, weight: 500, tracking: "0.18em", upper: true }
+  kicker:  { fontFamily: "JetBrains Mono", px: 28, cqw: 1.46, weight: 500, tracking: "0.16em", upper: true }
+  mono-label:{ fontFamily: "JetBrains Mono", px: 26, cqw: 1.35, weight: 500, tracking: "0.02em" }
+  code:    { fontFamily: "JetBrains Mono", cqw: 1.67, weight: 400, lineHeight: 1.6 }
+  # — display ramp (EB Garamond 400, sentence case, negative tracking. Renderer embeds only 400/700 — author at 400; italic is the synthesized slant) —
+  headline:{ fontFamily: "EB Garamond", cqw: 4.6, weight: 400, lineHeight: 1.06, tracking: "-0.018em" }
+  quote-pull:{ fontFamily: "EB Garamond", cqw: 5.0, weight: 400, lineHeight: 1.12, tracking: "-0.012em", italic: true }
+  display-italic:{ fontFamily: "EB Garamond", cqw: 6.7, weight: 400, lineHeight: 1.05, tracking: "-0.012em", italic: true }
+  display:{ fontFamily: "EB Garamond", cqw: 7.3, weight: 400, lineHeight: 1.02, tracking: "-0.022em" }
+  number-hero:{ fontFamily: "EB Garamond", cqw: 9.4, weight: 400, lineHeight: 0.95, tracking: "-0.025em" }
+  display-cover:{ fontFamily: "EB Garamond", cqw: 9.9, weight: 400, lineHeight: 0.98, tracking: "-0.028em" }
+  number-unit:{ fontFamily: "JetBrains Mono", cqw: 2.08, weight: 500, lineHeight: 1.0 }
+
+spacing:
+  slide-pad: "4.2cqw"   # ~80px @1920
+  gap-md: "1.7cqw"
+  hairline: "1px"
+  radius-sm: "6px"
+  radius-md: "8px"
+  radius-lg: "12px"
+  radius-pill: "9999px"
+
+components:
+  card-hairline:
+    backgroundColor: "{colors.cream} or {colors.tile}"
+    border: "1px solid {colors.ink}@12%"
+    rounded: "{spacing.radius-lg}"
+    shadow: "{shadows.card}"
+    typography: "{typography.card-title} + {typography.body}"
+    description: "The editorial content card. Elevation is the hairline + ONE soft warm shadow — never a heavy drop, glow, or gradient."
+  kicker-spike:
+    typography: "{typography.kicker}"
+    mark: "✱ coral spike prefix"
+    description: "The eyebrow — JetBrains Mono uppercase, indexical (2–5 words), prefixed with the coral ✱. Never plain text, never a sentence."
+  coral-callout:
+    backgroundColor: "{colors.coral} (full-bleed) or {colors.cream} with a coral edge"
+    textColor: "{colors.cream} on coral"
+    rounded: "{spacing.radius-md}"
+    typography: "{typography.button} / {typography.h2}"
+    description: "The ONE voltage moment per frame — the CTA, the single inline link, OR the full-bleed band. Never two corals in one frame."
+  number-lockup:
+    typography: "{typography.number-hero} figure + {typography.number-unit} unit"
+    description: "Hero stat — a EB Garamond figure paired with a JetBrains Mono unit (200K, +1,204, −318, 17 files). Figure is serif; the unit is ALWAYS mono, never the serif."
+  pull-quote:
+    typography: "{typography.quote-pull} (EB Garamond italic) + {typography.tag-upper} cite"
+    description: "A commit message, a reviewer line, or the thesis. EB Garamond italic, small Inter uppercase cite beneath."
+  section-rule:
+    rule: "1px solid {colors.ink}@12% (or {colors.cream}@14% on navy)"
+    description: "The only separator. A coral 1px rule may draw on to introduce a section. Never 2px+, never a heavy divider."
+  code-surface:
+    backgroundColor: "{colors.navy} body / {colors.navy-elev} title bar + status strip"
+    textColor: "{colors.cream} (JetBrains Mono); syntax in coral (keywords) / teal #5DB8A6 (strings) / amber #E8A55A (numbers)"
+    border: "1px solid {colors.cream}@14%"
+    rounded: "{spacing.radius-md}"
+    description: "The warm-navy code / terminal surface. The CODE ITSELF is rendered by the code-* registry blocks (code-diff / code-typing / code-snippet-*); this preset owns the surrounding surface, title bar, status strip, and mono chrome — not the code rendering."
+  spike-mark:
+    glyph: "✱ (U+2731), always {colors.coral}"
+    description: "The brand mark. Fades + scales 0.92→1 on a single emphasis beat; never spins."
+---
+
+# Claude — Frame (video / frame layer)
+
+## Overview
+
+Claude at frame scale is a **warm-editorial brand book come to life** — the register of a literary
+imprint or a research note. The thesis is three colors: **cream is the ground, ink is the voice,
+coral is the voltage** — and a fourth (warm navy) only where code shows itself. Every surface is
+**warm cream** (never pure white, never cool gray); content gathers on a **tile** surface half a
+step darker — the demarcation is a half-step, never a hard contrast. Elevation is a **1px hairline**
+ink border at low alpha plus, rarely, one soft warm shadow. There are no heavy drops, no glows, no
+gradients on content.
+
+Three editorial voices, each in its own face: **EB Garamond** carries every display moment — covers,
+headlines, pull-quotes, big stat numerals — at large display sizes with gentle negative tracking;
+its **italic** is the expressive register. **Inter** carries body, leads, card titles, buttons, and
+UI chrome. **JetBrains Mono** carries the indexical layer — kickers, technical labels, the code
+window, status strips. Switching a voice's face collapses the register: a sans headline or a serif
+label reads as a different brand.
+
+**Key characteristics at frame scale:**
+
+- **Cream / ink / coral trinity** + a warm-navy code surface; cream is the default ground, ink the voice, coral the scarce voltage.
+- **EB Garamond** (sentence case, negative-tracked) for all display; **Inter** body/chrome; **JetBrains Mono** index + code.
+- **Hairline elevation** — a 1px low-alpha ink border + at most one soft warm shadow. No heavy drop, glow, or gradient.
+- **Coral is rationed** — at most ONE coral moment per frame (CTA, inline link, OR full-bleed band); coral never sets a headline or a body run.
+- **Density is free** — fill the frame as the content wants; a frame may stand on a single focal or carry a dense, layered composition.
+- **The ✱ coral spike** opens kickers; warm navy is reserved for the code/terminal surface.
+
+## The Frame
+
+### Frame Craft Bar
+
+Eyeball tests gate every frame before any structural check:
+
+- **Squint** — one EB Garamond display moment dominates at 3–6× its neighbor.
+- **Trinity** — cream/tile ground, ink text, coral exactly **once**; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code.
+
+- **Primary:** 1920×1080 (16:9). Display authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
+- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
+- **Safe area:** `slide-pad` ~4.2cqw; the kicker/mono chrome sit inside it.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Hairlines stay 1px; card radii stay
+6/8/12px; the warm-paper reading must survive every ratio.
+
+## Colors
+
+Tokens identical to the source. Default ground `{colors.cream}`; content gathers on
+`{colors.tile}` / `{colors.tile-strong}` (half-step warm steps, never a hard contrast).
+**Headlines & body:** `{colors.ink}` on cream/tile; `{colors.cream}` on navy. **Coral**
+(`{colors.coral}`) is the scarce voltage — one moment per frame (CTA, inline link, or full-bleed
+band), never body text, never a card fill. **Warm navy** (`{colors.navy}` / `navy-soft` /
+`navy-elev`) is the code / terminal / dark-card surface — a structural anchor, not a fourth brand
+hue. **No cool grays, no pure white, no pure black.**
+
+**Fixed syntax colors (decoration, NOT remixable brand hues).** When a code line is hand-set rather
+than rendered by a `code-*` block, keywords are coral, strings are **teal `#5DB8A6`**, numbers are
+**amber `#E8A55A`**; status reads success `#5DB872` / warn `#C64545`. These track the code surface,
+not the brand trinity — keep them out of the brand palette.
+
+## Typography
+
+Two ramps. The **reading/chrome ramp** (Inter `body` 1.5cqw / `lead` 2.08cqw weight 400; JetBrains
+Mono `kicker`/`mono-label` in px) carries copy + chrome; the **display ramp** (EB Garamond `headline` 4.6cqw
+→ `display-cover` 9.9cqw, weight 400, negative-tracked) carries every headline + stat.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono px labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display-cover`; 4–6 → `display`; 7+ → `headline`. Reserve the 7.3–9.9cqw tier for cover / statement / stat.
+- **EB Garamond display is sentence case** (NOT title case, NOT uppercase), weight 400, negative-tracked (−0.012..−0.028em); reach for **italic** when the line is a stance or a definition. **Inter body** sentence case weight 400. **JetBrains Mono** kickers UPPERCASE 0.16em with the coral ✱. No uppercase serif, no sans headline, no serif label.
+
+## Depth & Surface
+
+Hairline elevation:
+
+- **1px hairline** ink border at ~12% alpha is the primary lift (cream@14% on navy).
+- **One soft warm shadow** (`0 1px 3px ink@8%, 0 4px 16px ink@4%`) — used rarely, never heavy.
+- **Half-step surface** — a `{colors.tile}` block on cream reads elevated by the warm step, not by a cast shadow.
+
+**Ceiling:** no heavy drop shadow, no glow, no gradient on content, no tilt. The system has no light
+to emit; it reads by warmth and hairline.
+
+## Shapes
+
+- **6px** small chrome, **8px** cards / code surface, **12px** large cards / quote frames, **9999px** true pills only. No square corners, no heavy rounding; the editorial register is gently rounded, never hard.
+
+## Components
+
+- **card-hairline** — the editorial content card (hairline + one soft shadow). **section-rule** — the only separator (1px, coral may draw on).
+- **kicker-spike** — the ✱ coral eyebrow. **coral-callout** — the one voltage moment (CTA / inline link / full-bleed band).
+- **number-lockup** — EB Garamond figure + mono unit (the PR `+N / −M`, `200K`, file counts). **pull-quote** — EB Garamond italic + cite (a commit message / reviewer line).
+- **code-surface** — the warm-navy code / terminal surface; the code itself comes from the **`code-*` registry blocks**, this owns the surface + mono chrome.
+- **spike-mark** — the ✱ brand glyph, always coral.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · Fixed/Free · density.
+> One coral moment per frame; open with a kicker-spike.
+
+### 1 · Cover (identity · move: oversized EB Garamond · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, display-cover, lead, mono-label index. **Focal** a 2–3 line EB Garamond `display-cover` (sentence case, ink) under a coral ✱ kicker. **Chrome** mono index strip (repo · branch). **Accent** the single coral ✱. **Fixed** EB Garamond 400 sentence case, hairline, cream ground. **Free** title, the mono index, layout + how full the frame runs. **Density** free.
+
+### 2 · Statement (statement · move: single EB Garamond line · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}` for gravity). **Composes** kicker-spike, display, optional lead. **Focal** one 2-line EB Garamond `display` carrying the change in a sentence — reach for **italic** if it's a stance. **Chrome** mono kicker. **Accent** none — the serif carries it (or one coral word). **Fixed** sentence-case serif. **Free** the line, ground, layout + density. **Density** free.
+
+### 3 · Code Surface (code · move: warm-navy code window · the PR-critical frame)
+
+**Ground** `{colors.cream}` framing a `{colors.navy}` **code-surface** (8px, cream@14% hairline, `navy-elev` title bar + filename in mono). **Composes** mono-label filename, the **`code-*` block** (code-diff / code-typing / code-snippet-_), optional `section-rule`. **Focal** the code panel — the diff / before→after / typed-on snippet. **Chrome** mono filename + status strip. **Accent** syntax coral/teal/amber inside the panel; one coral marker outside (e.g. a `+`/`−` gutter cue). **Fixed** warm-navy surface, mono code, hairline. **Free** which code-_ block, the code (from the diff), how large the panel runs. **Density** dense.
+
+### 4 · Number / Impact (data · move: oversized figure · cream)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** kicker-spike, number-lockup, lead/caption, optional `section-rule`. **Focal** a EB Garamond `number-hero` figure with a mono unit over a 1px rule — the PR impact (`+1,204 / −318`, `17 files`, `2.1× faster`). **Chrome** mono tag. **Accent** the figure in ink; at most one coral unit. **Fixed** serif figure + mono unit, hairline rule. **Free** the figures (from the script), tag, layout + density. **Density** free.
+
+### 5 · Pull-quote (quote · move: EB Garamond italic · cream)
+
+**Ground** `{colors.cream}`. **Composes** kicker-spike, pull-quote, tag-upper cite. **Focal** a EB Garamond **italic** `quote-pull` — a commit message, a reviewer line, or the thesis — with a small Inter uppercase cite (author · role) beneath. **Chrome** mono kicker. **Accent** none, or one coral mark. **Fixed** EB Garamond italic quote + uppercase cite. **Free** quote, attribution, layout + density. **Density** free.
+
+### 6 · Closing / CTA (closer · move: coral voltage · cream or navy)
+
+**Ground** `{colors.cream}` (or `{colors.navy}`). **Composes** display sign-off, coral-callout, optional contributor row (`assets/<login>.png` avatars + mono names). **Focal** a short EB Garamond sign-off with the one **coral-callout** (the CTA or full-bleed band) and, for a "shipped-by" close, a row of hairline-ringed avatar chips. **Chrome** mono index. **Accent** the single coral voltage. **Fixed** one coral moment, hairline avatar rings, sentence-case serif. **Free** sign-off, who ships, layout + density. **Density** free.
+
+## Composition Rules
+
+### Do
+
+- Stand every frame on the **warm cream floor**; gather content on a **half-step tile** surface.
+- Set all display in **EB Garamond, sentence case**, negative-tracked; **Inter 400** body; **JetBrains Mono** kickers (uppercase, 0.16em, coral ✱) + code.
+- Ration **coral to one moment per frame** — CTA, inline link, OR full-bleed band.
+- Elevate with a **1px hairline** + at most one soft warm shadow; reserve **warm navy** for the code/terminal surface.
+- Lead with **one clear focal**; open regions with a **kicker-spike**. Fill the frame as the content wants.
+- Pair a EB Garamond figure with a **mono unit** for every stat; render code via the **`code-*` blocks** on the navy surface.
+
+### Don't
+
+- No pure white, no cool gray, no pure black; no fourth brand hue (navy is structural, syntax colors are decoration).
+- No heavy drop shadow, glow, gradient on content, or tilt — hairline elevation only.
+- No uppercase or title-case EB Garamond display; no sans headline; no serif label; no serif-set numeric unit.
+- No two coral moments in one frame; coral never sets a headline or body run.
+- Don't blow a headline past the measure — step the ramp down.
+
+## Aspect-Ratio Behavior
+
+| Treatment     | 16:9                    | 9:16                        | 1:1                    |
+| ------------- | ----------------------- | --------------------------- | ---------------------- |
+| Cover         | display left, index top | display top, index below    | display, index corner  |
+| Statement     | line left/centered      | line stacked                | centered               |
+| Code Surface  | panel framed in cream   | panel taller, fewer lines   | panel centered, square |
+| Number/Impact | figure left             | figure centered, taller     | centered               |
+| Pull-quote    | quote left              | quote stacked               | centered               |
+| Closing/CTA   | sign-off + avatar row   | sign-off top, avatars below | centered, avatars wrap |
+
+`slide-pad` holds on the short edge; re-step display above the 1.4cqw floor. The code surface keeps
+its hairline + mono chrome on every ratio; the avatar row wraps rather than shrinks below legibility.
+
+## Approved Real Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Contributor avatars come from the project's `assets/<login>.png` (staged from the PR's
+people graph); the ✱ spike, hairlines, and the code surface are CSS-only and need no external imagery.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, stats, diffs, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `+N / −M`. Number-lockups, code panels, and impact stats carry placeholders until the
+script (from the PR ingest) supplies real values. Branch names, file counts, and `+/−` totals trace
+to the diff; commit/issue numbers are chrome.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one EB Garamond display moment dominates.
+- **Trinity** — cream floor + tile step + ink voice; coral appears exactly once; warm navy only on the code surface; no cool gray / pure white / fourth hue.
+- **Type** — EB Garamond sentence-case display (negative-tracked); Inter 400 body; JetBrains Mono kickers (uppercase 0.16em, coral ✱) + code; ≥1.4cqw floor.
+- **Depth** — 1px hairline + at most one soft warm shadow; no heavy drop / glow / gradient / tilt; 6/8/12px radii.
+- **Code** — code rendered by a `code-*` block on the warm-navy surface; syntax coral/teal/amber; figures paired with a mono unit.
+- **Fabrication** — every numeral / diff traces to the PR, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only. Claude's motion register — short cross-dissolves, no overshoot/bounce/elastic, coral the only "draw-on", numbers count up, code types on line by line — lives in the workflow's `motion-language.md` + `hyperframes-animation`, not here.
+- **EB Garamond + Inter + JetBrains Mono are all bundled in the HyperFrames renderer (`@fontsource` embedded data) — they resolve offline by name, with no Google Fonts dependency.** This is deliberate: every face here renders deterministically on a clean machine or AWS Lambda, so a frame needs no captured `.woff2` or `@font-face` for these three. The embedded set ships **weights 400 + 700 only and no true italic** — so author display at **weight 400** (700 reads as a heavy bold, off-register), and treat italic as the browser-synthesized slant (acceptable for the pull-quote register; ship a real EB Garamond italic `.woff2` + `@font-face` only if a project leans hard on it). EB Garamond is a warm old-style serif (low contrast, humanist); if it ever fails, fall to Georgia or another old-style serif — never to a sans. CJK: Noto Serif SC (display) / Noto Sans SC (body) / Noto Sans Mono CJK (code); the sentence-case warmth carries when the serif drops.
+- **Syntax colors (teal `#5DB8A6` / amber `#E8A55A` / status) are fixed decoration**, declared in §Colors — they are NOT in the remixable `colors:` block, so a brand remix never repaints them.
+- **The code itself is the `code-*` registry blocks**, not this preset — this preset owns only the surrounding warm-navy surface + mono chrome.
+- **9:16 / 1:1 are guidance**; verify the legibility floor and that the cream/tile warmth + one-coral discipline hold per ratio.

skills/hyperframes-creative/frame-presets/claude/caption-skin.html

@@ -0,0 +1,224 @@
+<!--
+  Claude — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look. product-launch-video's
+  (and pr-to-video's) Step 2 copies it into the project as caption-skin.html;
+  captions.mjs then fills the three reserved holes, wraps the fragment in a
+  <template>, and writes compositions/captions.html:
+    · the empty GROUPS array            → the engine's scene-aware word groups
+    · the 0 duration + 0 width/height   → real total + canvas size
+    · the empty data-brand-tokens style → :root tokens derived from the project's frame.md
+
+  Token contract — reference ONLY this fixed vocab (captions.mjs injects it from
+  frame.md, so the Step-2 brand overlay flows through; each var has a claude literal
+  fallback for standalone preview):
+    --cap-ink · --cap-canvas · --cap-accent · --cap-accent-2 · --font-display ·
+    --font-body · --cap-band-top · --cap-band-height
+  Hooks (do not rename): .caption-group / .caption-word + states .is-active / .is-spoken,
+  root data-composition-id="captions", timeline at window.__timelines["captions"].
+  State changes use gsap.set({className}) (applied on the engine's frame-by-frame seek);
+  never tl.call() callbacks (seek does not fire them → wrong state on render).
+
+  Visual: a warm cream card lifted off the page on a 1px hairline ink border + one soft
+  warm shadow — claude's only elevation language, no tilt, editorial and precise.
+  EB Garamond sentence case, warm-ink glyphs. Upcoming words sit in faint ink; the current
+  word reads in full ink under a 3px coral "voltage" underline (the brand's inline-link
+  gesture, border-bottom = underline without layout shift); spoken words settle to solid
+  ink, underline cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- captions.mjs injects the project's :root tokens here -->
+<style data-brand-tokens></style>
+
+<style>
+  #captions-root {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .caption-layer {
+    position: absolute;
+    inset: 0;
+    z-index: 20;
+    pointer-events: none;
+  }
+  /* the keep-out band, from captionBand(H) — frame content stays above it */
+  .caption-stage {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: var(--cap-band-top, 900px);
+    height: var(--cap-band-height, 180px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .caption-group {
+    /* every group is absolutely stacked over the SAME band — exactly one shown at a
+       time via opacity. Must be absolute: in-flow groups would lay out side-by-side. */
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+  }
+
+  /* THE lifted cream card — warm cream fill, 1px hairline ink border, one soft warm
+     shadow (claude's only elevation language), 12px radius, no tilt */
+  .caption-pill {
+    max-width: 78%;
+    padding: 22px 44px 26px;
+    background: var(--cap-canvas, #faf9f5);
+    border: 1px solid color-mix(in srgb, var(--cap-ink, #141413) 12%, transparent);
+    border-radius: 12px;
+    box-shadow:
+      0 1px 3px color-mix(in srgb, var(--cap-ink, #141413) 8%, transparent),
+      0 4px 16px color-mix(in srgb, var(--cap-ink, #141413) 4%, transparent);
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.12em 0.3em;
+    font-family: var(--font-display, "EB Garamond"), Georgia, serif;
+    font-weight: 500;
+    font-size: clamp(40px, 4.4vw, 56px);
+    line-height: 1.24;
+    letter-spacing: -0.02em;
+  }
+
+  /* upcoming — faint warm ink, no underline */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.02em 0.06em;
+    color: color-mix(in srgb, var(--cap-ink, #141413) 40%, var(--cap-canvas, #faf9f5));
+    border-bottom: 3px solid transparent;
+  }
+  /* current word — full ink under the coral voltage underline (the brand's signature
+     inline-link gesture; border-bottom = underline without layout shift) */
+  .caption-word.is-active {
+    color: var(--cap-ink, #141413);
+    border-bottom: 3px solid var(--cap-accent, #cc785c);
+  }
+  /* already spoken — solid warm ink, underline cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #141413);
+    border-bottom: 3px solid transparent;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — the expressive EB Garamond italic */
+  .caption-word.cap-brand {
+    font-style: italic;
+    color: var(--cap-ink, #141413);
+  }
+  .caption-word.cap-brand.is-active {
+    border-bottom: 3px solid var(--cap-accent, #cc785c);
+  }
+  /* numerals / data — slightly recessed warm ink */
+  .caption-word.cap-num {
+    color: color-mix(in srgb, var(--cap-ink, #141413) 72%, var(--cap-canvas, #faf9f5));
+  }
+  /* emphasis — a persistent coral voltage underline */
+  .caption-word.cap-cta {
+    border-bottom: 3px solid var(--cap-accent-2, #b5654a);
+    color: var(--cap-ink, #141413);
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 46px);
+    }
+  }
+</style>
+
+<div
+  id="captions-root"
+  data-composition-id="captions"
+  data-timeline-locked
+  data-start="0"
+  data-duration="0"
+  data-fps="30"
+  data-width="0"
+  data-height="0"
+>
+  <div class="caption-layer" aria-hidden="true">
+    <div id="caption-stage" class="caption-stage"></div>
+  </div>
+</div>
+
+<script>
+  // captions.mjs injects the engine's scene-aware groups + real duration here.
+  var GROUPS = [];
+  var DURATION = 0;
+
+  (function () {
+    var stage = document.getElementById("caption-stage");
+
+    // build DOM: one .caption-group per group, .caption-word per word
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.createElement("div");
+      groupEl.className = "caption-group";
+      groupEl.id = "caption-group-" + g;
+      var pill = document.createElement("div");
+      pill.className = "caption-pill";
+      var line = document.createElement("div");
+      line.className = "caption-line";
+      (group.words || []).forEach(function (w, i) {
+        var span = document.createElement("span");
+        span.className = "caption-word";
+        span.id = "caption-word-" + g + "-" + i;
+        span.textContent = String(w.text);
+        line.appendChild(span);
+      });
+      pill.appendChild(line);
+      groupEl.appendChild(pill);
+      stage.appendChild(groupEl);
+    });
+
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+
+    GROUPS.forEach(function (group, g) {
+      var groupEl = document.getElementById("caption-group-" + g);
+      var words = group.words || [];
+      var next = GROUPS[g + 1];
+      var isLast = g === GROUPS.length - 1;
+      var start = Math.max(0, Number(group.start));
+      var end = isLast ? DURATION : Math.min(Number(next.start), Number(group.end) + 0.3);
+      if (end <= start) end = start + 0.01;
+
+      // group on/off — exactly one group visible at a time
+      tl.set(groupEl, { opacity: 1 }, start);
+      tl.set(groupEl, { opacity: 0 }, end);
+
+      // 3-state karaoke via className SETS — seek-safe (gsap.set applies on the
+      // engine's frame-by-frame seek; .call callbacks would NOT fire).
+      words.forEach(function (w, i) {
+        var el = document.getElementById("caption-word-" + g + "-" + i);
+        var at = Math.max(start, Number(w.start));
+        tl.set(el, { className: "caption-word" }, start); // upcoming (also resets on reverse-seek)
+        tl.set(el, { className: "caption-word is-active" }, at); // current
+        tl.fromTo(el, { scale: 0.98 }, { scale: 1, duration: 0.16, ease: "power1.out" }, at);
+        if (i + 1 < words.length) {
+          var nextAt = Math.max(start, Number(words[i + 1].start));
+          tl.set(el, { className: "caption-word is-spoken" }, nextAt); // demote when next activates
+        }
+      });
+      if (words.length) {
+        var lastEl = document.getElementById("caption-word-" + g + "-" + (words.length - 1));
+        var lastSpoken = Math.min(end, Number(words[words.length - 1].end) + 0.1);
+        tl.set(lastEl, { className: "caption-word is-spoken" }, lastSpoken);
+      }
+    });
+
+    // full-span anchor so the sub-comp timeline spans the whole video
+    tl.to({}, { duration: DURATION }, 0);
+    window.__timelines["captions"] = tl;
+  })();
+</script>