diff --git a/.claude/hooks/session-start.sh b/.claude/hooks/session-start.sh
new file mode 100755
index 0000000..d393e9e
--- /dev/null
+++ b/.claude/hooks/session-start.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+set -euo pipefail
+
+# Only run in Claude Code cloud sessions.
+if [ "${CLAUDE_CODE_REMOTE:-}" != "true" ]; then
+  exit 0
+fi
+
+# Install the rea CLI (used by the reverse-engineer-anything skill) if missing.
+if ! command -v rea >/dev/null 2>&1; then
+  npm install --global rea-agents
+fi
diff --git a/.claude/settings.json b/.claude/settings.json
new file mode 100644
index 0000000..e06b033
--- /dev/null
+++ b/.claude/settings.json
@@ -0,0 +1,14 @@
+{
+  "hooks": {
+    "SessionStart": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "$CLAUDE_PROJECT_DIR/.claude/hooks/session-start.sh"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.claude/skills/figma/SKILL.md b/.claude/skills/figma/SKILL.md
new file mode 100644
index 0000000..2a33e19
--- /dev/null
+++ b/.claude/skills/figma/SKILL.md
@@ -0,0 +1,55 @@
+---
+name: figma
+description: Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and connector-assisted motion. Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand.
+---
+
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.
+
+# Figma → HyperFrames
+
+Every import happens at build time and freezes a local file with its source recorded under `.media/`, so renders never call Figma and re-running a command re-imports only what changed. Assets, tokens and components go over REST with a token; motion and shader data need a Figma connector, or a native export from the person.
+
+## Access
+
+`FIGMA_TOKEN` in the shell or the project `.env`. Check it exists before the first command; if not, tell the person how to make one and stop: figma.com → Settings → Security → Personal access tokens, read-only **File content** and **File metadata**, plus **Library content** for `tokens` on non-Enterprise plans. They set it themselves; never ask them to paste it into the chat.
+
+| Error | Meaning |
+| --- | --- |
+| `BAD_TOKEN` (401) | Expired or revoked: make a new one |
+| `FORBIDDEN` (403) | The message names the missing scope, or the file isn't visible to the account |
+| `REQUIRES_ENTERPRISE` (403, variables) | Not a failure: the published-styles fallback already ran |
+| `RATE_LIMITED` (429) | Already retried with backoff; wait a minute or import fewer nodes per call |
+
+## Commands
+
+- A layer, logo or image: `npx hyperframes figma asset '<url or fileKey:nodeId>' [more refs] --format svg|png --scale 2 --description "<what it is>" [--entity "<brand mark>"]`. SVG for vectors and logos, PNG at 2x for raster. Several nodes of one file in one call render in a single request; `--entity` lets `/media-use` find a brand mark later.
+- Brand colours and type: `npx hyperframes figma tokens <fileKey>`. Run it before `component` and paste the printed entries into `data-composition-variables`. Without Enterprise it falls back to published styles. A connector can supply variables there instead: cache its raw response in `.media/figma-cache/` and write the bindings to `.media/figma-bindings.jsonl` (`{kind:"binding", figmaId, sourceFileKey, compositionVariableId:"figma:<name>", version}`).
+- A frame as editable HTML at exact geometry: `npx hyperframes figma component '<url or fileKey:nodeId>'`, packaged under `compositions/components/<name>/`. A fill bound to an imported token comes out as `var(--slug, #literal)`, so one variable re-brands every import; an unknown token stays a literal marked `data-figma-unresolved`: import that library's tokens and re-import. Ask once which file a library is; never match by hex.
+- Check hero components against Figma's pixels (`figma asset <same node> --format png`). Text drift is the usual cause; report drift you can't fix instead of hand-tweaking the import.
+
+## Motion (connector)
+
+Usage beacon: these phases have no CLI touchpoint, so run `npx hyperframes events --skill=figma-motion` when you begin and `npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error` when done. Same for shaders (`figma-shaders`) and storyboards (`figma-storyboard`).
+
+1. Fetch motion context for the parent frame in one recursive request; cache the raw JSON in `.media/figma-cache/`.
+2. Normalise with `motionContextToDocs(raw, { selectorFor, repeat })` from `@hyperframes/core/figma`, never by transcribing keyframes. It reads the motion.dev snippets (the CSS snippets stretch durations), drops loop-wrap tail keyframes and keeps bezier eases. `selectorFor` returns the ids from the component import.
+3. `motionToGsap(doc)` → `emitTimelineScript(spec)`, injected after the GSAP and CustomEase tags: paused, finite, a literal `window.__timelines` key. Named eases outside the mapped set fall back to linear; say so.
+4. Verify against Figma's own export: `node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y`. It compares motion between samples, so static drift cancels out, and fails under 15 dB (faithful ≈ 20+, diverging ≈ 5). Measure `--crop` from the render's card edges. A fail means fix the translation, not the threshold.
+5. A track that won't translate: export it, freeze the MP4 and place it as `<video class="clip">`.
+
+## Shaders
+
+Figma's export path flattens shaders to their base colour, and shader source is only reachable for library-published styles. Ask the person for a native export of that frame (PNG or MP4) and place it as an asset or clip.
+
+## Storyboards: frames are KEYFRAMES, not slides
+
+Two frames holding the same element describe that element's state through time: animate the element between the states. Playing the frames back to back as stills is the failure mode.
+
+1. Scenes are every frame-sized node in the section, named frames and loose full-frame rectangles alike: filter by size, not type or name. Order by `absoluteBoundingBox.x`.
+2. Match children across neighbouring frames by name first, then by similar size and position. Tween geometry between states; crossfade two exports in place when the pixels changed. Export one asset per element, not one still per frame. Unmatched children enter or exit at their scene's beat.
+3. Text nodes below the strip are motion notes for the scene above them, not on-screen copy. A note about motion inside a scene ("lines reveal one after another") means import that frame as a component and animate it.
+4. Export in batches of about 4 scene frames per call: past about 12 ids `/v1/images` times out.
+5. Frames that are one product UI in successive states: rebuild the UI as live DOM: code what changes state, freeze what doesn't, and treat each frame change as an interaction to perform (the cursor moves, clicks, the screen responds), not a tween to apply.
+6. Stills are the fallback, only for frames with no shared elements.
+
+Never leave a Figma URL in the composition.
diff --git a/.claude/skills/figma/scripts/verify-motion.mjs b/.claude/skills/figma/scripts/verify-motion.mjs
new file mode 100644
index 0000000..38247a8
--- /dev/null
+++ b/.claude/skills/figma/scripts/verify-motion.mjs
@@ -0,0 +1,153 @@
+#!/usr/bin/env node
+/**
+ * Objective fidelity gate for figma-motion imports (skill step 2b).
+ *
+ * Compares the HyperFrames render against Figma's own `export_video` output
+ * using MOTION-ENERGY deltas: for each sample window [t, t+interval], the
+ * frame difference ref(t+i)-ref(t) is compared (PSNR) against
+ * render(t+i)-render(t). Static import divergence (fonts, rasterized edges,
+ * subpixel geometry — the hybrid-fidelity ceiling) cancels out of both
+ * deltas, so the score isolates choreography: trajectories, timing, easing.
+ *
+ * Calibration (SDS "Unlocked" card, 2026-07): a faithful translation scored
+ * min 20.3dB / mean 27.7dB; a diverging one (invented retract keyframes,
+ * wrong durations) scored min 5.0dB / mean 23.1dB. Default threshold 15dB
+ * sits between with margin on both sides.
+ *
+ *   node verify-motion.mjs --reference figma-export.mp4 --render out.mp4 \
+ *     [--crop WxH+X+Y] [--interval 0.2] [--min-motion-psnr 15]
+ *
+ * --crop selects the card region inside the (usually larger) composition
+ * frame. Measure it from the render (the card's left/top edge + scaled
+ * size), don't guess: a wrong crop reads as motion divergence.
+ */
+import { execFileSync, spawnSync } from "node:child_process";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+function arg(name, fallback) {
+  const i = process.argv.indexOf(`--${name}`);
+  return i > -1 ? process.argv[i + 1] : fallback;
+}
+const reference = arg("reference");
+const render = arg("render");
+if (!reference || !render) {
+  console.error(
+    "usage: verify-motion.mjs --reference ref.mp4 --render out.mp4 [--crop WxH+X+Y] [--interval 0.2] [--min-motion-psnr 15]",
+  );
+  process.exit(2);
+}
+const crop = arg("crop", null);
+const interval = Number(arg("interval", "0.2"));
+const minMotion = Number(arg("min-motion-psnr", "15"));
+
+const ffprobe = (file) =>
+  Number(
+    execFileSync("ffprobe", [
+      "-v",
+      "error",
+      "-show_entries",
+      "format=duration",
+      "-of",
+      "csv=p=0",
+      "--",
+      file,
+    ])
+      .toString()
+      .trim(),
+  );
+const refDur = ffprobe(reference);
+const renderDur = ffprobe(render);
+const end = Math.min(refDur, renderDur) - interval - 0.01;
+
+const dims = execFileSync("ffprobe", [
+  "-v",
+  "error",
+  "-select_streams",
+  "v",
+  "-show_entries",
+  "stream=width,height",
+  "-of",
+  "csv=p=0",
+  "--",
+  reference,
+])
+  .toString()
+  .trim()
+  .split(",")
+  .map(Number);
+const [rw, rh] = dims;
+
+let cropFilter = "";
+if (crop) {
+  const m = crop.match(/^(\d+)x(\d+)\+(\d+)\+(\d+)$/);
+  if (!m) {
+    console.error("bad --crop, expected WxH+X+Y");
+    process.exit(2);
+  }
+  cropFilter = `crop=${m[1]}:${m[2]}:${m[3]}:${m[4]},`;
+}
+
+const dir = mkdtempSync(join(tmpdir(), "verify-motion-"));
+const frame = (src, t, vf, dst) => {
+  const args = ["-y", "-v", "error", "-ss", String(t), "-i", src, "-frames:v", "1"];
+  if (vf) args.push("-vf", vf);
+  execFileSync("ffmpeg", args.concat(dst));
+};
+const diff = (a, b, dst) =>
+  execFileSync("ffmpeg", [
+    "-y",
+    "-v",
+    "error",
+    "-i",
+    a,
+    "-i",
+    b,
+    "-filter_complex",
+    "blend=all_mode=difference",
+    dst,
+  ]);
+const psnr = (a, b) => {
+  // spawnSync with array args (no shell): psnr stats land on stderr
+  const r = spawnSync("ffmpeg", ["-i", a, "-i", b, "-lavfi", "psnr", "-f", "null", "-"], {
+    encoding: "utf8",
+  });
+  const m = (r.stderr || "").match(/average:([\d.]+|inf)/);
+  return m ? (m[1] === "inf" ? 99 : Number(m[1])) : NaN;
+};
+
+const renderVf = `${cropFilter}scale=${rw}:${rh}`;
+const results = [];
+for (let t = 0; t <= end; t = Math.round((t + interval) * 1000) / 1000) {
+  const t1 = Math.round((t + interval) * 1000) / 1000;
+  frame(reference, t, null, join(dir, "ra.png"));
+  frame(reference, t1, null, join(dir, "rb.png"));
+  frame(render, t, renderVf, join(dir, "oa.png"));
+  frame(render, t1, renderVf, join(dir, "ob.png"));
+  diff(join(dir, "ra.png"), join(dir, "rb.png"), join(dir, "rd.png"));
+  diff(join(dir, "oa.png"), join(dir, "ob.png"), join(dir, "od.png"));
+  results.push({
+    t,
+    motion: psnr(join(dir, "rd.png"), join(dir, "od.png")),
+    abs: psnr(join(dir, "rb.png"), join(dir, "ob.png")),
+  });
+}
+rmSync(dir, { recursive: true, force: true });
+
+const min = Math.min(...results.map((r) => r.motion));
+const mean = results.reduce((s, r) => s + r.motion, 0) / results.length;
+for (const r of results)
+  console.log(
+    `window ${r.t.toFixed(2)}s→${(r.t + interval).toFixed(2)}s  motion-psnr=${r.motion.toFixed(2)}dB  (abs=${r.abs.toFixed(1)}dB)${r.motion < minMotion ? "  <-- BELOW THRESHOLD" : ""}`,
+  );
+console.log(
+  `\nwindows=${results.length} min-motion=${min.toFixed(2)}dB mean-motion=${mean.toFixed(2)}dB threshold=${minMotion}dB`,
+);
+if (min < minMotion) {
+  console.log(
+    "VERDICT: FAIL — choreography diverges from the Figma export (check timings, invented keyframes, durations)",
+  );
+  process.exit(1);
+}
+console.log("VERDICT: PASS — motion matches the Figma export within the static-fidelity ceiling");
diff --git a/.claude/skills/hyperframes-cli/SKILL.md b/.claude/skills/hyperframes-cli/SKILL.md
new file mode 100644
index 0000000..7f51bc5
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/SKILL.md
@@ -0,0 +1,97 @@
+---
+name: hyperframes-cli
+description: The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
+---
+
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.
+
+# HyperFrames CLI
+
+Run `npx hyperframes <command>` unless the project gives a wrapper; then use the wrapper. It needs Node.js 22+ and FFmpeg. Every command has `--help`; most take `--json`, and a failure prints `✗ …`, a `Fix:` line and exits non-zero.
+
+## Commands by job
+
+| Job | Commands |
+| --- | --- |
+| Start | `init <dir>` (blank; `--example <name>` only when asked), `capture <url>` |
+| Read a project | `info`, `compositions`, `timeline --json`, `docs <topic>` |
+| Check it | `lint` while writing; `check --json` as the gate (lint, runtime, layout, contrast) |
+| Look at it | `snapshot` (`--at <t,…>`, `--range START,END`, `--composition <id>`, `--zoom`, `--angle`, `--against <video>`), `keyframes`, `compare`, `audio` |
+| Edit the timeline | `timeline` with `move`, `trim`, `split`, `set`, `duplicate`, `delete`, `apply`, `undo`, `ids` |
+| Reuse | `catalog`, `add` (`/hyperframes-registry`) |
+| Media and sound | `media-treatment`, `grade-compare`, `remove-background`, `tts`, `transcribe`, `beats`, `normalize-audio` (`/media-use`) |
+| Show and ship | `preview`, `present` (`/slideshow`), `render`, `publish`, `cloud`, `lambda`, `cloudrun` |
+| Desktop app | `open`, `catch-up` |
+| Upkeep | `doctor`, `browser`, `upgrade`, `skills`, `usage`, `clean`, `feedback` |
+
+`validate`, `inspect` and `layout` are deprecated aliases of `check`; `events` is telemetry for skills' own scripts. Don't run them.
+
+## The loop
+
+1. Write, then `npx hyperframes lint` after the first pass and after structural changes.
+2. `npx hyperframes check --json` and fix every error. While a lint error remains the layout and contrast audits don't run; "0 samples" means nothing was checked. Contrast failures carry a `suggestedColor`. A finding at a single sample (an entrance in flight) is info; a 3 s+ video with no visible change fails `sweep_static`.
+3. `npx hyperframes snapshot` and read the PNGs (under `.hyperframes/artifacts/snapshots/`): that is how you see the video. With sub-compositions, snapshot a midpoint of every scene; tiny unstyled content or a missing hero is a mount defect (`../hyperframes/references/format.md`).
+4. `npx hyperframes preview --background`, check the URL answers 200, give the person the project URL and wait, unless they asked for the file or for no stops. Passing checks alone is not a reason to render.
+5. When it is time to render (step 4): `npx hyperframes render --quality looks --output out.mp4` (`draft` while iterating, `delivery` for the final). Confirm the file is non-empty and its `ffprobe` duration matches the root `data-duration`, then look at decoded frames.
+
+"This element" or the current selection: `npx hyperframes preview --context --json --context-fields selection`; `no-selection` means ask them to click it.
+
+## Edit the timeline
+
+These are the edits Studio itself makes, so the result stays in Studio's shape.
+
+- `timeline --json` lists clips with absolute `absStart`/`absEnd`, owning `file` and the `#id` ref the edit commands take (`timeline ids` stamps missing ids).
+- `timeline move|trim|split|set|duplicate|delete <ref> … --plan --json` previews one edit; run it again without `--plan`. `--start`, `--end`, `--duration` set one edge or the length.
+- An edit is refused when the clip would overlap a neighbour (`--overwrite`, or move the neighbour first) or end past its composition: raise the root's `data-duration` first. No command changes `data-duration`.
+- Several edits at once: a JSON file such as `[{"verb": "move", "ref": "#outro", "time": "9"}]`, then `timeline apply plan.json --json`. Each run prints a `receipt`; save it and `timeline undo receipt.json` reverts it.
+
+<!-- history (trial): remove this block together with the command -->
+
+## Project history
+
+Every write is kept and can be undone. At the start of a turn, `npx hyperframes history begin --who <you> --label "<plan>"`, then `history --since mine --who <you>` to see what the person changed; build on their edits. A check failed or they say it got worse: `history undo --who <you>`, never hand-edit back. End the turn with `history end`.
+
+<!-- /history (trial) -->
+
+## Render where
+
+| Need | Command |
+| --- | --- |
+| Local | `render --quality looks --output out.mp4` (`draft`, `delivery`) |
+| Reproducible container | `render --docker --strict --output out.mp4` |
+| Batch from variables | `render --batch rows.json --output "renders/{name}.mp4"` |
+| Hosted, no local Chrome or FFmpeg | `cloud render` (`references/cloud.md`) |
+| Your own AWS or GCP | `lambda render`, `cloudrun render` (`references/lambda.md`, `references/cloudrun.md`) |
+
+A 30 s film renders in a minute or two: run it in the foreground. Detach only a render longer than your tool's timeout (`HYPERFRAMES_RENDER_DETACHED=1`, its own group, output to a log) and wait with `until grep -qE 'Render (complete|failed)' render.log; do sleep 5; done`, never `pgrep -f`, which matches its own loop and waits until the tool times out.
+
+After a verified render, send one `feedback --rating`, plus a report for anything the person asked for that HyperFrames can't do, unless telemetry is off: `references/feedback.md`.
+
+## When a command fails
+
+| Symptom | Fix |
+| --- | --- |
+| Chrome missing or won't start | `npx hyperframes browser ensure`; `doctor --json` always exits 0, gate on `.ok` |
+| A heavy page isn't ready in time | Raise `--timeout` on `check` or `snapshot` |
+| Unusual codec looks blank | Keep `--proxy` on (the default) |
+| Render slow on Linux | The summary's second line says `screenshot` + `software gpu`: the slow path |
+| `capture` fails or writes `BLOCKED.md` | Take nothing from its partial files; retry into a new `-o` folder |
+| Disk tight | `clean --dry-run`, then `clean`; never delete `.hyperframes` (it holds history) |
+
+## References
+
+Read the row before running its command.
+
+| Commands | Read |
+| --- | --- |
+| `init`, `capture`, `skills` | `references/init-and-scaffold.md` |
+| `lint`, `check`, motion sidecars, `snapshot` | `references/lint-validate-inspect.md` |
+| `compare`, `grade-compare`, `render --batch` | `references/compare-and-batch.md` |
+| `beats` | `references/beats.md` |
+| `preview`, `play`, `render`, `publish`, Studio context | `references/preview-render.md` |
+| `doctor`, `browser` | `references/doctor-browser.md` |
+| `auth`, `cloud`, template variables | `references/cloud.md` |
+| `lambda`, `cloudrun` | `references/lambda.md`, `references/cloudrun.md` |
+| `info`, `upgrade`, `compositions`, `timeline`, `docs`, `usage`, telemetry | `references/upgrade-info-misc.md` |
+| `--strict` flags, run ids, `clean`, shader lint, JSON paths | `references/conventions.md` |
+| `keyframes` | `../hyperframes/references/motion.md` (Seeing motion) |
diff --git a/.claude/skills/hyperframes-cli/references/beats.md b/.claude/skills/hyperframes-cli/references/beats.md
new file mode 100644
index 0000000..d4ee40e
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/beats.md
@@ -0,0 +1,15 @@
+# Generate a project beat grid
+
+Use `hyperframes beats` when an existing HyperFrames project needs the Studio-compatible beat file for its music track. This is a CLI utility, not a complete video workflow.
+
+```bash
+npx hyperframes beats
+npx hyperframes beats ./my-video
+npx hyperframes beats ./my-video --json
+```
+
+The project must contain a local music `<audio>` source. Mark it with `data-timeline-role="music"`; an id containing `music`, `bgm`, or `soundtrack` is also recognized. The command decodes that file with ffmpeg, tracks its beats, and writes `beats/<audio-relative-path>.json`.
+
+If the track has no steady beat, the command fails and writes nothing. If ffmpeg is missing, run `npx hyperframes doctor`.
+
+For a whole video cut to a music track, see `/hyperframes` → `references/film.md`.
diff --git a/.claude/skills/hyperframes-cli/references/cloud.md b/.claude/skills/hyperframes-cli/references/cloud.md
new file mode 100644
index 0000000..c886e5c
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/cloud.md
@@ -0,0 +1,163 @@
+# cloud — HeyGen-hosted rendering (zero-infra)
+
+`hyperframes cloud render` renders a composition on HeyGen's managed cloud. The CLI zips the project, uploads it, runs the render on HeyGen's infrastructure (Chromium + FFmpeg), and downloads the finished video. Nothing to deploy, and no Chrome/FFmpeg/AWS to manage; you pay per credit.
+
+```bash
+npx hyperframes auth login            # one-time sign-in
+npx hyperframes cloud render          # zip, upload, render, download
+```
+
+## When to use managed cloud, Lambda, Cloud Run, or local
+
+- **`hyperframes render`** (local): fastest iteration loop, use while authoring.
+- **`hyperframes cloud render`**: zero-infra. HeyGen runs the render and you pay per credit. This is the default answer to "render in the cloud" when you don't want to manage Chrome/FFmpeg/AWS.
+- **`hyperframes lambda render`**: bring-your-own-AWS distributed rendering with chunked parallelism. Only worth it when you've already invested in AWS (see `lambda.md`).
+- **`hyperframes cloudrun render`**: bring-your-own-GCP distributed rendering through Cloud Run and Workflows. Use only when GCP ownership is explicit (see `cloudrun.md`).
+
+## Authentication
+
+Cloud rendering needs a HeyGen credential, stored at `~/.heygen/credentials` (`0600`) and shared with the [`heygen` CLI](https://github.com/heygen-com/heygen-cli): sign in with one and the other picks up the session.
+
+```bash
+npx hyperframes auth login              # OAuth 2.0 + PKCE, opens the browser
+npx hyperframes auth login --api-key    # CI/headless: hidden prompt, or pipe: echo "$HEYGEN_API_KEY" | ... --api-key
+npx hyperframes auth status             # active credential source, identity, billing snapshot
+                                        #   exit 0 = signed in and verified; exit 1 = not signed in,
+                                        #   or the credential was rejected — signed-out exit 1 is the
+                                        #   normal offline state (scripts: `auth status || echo offline`),
+                                        #   not a command failure
+npx hyperframes auth refresh            # force-refresh an OAuth token before a long job
+npx hyperframes auth logout             # clear the stored credential
+```
+
+Credential resolution order (first match wins): `HEYGEN_API_KEY`, then `HYPERFRAMES_API_KEY`, then `HEYGEN_ACCESS_TOKEN` (an OAuth token a host app injects; never refreshed or saved), then `~/.heygen/credentials`. Point at a different backend with `HEYGEN_API_URL` (default `https://api.heygen.com`).
+
+## The render pipeline
+
+`cloud render` runs end-to-end:
+
+1. **Resolve the project**: a local directory (default `.`), or skip the upload with `--asset-id` / `--url`.
+2. **Auto-detect aspect ratio** from the entry HTML's `data-width`/`data-height`.
+3. **Zip** the project (same ignore set as `hyperframes publish`, including `.hyperframesignore`).
+4. **Upload** the zip through the direct-to-S3 asset flow, yielding an `asset_id`.
+5. **Submit** the render to `POST /v3/hyperframes/renders`, yielding a `render_id`.
+6. **Poll** `GET /v3/hyperframes/renders/{id}` until it completes or fails (skip with `--no-wait`).
+7. **Download** the signed video URL to disk.
+
+## Archive size and `.hyperframesignore`
+
+The direct-upload limit is 200 MB. HyperFrames automatically excludes root-level `renders/` and `snapshots/`, along with its existing development exclusions such as `.git`, `node_modules`, `dist`, `.next`, `coverage`, and dotfiles. Add project-specific gitignore-style rules to `<project>/.hyperframesignore` when other generated or intermediate assets are not required at render time. The same rules affect `hyperframes publish`.
+
+Inspect the exact archive without authenticating, uploading, spending credits, or starting a render:
+
+```bash
+npx hyperframes cloud render <project> --dry-run --json
+```
+
+The result reports compressed `size_bytes`, `file_count`, the 200 MB limit, and the ten largest included files.
+
+When a cloud upload reports a size-limit error, agents must use this workflow:
+
+1. Run the dry-run command and inspect the largest included files and directories.
+2. Classify obvious generated outputs first: old renders, extra snapshot/contact-sheet directories, caches, exported previews, and source media used only to produce final assets.
+3. Before excluding anything else, search `src`, `href`, `url()`, `data-composition-src`, JavaScript strings, manifests, and variable-driven paths across every HTML, CSS, and JavaScript entry.
+4. Preserve existing `.hyperframesignore` comments and rules. Add the narrowest verified-unneeded root-relative paths; prefer an exact directory or file over a broad wildcard.
+5. Never ignore `index.html`, the selected composition, mounted sub-compositions, fonts, images, audio, video, scripts, or manifests merely because they are large. Never ignore all of `assets/`.
+6. Rerun dry-run until the archive is below the limit, then run `npx hyperframes check`. Remember that `check` sees the source directory, so it cannot prove a dynamically computed asset path remains in the filtered archive; the reference audit is still required.
+
+Example:
+
+```gitignore
+# Additional generated verification passes
+/snapshots2/
+/snapshots3/
+
+# Master used only to produce the final background clips
+/assets/bg-pattern.mp4
+```
+
+Rules support comments, globs, and negation. A later rule can override a default, for example `!/snapshots/` when that directory intentionally contains render inputs.
+
+## Render options
+
+| Flag                   | Default                     | Meaning                                                                                                                        |
+| ---------------------- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| `--fps`                | `30`                        | Frames per second, 1–240.                                                                                                      |
+| `--quality`            | `standard`                  | `draft`, `standard`, or `high`.                                                                                                |
+| `--format`             | `mp4`                       | `mp4`, `webm`, or `mov` (webm/mov carry alpha).                                                                                |
+| `--resolution`         | `1080p`                     | `1080p` or `4k` (4k billed at 1.5×).                                                                                           |
+| `--aspect-ratio`       | auto                        | `16:9`, `9:16`, or `1:1`. Auto from a local project's `data-width`/`data-height`; defaults to `16:9` for `--asset-id`/`--url`. |
+| `--composition` / `-c` | `index.html`                | Entry HTML file inside the zip.                                                                                                |
+| `--output` / `-o`      | `renders/<render_id>.<ext>` | Local download destination.                                                                                                    |
+| `--dry-run`            | off                         | Build and inspect a local project zip without authenticating, uploading, or rendering.                                         |
+
+```bash
+npx hyperframes cloud render . \
+  --composition compositions/intro.html \
+  --output ./renders/intro.mp4
+
+npx hyperframes cloud render --quality high --fps 60
+```
+
+`--resolution 4k` cannot combine with `--format webm`/`mov`: the 4k supersampling path has no alpha channel. Render 4k as mp4, or render alpha at native resolution.
+
+## Templates and variables
+
+Cloud rendering supports [composition variables](../../hyperframes/references/format.md#variables): declare `data-composition-variables` on the composition, then fill them at render time.
+
+```bash
+npx hyperframes cloud render --variables '{"title":"Q4 Recap","theme":"dark"}'
+npx hyperframes cloud render --variables-file ./vars.json
+npx hyperframes cloud render --variables '{"title":"Q4 Recap"}' --strict-variables
+```
+
+For a **local project** the CLI validates `--variables` against the declared schema _before_ uploading. For `--asset-id`/`--url` the schema lives server-side, so mismatches surface as a `hyperframes_project_invalid` API error.
+
+**Upload once, re-render many** is the idiomatic template loop: render a local project to get its `asset_id`, then re-submit against that asset with new values (no re-zip, no re-upload).
+
+```bash
+npx hyperframes cloud render ./card-template                              # note the asset_id printed on upload
+npx hyperframes cloud render --asset-id asst_abc123 --variables '{"name":"Ada"}'
+npx hyperframes cloud render --asset-id asst_abc123 --variables '{"name":"Linus"}'
+```
+
+For high-volume personalized batches, both self-managed paths provide JSONL fan-out: AWS Lambda (`lambda.md`) and Google Cloud Run (`cloudrun.md`). The full variables schema (types, declarative bindings, sub-composition overrides, precedence) lives in [`/hyperframes` format.md](../../hyperframes/references/format.md#variables).
+
+## Fire-and-forget and webhooks
+
+By default the CLI blocks, polls, and downloads. Combine `--no-wait` (submit and exit with just the `render_id`) with `--callback-url` (HTTPS webhook on terminal status) for true fire-and-forget:
+
+```bash
+npx hyperframes cloud render --callback-url https://example.com/hf-hook --no-wait
+#    Poll later with: hyperframes cloud get hfr_def456
+```
+
+| Flag              | Meaning                                             |
+| ----------------- | --------------------------------------------------- |
+| `--no-wait`       | Submit and exit immediately; print the `render_id`. |
+| `--callback-url`  | HTTPS webhook fired when the render terminates.     |
+| `--callback-id`   | Opaque tracking ID echoed in webhook payloads.      |
+| `--poll-interval` | Poll cadence in seconds (default `2`).              |
+| `--max-wait`      | Max poll duration in minutes (default `60`).        |
+
+## Managing renders
+
+```bash
+npx hyperframes cloud list                 # recent renders (--limit, --token, --all)
+npx hyperframes cloud get hfr_def456       # full detail + short-lived signed video_url
+npx hyperframes cloud delete hfr_def456    # soft-delete (--no-confirm to skip the prompt)
+```
+
+`video_url` and `thumbnail_url` are short-lived presigned URLs, so re-fetch with `cloud get` rather than caching them.
+
+## Safe retries
+
+The CLI transparently retries a `401` by force-refreshing the OAuth token and replaying. That's harmless for reads, but the zip upload (`POST /v3/assets`) is **not** idempotent: a blind retry creates a duplicate asset and bills twice. Pass `--idempotency-key` so retries are safe:
+
+```bash
+npx hyperframes cloud render . --idempotency-key "$(uuidgen)"
+```
+
+The key is forwarded to both upload and submit (the server scopes idempotency per-endpoint, so reusing one value is safe). Use any opaque string in `[A-Za-z0-9_:.-]`, 1–255 chars.
+
+Full flag reference: docs `/deploy/cloud` and `/packages/cli#hyperframes-cloud`.
diff --git a/.claude/skills/hyperframes-cli/references/cloudrun.md b/.claude/skills/hyperframes-cli/references/cloudrun.md
new file mode 100644
index 0000000..3ddf539
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/cloudrun.md
@@ -0,0 +1,62 @@
+# Cloud Run rendering on Google Cloud
+
+Use `hyperframes cloudrun` only when the user explicitly wants self-managed Google Cloud infrastructure. It deploys Cloud Run, Workflows, and Cloud Storage. For a managed default use `hyperframes cloud`; for AWS use `hyperframes lambda`.
+
+## Prerequisites
+
+- `gcloud` is authenticated and the target project has billing enabled.
+- Terraform 1.5 or newer is on `PATH`.
+- Docker or permission to use Cloud Build is available.
+
+## Lifecycle
+
+```bash
+npx hyperframes cloudrun deploy --project <gcp-project> --region us-central1
+npx hyperframes cloudrun sites create ./project
+npx hyperframes cloudrun render ./project --width 1920 --height 1080 --wait
+npx hyperframes cloudrun progress <execution-name>
+npx hyperframes cloudrun destroy --project <gcp-project>
+```
+
+`deploy` enables the required Google APIs, builds or accepts a container image, applies the bundled Terraform module, and stores the resulting coordinates in `~/.hyperframes/cloudrun-state.json`. Use deploy flags such as `--image`, `--repo`, `--cpu`, `--memory`, `--max-instances`, and `--timeout` only when the infrastructure needs those overrides.
+
+`sites create` uploads a content-addressed project archive for reuse by `render-batch`; pass its `--site-id` to that command to skip the batch upload. Single `cloudrun render` currently resolves the project from its directory and does not consume `--site-id`. Both render commands require `--width` and `--height`; supported output formats are `mp4`, `mov`, `png-sequence`, and `webm`. Use `--output-resolution 4k` to supersample an authored composition without changing its layout dimensions.
+
+Common render flags are `--fps 24|30|60`, `--quality draft|standard|high`, `--codec h264|h265` for MP4, `--chunk-size`, `--max-parallel-chunks`, `--target-chunk-frames`, `--render-id`, `--output-key`, `--wait`, and `--wait-interval-ms`. Use `--json` for machine-readable output.
+
+For a variable-driven single render:
+
+```bash
+npx hyperframes cloudrun render ./template \
+  --width 1920 --height 1080 \
+  --variables-file ./alice.json \
+  --strict-variables \
+  --wait
+```
+
+Use exactly one of `--variables` and `--variables-file`. Read [Variables](../../hyperframes/references/format.md#variables) for the composition-side contract.
+
+## JSONL batches
+
+```bash
+npx hyperframes cloudrun render-batch ./template \
+  --batch ./users.jsonl \
+  --width 1920 --height 1080 \
+  --max-concurrent 10 \
+  --site-id <site-id> \
+  --json
+```
+
+Each nonblank line must contain an `outputKey`; `variables` is optional:
+
+```json
+{ "outputKey": "renders/alice.mp4", "variables": { "name": "Alice" } }
+```
+
+- `--max-concurrent` defaults to `50` and limits in-flight executions. `--max-parallel-chunks` separately limits chunks inside one render.
+- `--dry-run` parses the file and prints `would-start` rows without starting executions.
+- The template uploads once unless `--site-id` is supplied.
+- Per-entry start errors remain visible and make the command exit nonzero.
+- Do not rely on `--strict-variables` for `cloudrun render-batch`: the current command accepts the flag but does not validate batch rows. Validate the JSONL variable objects against the composition schema before dispatch. The strict gate does work for single `cloudrun render`.
+
+`render` without `--wait` returns an execution name. Use `cloudrun progress <execution-name>` until it succeeds, then verify the reported GCS output. `destroy` removes the Terraform-managed stack and its scratch bucket; preserve any deliverables that must outlive the stack.
diff --git a/.claude/skills/hyperframes-cli/references/compare-and-batch.md b/.claude/skills/hyperframes-cli/references/compare-and-batch.md
new file mode 100644
index 0000000..7e2a2e0
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/compare-and-batch.md
@@ -0,0 +1,105 @@
+# Compare and batch rendering
+
+Use these commands for deliberate visual comparison or variable-driven template output. They do not replace `lint`, `check`, final preview approval, or output verification.
+
+## Contents
+
+- [Compare projects or variants](#compare-projects-or-variants)
+- [Compare color grades](#compare-color-grades)
+- [Batch template renders](#batch-template-renders)
+
+## Compare projects or variants
+
+Render the same timestamp from two or more project directories or HTML files into one labeled contact sheet:
+
+```bash
+npx hyperframes compare <path-a> <path-b> [<path-c> ...] \
+  --at <seconds> \
+  --labels baseline,candidate \
+  --out compare.png \
+  --cols 2
+```
+
+Useful options:
+
+- `--at <seconds>` selects the shared comparison time.
+- `--labels <a,b,...>` labels cells in input order.
+- `--out <file>` chooses the sheet path.
+- `--cols <n>` controls its grid.
+- `--json` returns machine-readable results.
+- `--timeout <ms>` changes the per-variant render-ready timeout.
+
+One sheet accepts at most 16 variants. Extra inputs are truncated with a warning; split larger comparisons into several runs.
+
+`compare` is a visual review surface, not a quality gate. Run it when checking a baseline against a candidate, comparing implementation variants, or verifying that a repair preserves the intended look. Inspect the generated image; do not treat command success as visual approval.
+
+## Compare color grades
+
+Create grade candidates from a source frame:
+
+```bash
+npx hyperframes grade-compare \
+  --for frame.png \
+  --grades grades.json \
+  --project . \
+  --out grade-compare.png
+```
+
+`grades.json` is an array of labeled HyperFrames grading blocks:
+
+```json
+[{ "label": "warm", "grading": { "adjust": { "temperature": 0.2, "contrast": 0.1 } } }]
+```
+
+Or compare explicit LUT files:
+
+```bash
+npx hyperframes grade-compare \
+  --for source.mp4 \
+  --luts warm.cube,cool.cube \
+  --out grade-compare.png
+```
+
+- `--for` accepts an image or a video. For video input, the command extracts the first frame.
+- Supply exactly one candidate source: `--grades <json>` or `--luts <a.cube,b.cube>`.
+- A neutral baseline is included by default; pass `--no-baseline` only when the baseline is not a useful reference.
+- The command accepts at most 16 candidate grades. With the default neutral baseline, the sheet may contain 17 cells. Extra candidates are truncated with a warning; split larger sets into several runs.
+- `--timeout <ms>` changes the render-ready timeout for the generated comparison composition.
+- Use `--json` for machine-readable output.
+
+This command helps select a grade. It does not apply the selected grade to the composition or replace `/media-use` provenance and LUT validation.
+
+## Batch template renders
+
+`render --batch` accepts either a JSON array of variable objects or an object with a `rows` array:
+
+```json
+{
+  "rows": [
+    { "name": "alpha", "headline": "Hello" },
+    { "name": "beta", "headline": "Welcome" }
+  ]
+}
+```
+
+Declare the variables in the composition, then run:
+
+```bash
+npx hyperframes render \
+  --batch rows.json \
+  --output "renders/{name}.mp4" \
+  --batch-concurrency 1 \
+  --strict-variables
+```
+
+Batch rules:
+
+- Do not combine `--batch` with `--variables` or `--variables-file`; each row is the variable set for one render.
+- If `--output` is omitted, the generated filename includes `{index}` so rows remain unique.
+- Output templates support `{index}` and row keys containing letters, numbers, `_`, `.`, or `-`. A placeholder value must be a string, number, or boolean; `null`, objects, and arrays are invalid. Missing placeholders and output collisions are errors.
+- `--batch-concurrency` defaults to `1`. Raise it conservatively because each render already uses workers.
+- `--batch-fail-fast` stops scheduling after the first failure. Without it, independent rows keep running and failures remain visible in the manifest.
+- `--strict-variables` validates every row before rendering and aborts before output when the declared variable contract is violated.
+- `--json` emits progress events suitable for agents and CI.
+
+The command writes `manifest.json` in the common output directory and updates it throughout the run. It records each row's variables, status, output, error, and timing. Completion means the manifest has no failed rows and every completed output exists, is non-empty, and has a plausible duration.
diff --git a/.claude/skills/hyperframes-cli/references/conventions.md b/.claude/skills/hyperframes-cli/references/conventions.md
new file mode 100644
index 0000000..982f995
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/conventions.md
@@ -0,0 +1,17 @@
+# CLI conventions for agents and CI
+
+- Prefer `--json` for agent and CI calls. Server-mode `render`, `preview`, and `play` do not provide ordinary JSON output; `preview --selection --json` and `preview --context --json` are query-mode exceptions.
+- `doctor --json` always exits zero. Gate on its payload:
+
+  ```bash
+  npx hyperframes doctor --json | jq -e '.ok' >/dev/null
+  ```
+
+- Non-TTY mode is automatic and scaffolds the centered blank. Pass `--example` only to start from a named example. Use `--non-interactive` to force flag-only mode on a TTY.
+- Use one `HYPERFRAMES_RUN_ID` for all commands in the same verification loop.
+- When disk is tight, run `npx hyperframes clean` (`--dry-run` to list first); it removes what dead renders left and idle caches that rebuild themselves, never outputs, sources or anything a running render uses. Write disposable QC frames to a temp dir, then remove only that owned directory. Managed snapshot runs retain the newest 10 plus current/latest/rendered evidence; active captures and runs younger than 24 hours are protected. Copy intentional before/after evidence outside managed storage before it ages out. Never delete `.hyperframes` wholesale: it also holds project history.
+- Use `--strict`, `--strict-all`, and `--strict-variables` when the corresponding warnings, variables, or CI conditions must gate the render.
+- For `shader_unbounded_cosine_pow`, clamp the cosine to `[0, 1]` before `pow(1 - cosine, exponent)`; a lower-only `max` is insufficient. Then preview and export on the affected GPU to confirm. Lint only recognizes static shader expressions, and software rendering can miss hardware-specific invalid pixels.
+- JSON paths redact the home directory as `$HOME`; do not try to reverse the redaction.
+- When a hosted cloud project approaches or exceeds the 200 MB upload limit, use `cloud render --dry-run --json` and follow the `.hyperframesignore` investigation in `references/cloud.md`. Never ignore an asset merely because it is large.
+- Never render merely because checks pass. Pause at the final preview and wait for approval.
diff --git a/.claude/skills/hyperframes-cli/references/doctor-browser.md b/.claude/skills/hyperframes-cli/references/doctor-browser.md
new file mode 100644
index 0000000..7b01899
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/doctor-browser.md
@@ -0,0 +1,80 @@
+# doctor, browser
+
+Environment diagnosis and bundled-Chrome management. Run these first when a render or preview fails.
+
+## doctor
+
+```bash
+npx hyperframes doctor
+npx hyperframes doctor --json     # CI / agent output (always exit 0; gate on payload `ok`)
+```
+
+Runs independent checks and reports each as ok/warn/fail:
+
+- **Version** — installed CLI vs latest on npm (hints upgrade when stale)
+- **Node.js** — ≥ 22 required
+- **CPU**, **Memory**, **Disk** — host resources
+- **Environment** — env vars that affect the renderer
+- **FFmpeg** / **FFprobe** — found, version, codecs
+- **Chrome** — bundled or system, version, path
+- **Docker** / **Docker running** — required only for `render --docker`
+- **/dev/shm** — inside containers only
+
+Run `doctor` first when:
+
+- `render` fails with a Chrome or FFmpeg error.
+- `preview` opens but the composition fails to load.
+- A fresh machine has never run HyperFrames.
+
+Common issues:
+
+- **Missing FFmpeg** — install via `brew install ffmpeg` (macOS) or your package manager, or [configure existing binaries](#configure-ffmpeg-without-a-package-manager).
+- **Missing bundled Chrome** — run `npx hyperframes browser ensure`.
+- **Low memory** — close other Chromes, reduce `--workers`, or use `--quality draft`.
+- **Chrome exits instantly inside an agent sandbox (macOS)** — seatbelt-style sandboxes
+  (e.g. codex `workspace-write`) block Chromium's Mach port bootstrap
+  (`MachPortRendezvous`; openai/codex#21292), so every Chrome — bundled, system, or
+  headless shell — dies at startup. This is a host-level block, not a HyperFrames or
+  Chrome install problem: compile checks and audio still pass, only rendering is
+  unavailable. State the blocker and deliver the checked composition; render outside the
+  sandbox or via `render --docker` / cloud rendering where available. **Do not build a
+  substitute rasterizer** (magick/PIL/SVG frame pipelines) — on a blocked-browser host
+  the deliverable IS the checked composition plus this blocker note, and rendering is
+  handed to `--docker`, cloud, or the user. Write your final summary the moment the
+  blocker is identified, BEFORE any optional fallback work: a later session failure must
+  not erase the report of work already done.
+
+### Configure FFmpeg without a package manager
+
+Get FFmpeg and FFprobe binaries for your operating system and architecture from the [FFmpeg download page](https://ffmpeg.org/download.html). Both must be executable. You can use them without Homebrew or a system-wide installation:
+
+```bash
+export HYPERFRAMES_FFMPEG_PATH="/absolute/path/to/ffmpeg"
+export HYPERFRAMES_FFPROBE_PATH="/absolute/path/to/ffprobe"
+npx hyperframes doctor --json
+```
+
+Set both variables in the environment that launches HyperFrames. On Windows, point them at `ffmpeg.exe` and `ffprobe.exe` using your shell's environment-variable syntax. A configured path takes precedence over automatic discovery; a missing configured file is reported as missing.
+
+Alternatively, put the binaries in `.hyperframes/bin/ffmpeg` and `.hyperframes/bin/ffprobe` (`.exe` on Windows), then run HyperFrames from that project's directory. Discovery checks `PATH` before this project-local directory, so use the environment variables when you need a particular build.
+
+Verify the **FFmpeg** and **FFprobe** entries in `doctor --json` report `ok: true` and the expected paths. To gate only these encoding dependencies with `jq`:
+
+```bash
+npx hyperframes doctor --json | jq -e \
+  '[.checks[] | select(.name == "FFmpeg" or .name == "FFprobe")] | length == 2 and all(.ok)'
+```
+
+The report's top-level `ok` also includes optional tools such as Docker and local voice providers; those failures do not require installing them for a local video render. Check Chrome separately with the browser commands below.
+
+## browser
+
+```bash
+npx hyperframes browser ensure    # find or download the pinned Chrome
+npx hyperframes browser path      # print the browser executable path (for scripting)
+npx hyperframes browser clear     # remove the cached Chrome download
+```
+
+Manage the Chrome build HyperFrames uses for rendering. The pinned version exists because pixel output drifts across Chrome versions — using the bundled build keeps rendered output reproducible across machines.
+
+Use `path` to embed the binary in scripts: `$(npx hyperframes browser path)`.
diff --git a/.claude/skills/hyperframes-cli/references/feedback.md b/.claude/skills/hyperframes-cli/references/feedback.md
new file mode 100644
index 0000000..76e69ed
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/feedback.md
@@ -0,0 +1,14 @@
+# Feedback reports
+
+After verifying a successful render, send one feedback report unless telemetry is disabled or the user opted out:
+
+```bash
+npx hyperframes feedback --rating <0-10> --comment "<specific result or friction>"
+```
+
+Keep clean-run feedback concise. For any bug or friction, capture a **reproduction packet** before submitting; do not send only a symptom summary. Include the rerunnable command (relative to the project directory — feedback is submitted to a public channel, so do **not** paste absolute paths, home-directory prefixes, or user/machine identifiers), expected versus actual behavior, exact error (also strip absolute paths from stack traces — keep basename + line, drop the leading directory), whether output completed/fell back/failed, workaround, and repro-project status. For a rating ≤ 7 that describes a visual defect (black frame, flicker, corrupt output, wrong frame, blank output, other visual anomaly), also include a `COMPOSITION_STRUCTURE:` block — a privacy-preserving structural anatomy (element census + attribute presence + timeline shape) so maintainers can pattern-match against known bug families without the composition ZIP. Agents auto-fill this via the composition-census helper; the human user does not fill it by hand. If the issue did not reproduce again, say so and still include the last failing command and logs. Use `--file-issue` only with consent: it publishes a minimal reproduction to a public URL. The required packet format and privacy warning live in `references/preview-render.md`.
+
+Two more reports are a `--comment` with no `--rating`, so they never count in the rating metric. Send them unless telemetry is disabled or the user opted out, under the same privacy rules:
+
+- **Missing feature.** Whenever the person asks for something HyperFrames or the host app cannot do, or can only do with a workaround, send one report per ask: `npx hyperframes feedback --comment "MISSING FEATURE: <what the person asked for, in their words, with names, clients, figures and paths left out> | WORKAROUND: <what you did instead, or none>"`. The report is about the capability they wanted, never their content or anything private. A catalog search that found nothing goes to `--search-miss` instead.
+- **Host app.** When `HYPERFRAMES_CLIENT` is set, the CLI is running inside a host app. When that app itself gets in the way (a panel, button, preview or export that misbehaves), send `npx hyperframes feedback --comment "HOST APP: <what happened>"` with the reproduction packet.
diff --git a/.claude/skills/hyperframes-cli/references/init-and-scaffold.md b/.claude/skills/hyperframes-cli/references/init-and-scaffold.md
new file mode 100644
index 0000000..22cf29e
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/init-and-scaffold.md
@@ -0,0 +1,78 @@
+# init, capture, skills
+
+<!-- registry-items: allow=blank,landscape-4k,portrait-4k,square-4k,media-use -->
+
+Scaffolding commands. Use these instead of creating files by hand — they set up the right file structure, copy media, run transcription, and install AI coding skills.
+
+## init
+
+```bash
+npx hyperframes init my-video                                    # centered blank (TTY: wizard)
+npx hyperframes init my-video --example warm-grain               # pick an example
+npx hyperframes init my-video --resolution portrait
+npx hyperframes init my-video --video clip.mp4                   # with video file
+npx hyperframes init my-video --audio track.mp3                  # with audio file
+npx hyperframes init my-video --tailwind                         # Tailwind v4 browser runtime
+npx hyperframes init my-video --non-interactive                  # CI — flag-only, same blank
+```
+
+**Default depends on TTY**: in a terminal, the CLI prompts for example/options (default: centered blank). Outside a TTY (CI, agents, piped output) it auto-switches to non-interactive and scaffolds that blank. Pass `--example` only to start from a named example. Pass `--non-interactive` to force flag-only mode on a TTY.
+
+Templates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph`. (The closed set of `hyperframes:example` items in `registry/registry.json` plus the bundled `blank` template. `hyperframes catalog` does not list examples — its `--type` takes only `block` or `component` — so this list has no live equivalent and is checked by `bun run lint:skills`.)
+
+Other useful flags:
+
+- `--resolution` — preset: `landscape` (1920×1080), `portrait` (1080×1920), `landscape-4k`, `portrait-4k`, `square` (1080×1080), `square-4k`. Aliases: `1080p`, `4k`, `uhd`, `1080p-square`, `4k-square`.
+- `--skill=<slug>` — record the owning skill (e.g. `hyperframes`) in `hyperframes.json`, so every later render of this project — re-renders, `npm run render`, `--batch` — is attributed to it on anonymous telemetry without re-passing the flag. You rarely pass it by hand.
+- `--skip-skills` — **temporarily ignored**: `init` always checks AI coding skills against GitHub while the skills.sh registry catches up. To opt out (CI/tests), set the `HYPERFRAMES_SKIP_SKILLS=1` env var instead.
+- `--skip-transcribe` — don't auto-transcribe `--audio` / `--video` with Whisper.
+- `--model`, `--language` — Whisper model / language for the auto-transcription.
+
+**Tailwind** (`--tailwind`): the scaffold pins the Tailwind v4 browser runtime, not Studio's Tailwind v3 setup.
+
+- Keep the pinned runtime; never swap in `cdn.tailwindcss.com`. Renders wait for `window.__tailwindReady` before frame 0. For offline or locked-down renders, compile to CSS and ship the stylesheet.
+- Theme and custom utilities go in `<style type="text/tailwindcss">` with `@theme` and `@utility`. No v3 `@tailwind base/components/utilities`, no `tailwind.config.js`; `@config` and `@plugin` abort the browser compile.
+- Write complete class tokens in the HTML. The runtime only sees classes it can scan, so never build a render-critical class name at seek time (`bg-${color}-500`); vary items through CSS variables (`style="--i: 2"`) or data variants.
+- Tailwind is for static layout and style; timing stays in GSAP or another seekable runtime.
+
+When `--audio` or `--video` is supplied, `init` transcribes the file with Whisper. For voice/model selection see the `media-use` skill.
+
+## capture
+
+```bash
+npx hyperframes capture https://stripe.com                  # scaffold from a website
+npx hyperframes capture https://linear.app -o linear-video  # custom output directory
+npx hyperframes capture https://example.com --json          # JSON output for agents
+npx hyperframes capture https://example.com --skip-assets   # skip image/SVG download
+npx hyperframes capture https://example.com --skip-vision   # skip optional AI captions
+npx hyperframes capture https://example.com --max-screenshots 12
+npx hyperframes capture https://example.com --timeout 60000 # page-load timeout in ms
+npx hyperframes capture https://example.com --capture-budget 90000 # post-navigation budget
+```
+
+Captures a live URL as an editable HyperFrames project: screenshots become layered scenes, assets are downloaded locally, and the result is a normal project you can `lint` / `preview` / `render`. Use this when the user supplies a URL as the starting point for a video.
+
+`--timeout` bounds page navigation; `--capture-budget` is the separate cooperative budget for work
+after navigation (fonts, assets, vision, and contact sheets). The latter is not a hard wall-clock
+watchdog and cannot interrupt native work already in flight. An outer caller deadline is therefore a
+third, distinct timeout. An outer caller timeout leaves the capture result unknown; it does not prove
+HyperFrames hung or that the navigation timeout should be increased. Preserve the last phase and
+classify the boundary that fired. `--skip-vision` disables only optional AI image captioning.
+
+For agents, use `--json`. The result includes `ok`, warnings, and `lastPhase`. The command also emits
+stable `HYPERFRAMES_CAPTURE_PHASE` records so a watchdog can report the last started, completed, or
+degraded phase without retaining sensitive payloads.
+
+Treat a non-zero exit, JSON `ok: false`, or an output `BLOCKED.md` as a **hard stop**. Do not render,
+build, or infer brand/design data from partial files in a blocked capture. A successful capture may
+degrade an optional phase within budget, but its structural output still has to be usable. Exit zero and file existence alone are not semantic success: require the current
+invocation's JSON `ok: true`, no `BLOCKED.md`, and artifacts usable for the video. Run each retry
+into a fresh output directory; never merge or reuse a blocked attempt's partial output.
+
+## skills
+
+```bash
+npx hyperframes skills    # install HyperFrames skills for AI coding tools
+```
+
+One-time setup that adds the HyperFrames skill pack (/hyperframes with its references, /hyperframes-cli, /hyperframes-registry, /media-use, /figma, /slideshow, /remotion-to-hyperframes) to the local AI coding environment so agents follow the framework conventions. Re-run after major HyperFrames upgrades.
diff --git a/.claude/skills/hyperframes-cli/references/lambda.md b/.claude/skills/hyperframes-cli/references/lambda.md
new file mode 100644
index 0000000..4d1d5cb
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/lambda.md
@@ -0,0 +1,185 @@
+# Lambda rendering on AWS
+
+Use `hyperframes lambda` when the user explicitly wants self-managed AWS infrastructure or needs distributed rendering. It wraps `@hyperframes/aws-lambda` and AWS SAM.
+
+## Contents
+
+- [Choose Lambda or local rendering](#choose-lambda-or-local-rendering)
+- [Prerequisites](#prerequisites)
+- [Deploy](#deploy)
+- [Upload a reusable site](#upload-a-reusable-site)
+- [Render one composition](#render-one-composition)
+- [Render a JSONL batch](#render-a-jsonl-batch)
+- [Inspect progress](#inspect-progress)
+- [Destroy the stack](#destroy-the-stack)
+- [IAM policies](#iam-policies)
+- [State, cost, and cleanup](#state-cost-and-cleanup)
+
+The basic lifecycle is:
+
+```bash
+npx hyperframes lambda deploy
+npx hyperframes lambda render ./my-project --width 1920 --height 1080 --wait
+npx hyperframes lambda destroy
+```
+
+## Choose Lambda or local rendering
+
+- **Local `render`** — dev-loop iteration, single host, anything under a few minutes at 1080p.
+- **`lambda render`** — long videos, 4K, large parallel batches, or anything where local Chrome would time out / exhaust RAM. Pay-per-invocation, no idle cost.
+
+For one-off short renders Lambda is not worth the deploy overhead.
+
+## Prerequisites
+
+- AWS credentials configured (env vars, `~/.aws/credentials`, SSO, or IMDS).
+- AWS SAM CLI on `PATH`.
+- `bun` on `PATH` (builds the Lambda handler ZIP).
+
+## Deploy
+
+```bash
+npx hyperframes lambda deploy \
+  --stack-name=hyperframes-prod \
+  --region=us-east-1 \
+  --concurrency=8 \
+  --memory=10240
+```
+
+Builds `packages/aws-lambda/dist/handler.zip` and SAM-deploys the stack (Lambda + Step Functions + S3 + IAM). Idempotent — re-running on the same `--stack-name` is a no-op when nothing changed. Writes `<cwd>/.hyperframes/lambda-stack-<name>.json` so later subcommands don't need to call `describe-stacks`.
+
+| Flag              | Default                         | Description                            |
+| ----------------- | ------------------------------- | -------------------------------------- |
+| `--stack-name`    | `hyperframes-default`           | CloudFormation stack name              |
+| `--region`        | `AWS_REGION` env or `us-east-1` | AWS region                             |
+| `--profile`       | `AWS_PROFILE` env               | Named AWS credentials profile          |
+| `--concurrency`   | `8`                             | Lambda reserved concurrency            |
+| `--chrome-source` | `sparticuz`                     | `sparticuz` or `chrome-headless-shell` |
+| `--memory`        | `10240`                         | Lambda memory in MB                    |
+| `--skip-build`    | off                             | Reuse existing `handler.zip`           |
+
+## Upload a reusable site
+
+```bash
+npx hyperframes lambda sites create ./my-project
+# → siteId: abc1234deadbeef0  (stable across re-runs of the same tree)
+
+npx hyperframes lambda render ./my-project --site-id=abc1234deadbeef0 ...
+```
+
+Tars + uploads `<projectDir>` to S3 with a content-addressed key. Returns a stable `siteId` you can reuse — re-renders of the same tree skip the upload.
+
+## Render one composition
+
+```bash
+npx hyperframes lambda render ./my-project \
+  --width 1920 --height 1080 --fps 30 --format mp4 \
+  --chunk-size 240 --max-parallel-chunks 16 \
+  --wait
+```
+
+Starts a Step Functions execution. Returns immediately with a `renderId` unless `--wait` is set, in which case the CLI blocks until completion and streams per-chunk progress lines. Add `--json` for machine-parseable output.
+
+| Flag                    | Description                                                                                                                                                                                                                                                                                                                                                   |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--width` / `--height`  | Output dimensions in pixels                                                                                                                                                                                                                                                                                                                                   |
+| `--output-resolution`   | Supersampling preset (engages Chrome `deviceScaleFactor`) — `landscape` / `landscape-4k` / `portrait` / `portrait-4k` / `square` / `square-4k`, plus aliases (`1080p`, `4k`, `uhd`, `hd`, `1080p-portrait`, `4k-portrait`, `1080p-square`, `4k-square`). Use this to render an authored-at-1080p composition at 4K without re-laying-out — see footgun below. |
+| `--fps`                 | `24` / `30` / `60`                                                                                                                                                                                                                                                                                                                                            |
+| `--format`              | `mp4` / `mov` / `png-sequence` / `webm` (default `mp4`)                                                                                                                                                                                                                                                                                                       |
+| `--codec`               | `h264` / `h265` (mp4 only)                                                                                                                                                                                                                                                                                                                                    |
+| `--quality`             | `draft` / `standard` / `high`                                                                                                                                                                                                                                                                                                                                 |
+| `--chunk-size`          | Frames per chunk (default `240`)                                                                                                                                                                                                                                                                                                                              |
+| `--max-parallel-chunks` | Max concurrent chunks (default `16`)                                                                                                                                                                                                                                                                                                                          |
+| `--target-chunk-frames` | Cap frames per chunk and let the planner add chunks up to the parallel limit                                                                                                                                                                                                                                                                                  |
+| `--site-id`             | Reuse an existing site (skip upload)                                                                                                                                                                                                                                                                                                                          |
+| `--execution-name`      | Explicit Step Functions execution name                                                                                                                                                                                                                                                                                                                        |
+| `--output-key`          | Explicit final S3 object key                                                                                                                                                                                                                                                                                                                                  |
+| `--variables`           | Inline JSON object with composition variable values                                                                                                                                                                                                                                                                                                           |
+| `--variables-file`      | JSON file containing one composition variable object                                                                                                                                                                                                                                                                                                          |
+| `--strict-variables`    | Fail when supplied variables are undeclared or have the wrong type                                                                                                                                                                                                                                                                                            |
+| `--wait`                | Block until completion, stream progress                                                                                                                                                                                                                                                                                                                       |
+| `--wait-interval-ms`    | Poll cadence while waiting (default `5000`)                                                                                                                                                                                                                                                                                                                   |
+| `--json`                | Machine-parseable progress snapshot                                                                                                                                                                                                                                                                                                                           |
+
+**`--width` / `--height` footgun.** Setting `--width 3840 --height 2160` against a composition whose `data-width="1920"` silently produces 1080p — the runtime lays out the page at the composition's authored dimensions and the CLI flags are ignored for layout. To actually output at 4K, use `--output-resolution 4k` (supersamples via `deviceScaleFactor`). The CLI now prints a warning when CLI dimensions disagree with the composition's `data-width` / `data-height` and `--output-resolution` is not set; the warning is suppressed when `--json` is on or `index.html` isn't on disk (`--site-id` flows).
+
+For variable-driven templates, declare the schema in the composition and pass either `--variables` or `--variables-file`, never both. `--strict-variables` checks local project input before any render starts. Also read [Variables](../../hyperframes/references/format.md#variables).
+
+## Render a JSONL batch
+
+Use `render-batch` to upload one template once and start one Step Functions execution per nonblank JSONL line:
+
+```bash
+npx hyperframes lambda render-batch ./template \
+  --batch ./users.jsonl \
+  --width 1920 --height 1080 \
+  --max-concurrent 10 \
+  --strict-variables \
+  --json
+```
+
+Each line must be an object with a non-empty `outputKey`. Choose unique keys to prevent outputs from overwriting one another. `variables` and `executionName` are optional:
+
+```json
+{
+  "outputKey": "renders/alice.mp4",
+  "variables": { "name": "Alice" },
+  "executionName": "alice-video"
+}
+```
+
+Batch rules:
+
+- The project is uploaded once unless `--site-id` reuses an earlier upload.
+- `--max-concurrent` defaults to `50` and limits in-flight render executions. `--max-parallel-chunks` separately limits chunks inside each render.
+- `--strict-variables` checks every entry, reports all variable issues, and aborts before AWS calls.
+- `--dry-run` performs no upload or AWS render call. Every manifest row becomes `would-invoke`.
+- The emitted manifest preserves input order and records `inputLine`, `outputKey`, `executionArn`, and `status` (`started`, `would-invoke`, or `failed-to-start`), plus an error when applicable.
+- A per-entry start failure does not hide other rows. Human-output mode exits nonzero when a row fails to start. In `--json` mode the current CLI prints the manifest and exits zero, so gate on every row's `status`, not the process code alone. Dispatch success is not render completion; inspect each execution with `progress`.
+
+## Inspect progress
+
+```bash
+npx hyperframes lambda progress hf-render-abcd1234
+npx hyperframes lambda progress arn:aws:states:us-east-1:...:execution:...
+```
+
+Prints one snapshot — overall percent, frames rendered, Lambda invocations, accrued cost, and any errors. Accepts a bare `renderId` (resolved against the stack's state-machine ARN) or a full SFN execution ARN.
+
+## Destroy the stack
+
+```bash
+npx hyperframes lambda destroy
+```
+
+Calls `sam delete --no-prompts` and drops the local state file. **The render S3 bucket is configured `Retain`** so it survives stack destruction — empty + delete it via the AWS console / CLI if you want the storage back.
+
+### Non-retryable errors
+
+A subset of failures the Step Functions state machine short-circuits instead of running through its 4× 15-min retry budget. `progress` surfaces these immediately with the error class name; do not re-issue `lambda render` blindly when you see one.
+
+- **`ChromeBinaryUnavailableError`** — `@sparticuz/chromium` returned an empty/missing executable path. A prior chunk hit `Sandbox.Timedout` mid-extraction and the warm instance is wedged until the execution environment recycles. Remedy: bump a Lambda env var (forces a new exec env) or `lambda deploy` again. Not a transient render failure; retries will burn budget on the same wedged instance.
+- **`FFMPEG_VERSION_MISMATCH`** / **`PLAN_HASH_MISMATCH`** — planner / executor version drift. Re-deploy.
+
+## IAM policies
+
+Print or validate the minimum IAM permissions the CLI needs.
+
+```bash
+npx hyperframes lambda policies user                                  # inline policy for an IAM user
+npx hyperframes lambda policies role                                  # { TrustRelationship, InlinePolicy }
+npx hyperframes lambda policies validate ./infra/iam/hf-deploy.json   # CI gate
+```
+
+`validate` reads a JSON policy doc and checks the union of its `Effect: Allow` actions (expanding `s3:*` / `s3:Get*` / `*` wildcards) against the CLI's required action set. Missing actions print to stderr; the command exits non-zero. Wire it into CI to catch policy drift before the next deploy fails.
+
+The default action set is deliberately broad (`Resource: "*"`) because CloudFormation creates new ARNs on every adopter's first deploy. Tighten `Resource` after that first run if security posture requires it.
+
+## State, cost, and cleanup
+
+`hyperframes lambda` stores per-stack metadata under `<cwd>/.hyperframes/lambda-stack-<name>.json` (bucket name, state-machine ARN, region). Not secret, but AWS-account-identifying. Commit it to a repo or `.gitignore` it per your workflow.
+
+- `lambda destroy` removes the SAM stack but **leaves the S3 bucket** (`Retain`). Delete it manually if you want the storage back.
+- Lambda billing is per-invocation + duration. `progress` reports the accrued cost.
+- `--concurrency` caps parallel Lambda invocations — keep it aligned with your account quota.
+- `--chunk-size` and `--max-parallel-chunks` trade off per-chunk overhead against parallelism; larger chunks reduce coordinator overhead, smaller chunks parallelize more aggressively.
diff --git a/.claude/skills/hyperframes-cli/references/lint-validate-inspect.md b/.claude/skills/hyperframes-cli/references/lint-validate-inspect.md
new file mode 100644
index 0000000..51a9b3a
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/lint-validate-inspect.md
@@ -0,0 +1,155 @@
+# lint, check, snapshot
+
+Use `lint` for fast static feedback while iterating. Use `check` as the required final gate: it reruns the same linter, then audits runtime, layout, motion, and contrast in one browser session. Do not chain a redundant standalone `lint` immediately before `check`. `snapshot` is the standalone utility for capturing still frames and zoomed crops. `validate`, `inspect`, and `layout` still run but are deprecated: `check` covers all of them in one invocation.
+
+## Discipline (motion-heavy work)
+
+When the composition is animation-driven, run the checks before you reach for `preview` or `render`:
+
+- Run `lint` after the first HTML pass for early feedback. It is an iteration aid, not a separate final gate.
+- Run `check --snapshots` at the first full pass: the overview frames and per-finding crops show you what the auditor saw.
+- Look at the PNGs before tuning automated warnings: your eye catches what the auditor misses, and the auditor catches what your eye misses.
+- Treat layout errors as defects unless a snapshot proves the layering is intentional, in which case mark it with `data-layout-allow-overflow` / `data-layout-allow-overlap` / `data-layout-allow-occlusion` / `data-layout-allow-caption-zone` (caption band only).
+- State motion intent in a `*.motion.json` sidecar so `check` verifies it automatically (entrances firing under seek, stagger order, in-frame, liveness). This is the closest automated proxy for "watch the MP4" and catches render-vs-preview bugs the eye misses (see **Motion verification** below).
+
+## lint
+
+```bash
+npx hyperframes lint                  # current directory
+npx hyperframes lint ./my-project     # specific project
+npx hyperframes lint --verbose        # info-level findings
+npx hyperframes lint --json           # machine-readable
+```
+
+Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`). Catches missing `data-composition-id`, overlapping tracks on the same `data-track-index`, unregistered timelines, and GSAP/CSS transform conflicts.
+
+`<video>`/`<audio>` work at any nesting depth, including inside a `compositions/*.html` sub-composition or a wrapper `<div>`: the runtime discovers media with a flat DOM query and seeks/decodes it wherever it lives (`packages/core/src/runtime/{media,startResolver}.ts`). After a render, `snapshot` each scene that has a video and confirm the panel actually shows footage (a blank/black panel where a clip should play is a real bug, not a placeholder).
+
+## check
+
+```bash
+npx hyperframes check                    # current directory: the full browser gate
+npx hyperframes check ./my-project       # specific project
+npx hyperframes check --json             # agent-readable envelope {ok, browserSkipped, lint, runtime, layout, motion, contrast, craft, hdr, snapshots}
+npx hyperframes check --snapshots        # also write overview frames (annotated) + per-finding crops
+npx hyperframes check --samples 15       # denser timeline sweep (default 9)
+npx hyperframes check --at 1.5,4,7.25    # explicit hero-frame timestamps
+npx hyperframes check --at-transitions   # also sample every tween start/end boundary
+npx hyperframes check --tolerance 4      # allowed overflow px before reporting (default 2)
+npx hyperframes check --timeout 30000    # initial render-ready + navigation minimum in ms (defaults: 3000 / 10000)
+npx hyperframes check --no-contrast      # skip the WCAG audit while iterating
+npx hyperframes check --strict           # exit non-zero on warnings too (default: only errors)
+```
+
+One command, one Chrome boot. `check` runs the linter first and skips the browser entirely when lint reports errors. When the browser never ran (lint errors, a linter crash, or a browser launch failure), `browserSkipped` is `true` and the `layout`, `motion` and `contrast` sections are empty, not clean. Otherwise it loads the bundled composition once, wires runtime listeners before navigation, and sweeps one seek grid running every audit per sample:
+
+- **Runtime**: JavaScript console errors, unhandled exceptions, failed network requests (media-file `ERR_ABORTED` filtered out), HTTP 4xx/5xx.
+- **Layout**: text extending outside its container or the canvas, text clipped by its own box, held text overlaps and occlusion (with an approximate covered fraction), children escaping clipping containers. Text under a transparent `<video>` (a `remove-background` cutout) is measured per word against the frame's alpha: partial cover is info with the share hidden, a word 80% hidden or two neighbouring words each half hidden is an error, and a frame that cannot be read falls back to opaque with a `video_alpha_unread` note.
+- **Motion**: `*.motion.json` sidecar assertions against the same seeked timeline (see below).
+- **Contrast**: WCAG AA on visible text, sampled at 5 grid points. Failures are **errors** and each finding carries the sampled fg/bg colors, measured vs required ratio, and a suggested compliant color in the same palette direction, so most contrast fixes need no screenshot at all.
+- **Craft**: warnings only, even under `--strict` (a film may break one on purpose), measured on an 8 fps sweep of the whole film and skipped under `--range`. Each message names the fix and the reference to read.
+  - `line_unread`: a reading-size line (≥ 30 px tall at 1080) on screen under its floor: 0.4 s for 1–2 words, otherwise ¾ of 0.5 s + 0.3 s a word (3 words 1.05 s, 6 words 1.73 s); the film's last line needs 2 s. Edges are re-measured to ~0.01 s. Captions-track text and `data-layout-ignore` are exempt.
+  - `dead_stretch`: more than 3 s where the `keepsMoving` classifier sees nothing change. The final 3 s and any time a `data-hold` element is on screen are exempt; it stays quiet when `sweep_static` fires or a whole-composition `keepsMoving` assertion sets the limit.
+  - `text_below_floor`: text under 2.6% of the frame's short side (28 px on 1080) held 0.5 s or more, one finding per file listing every element.
+  - `first_frame_empty`: frame 0 paints nothing but the background (no text, image, video, canvas or svg); it is the thumbnail on social players.
+  - `film_silent`: a film over 15 s with no unmuted `<audio>` or audible `<video>`.
+
+Every finding carries a selector, the element's `data-*` identity, the composition source file, a bbox, and the sample time: jump straight from the JSON to the HTML you must edit and re-run.
+
+**Severity is persistence-aware.** A dynamic issue observed at a single grid sample (an entrance/exit transient) demotes to info and never gates. Issues held across samples gate the exit code, a held `content_overlap` is an error, and a held, partially-visible `canvas_overflow` breaching ≥5% of the canvas promotes to warning. Coordinate-frame findings (`escaped_container`, `panel_out_of_canvas`, `connector_detached`) flag geometry computed in one frame but rendered in another — an element far outside its offset parent, a painted panel stuck across the canvas edge, a connector line detached from every node. Text drawn into a `<canvas>` has no DOM box, so `canvas_overflow` cannot see it; `canvas_content_at_edge` warns when a canvas's pixels show sharp content (drawn text, hard shapes) along the frame edge — mark intentional full-bleed art (particles, photos) with `data-layout-allow-overflow`. If a 3s+ composition shows no visible change across every sample, `check` fails with `sweep_static`: a frame that never changes while a GSAP timeline or tween, or a CSS or Web animation, holds the same time without ever finishing means the seek is not driving the page, so it refuses to pass. Any other frame that never changes (a still title card, an audio-only advance) is a warning that `--strict` fails; a composition meant to be still can take `data-no-timeline` on its root to skip it. The fingerprint includes per-element opacity, so opacity-only reveals (code typing, staggered fades) count as motion — but only while they're still in flight at the sampled times. The classic trap is a reveal that completes early and then holds a static frame for the rest of the duration: every sample lands on the settled state and check warns that nothing on screen moved (`--strict` fails it). Spread the reveal across the timeline or give the hold a real next action (the cursor heading to the next control, the camera's next move); don't bolt on a slow drift, a blinking caret or a loop just to appease the check.
+
+**Escape hatches** (mark intent in the HTML, then re-run):
+
+- `data-layout-allow-overflow` — overflow is intentional (entrance/exit travel).
+- `data-layout-allow-overlap` — deliberate text layering (e.g. a demo cursor label over a heading). Applies only to the marked text block; it is not inherited. Mark the specific layering participant, never a scene/root wrapper, so unrelated descendant collisions remain auditable.
+- `data-layout-allow-occlusion` — an element is meant to cover text.
+- `data-layout-allow-caption-zone` — intentional lower-third / caption-band copy under `--caption-zone`. Applies to the marked element and every descendant (`closest`); silences only `caption_zone_collision` (not overflow/overlap/occlusion). Prefer the narrowest wrapper that owns the intentional band copy.
+- `data-layout-ignore` — decorative element that should never be audited.
+- `data-hold` — deliberate stillness: while this element is on screen, `dead_stretch` does not count the time.
+
+**Opt-in pipeline gates** (used by orchestrators; off by default):
+
+```bash
+npx hyperframes check --caption-zone "x0=0;y0=.82;x1=1;y1=1;severity=error;seek=.25,1"
+npx hyperframes check --frame-check     # media (img/svg/video/canvas) out-of-frame detection
+```
+
+`--caption-zone` takes fractional band geometry (`x0/y0/x1/y1` required, 0-1 fractions of the composition's own canvas, portrait included) with optional `severity` and comma-separated `seek` fractions; it flags a text element's DOM box (`getBoundingClientRect`) that overlaps the band. Waive intentional lower-third copy with `data-layout-allow-caption-zone` on the element or its nearest wrapper (see Escape hatches). `--frame-check` reports media elements breaching the canvas beyond `max(120px, 6% of the min canvas dimension)`.
+
+**Fixing contrast errors** — thresholds are 4.5:1 for normal text, 3:1 for large text (24px+, or 19px+ bold). The finding's `suggestedColor` already picks the nearest compliant color in the right direction (brighten on dark backgrounds, darken on light); apply it or adjust within the palette family, then re-run `check`.
+
+## Motion verification (`*.motion.json` sidecar)
+
+`check` verifies **motion intent** against the same seeked timeline the renderer uses — the closest automated proxy for "render the MP4 and watch it". It catches render-vs-preview bugs layout sampling can't: an entrance reveal the seek lands past, a broken stagger order, an element drifting off-frame mid-tween, a frozen shot.
+
+Drop a `*.motion.json` sidecar next to the composition (matching the html basename when several compositions share a dir). `check` discovers it automatically — no flag, no authoring-framework changes. With no sidecar, `check` behaves exactly as before.
+
+```json
+{
+  "duration": 6,
+  "assertions": [
+    { "kind": "appearsBy", "selector": "#headline", "bySec": 0.5 },
+    { "kind": "before", "a": "#headline", "b": "#cta" },
+    { "kind": "staysInFrame", "selector": ".card" },
+    { "kind": "keepsMoving", "withinSelector": ".scene" }
+  ]
+}
+```
+
+| Assertion                      | Fails (code) when                                                                                                           |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------- |
+| `appearsBy(selector, bySec)`   | not visible (opacity ≥ 0.5) by `bySec` — `motion_appears_late`                                                              |
+| `before(a, b)`                 | `a` does not first appear strictly before `b` — `motion_out_of_order`                                                       |
+| `staysInFrame(selector)`       | once visible, its box leaves the canvas — `motion_off_frame`                                                                |
+| `keepsMoving(withinSelector?)` | a fully-static window exceeds `maxStaticSec` (default 2s); the film's final 3 s (an end card) never count — `motion_frozen` |
+
+`duration`, `withinSelector`, and `maxStaticSec` are optional. Findings are **errors by default** and appear in the same human and `--json` output as layout findings. A selector that matches nothing is reported as `motion_selector_missing` rather than silently passing — a typo'd selector fails loudly. Use this in the feedback loop instead of eyeballing the render: assert what the motion is supposed to do, and let `check` tell you when the seek diverges from intent.
+
+## snapshot
+
+```bash
+npx hyperframes snapshot                       # 5 key frames as PNG
+npx hyperframes snapshot ./my-project          # specific project
+npx hyperframes snapshot --frames 10           # evenly-spaced N frames
+npx hyperframes snapshot --range 3:5 --frames 8 # 8 frames within root-timeline seconds 3–5
+npx hyperframes snapshot --composition intro --frames 8 # 8 frames within this data-composition-id
+npx hyperframes snapshot --review              # beat sheet, seam strips, phone sheet
+npx hyperframes snapshot --review --json       # same, with paths and times as JSON
+```
+
+Still PNGs. Each run writes `.hyperframes/artifacts/snapshots/<id>/` unless `--output` is set. `snapshot` is the standalone capture; `check --snapshots` is the gate.
+
+One of `--at`, `--range START:END` (seconds), or `--composition <data-composition-id>` (not a CSS selector). `--frames` defaults to 5. Range and composition sample just before the end and add no extra end frame; `--at` adds one unless `--no-end`.
+
+`--review` picks the frames that show a film over time. Scenes are the composition's top-level timed clips and sub-composition hosts, as `timeline` lists them (captions and audio excluded); `--composition` scopes to one. It writes `review-beats.jpg` (each scene at its start + 0.3 s and at its middle, and each timed `data-beat="name"` element at its start + 0.3 s, labelled with time and id), `review-seam-NN.jpg` (frames at −0.2, −0.1, 0, +0.1, +0.2 s around every cut) and `review-phone.jpg` (the beat frames 360 px wide, to judge legibility at phone size), beside the `beat-*.png` and `seam-*.png` stills. With fewer than two scenes the beats spread evenly. `--json` prints `{ok, outputDir, frames[{path,time,role,label}], contactSheets, review{window, scenes, beats, seams[{time,from,to,times,paths,sheet}], sheets, notes}}`.
+
+### Keep verification clean and inspect the actual pixels
+
+Inspect full-resolution frames in the opening 30 seconds, each mounted scene, and every reported problem interval. Contact sheets locate moments; use close-ups to judge thin edges, glass, particles, and WebGL geometry. Check the live preview and decoded render at matching times. Canvas shader defects can survive a successful DOM/layout audit. Record the browser/GPU and capture path when results differ across machines; isolate the failing material or pass before changing rendering defaults.
+
+Managed snapshot storage keeps the newest 10 run folders, the newest evidence for the current revision and retained rendered revisions, and the latest snapshot. Live captures and folders younger than 24 hours are also preserved. Automatic cleanup removes whole eligible old UUID folders, including contact sheets and descriptions; arbitrary `--output` folders are untouched. Save intentional before/after evidence outside this managed storage.
+
+For disposable checks, allocate a temporary output folder and remove that folder after inspecting it. Use `hyperframes clean --dry-run` to inspect broader cleanup. `clean --snapshots` explicitly discards snapshot evidence; use it only when that evidence is no longer needed. Never recommend removing all of `.hyperframes`, which also contains project history and other state.
+
+### Zooming into a reported finding
+
+`hyperframes check --snapshots` already writes a `finding-NN-<code>.png` crop for every error finding that carries a bbox, but the same zoom is available standalone once you know what to look at:
+
+```bash
+npx hyperframes check --snapshots               # reports a finding, e.g. content_overlap on "#cta"
+npx hyperframes snapshot --zoom "#cta"           # crop the element to verify the defect, at 3x density
+npx hyperframes snapshot --zoom "100,50,400,300" --zoom-scale 2   # or an exact pixel region
+# fix the composition HTML, then re-check:
+npx hyperframes check
+```
+
+`--zoom` takes a CSS selector or an exact `x,y,w,h` pixel region and always produces a real high-density crop (a raised `deviceScaleFactor`, never CSS zoom or a viewport resize), so the composition's layout — and its render determinism — is untouched. A selector matching nothing is a loud error, not a silent full-frame fallback, and a frame where the target has no visible box (collapsed or animated off-canvas) is skipped with a note instead of written as a sliver.
+
+## Deprecated: validate, inspect, layout
+
+All three keep working, print a deprecation notice on stderr, and mark `_meta.deprecated: true` in `--json`. Their functionality lives in `check`:
+
+- `validate` (runtime errors + contrast) → `check` (contrast failures are now gating errors with fix payloads, not warnings).
+- `inspect` / `layout` (layout sweep + motion sidecar) → `check` (same flags: `--samples`, `--at`, `--at-transitions`, `--tolerance`, `--strict`).
+
+Migrate scripts by replacing the sequence with the single `check` invocation; scaffolded projects' `npm run check` already points there.
diff --git a/.claude/skills/hyperframes-cli/references/preview-render.md b/.claude/skills/hyperframes-cli/references/preview-render.md
new file mode 100644
index 0000000..9c25b3d
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/preview-render.md
@@ -0,0 +1,199 @@
+# preview, play, render, publish
+
+Serve, render, and share commands.
+
+## preview
+
+```bash
+npx hyperframes preview                   # foreground on a TTY; persistent in agent shells
+npx hyperframes preview --background      # explicit persistent session
+npx hyperframes preview --foreground --json # ready JSON, then remain attached
+npx hyperframes preview --background --port 4567 # agent-safe custom port (default 3002)
+npx hyperframes preview --selection --json # print the current Studio selection and exit
+npx hyperframes preview --context --json  # print compact agent context from Studio
+```
+
+Hot-reloads on file changes. Opens Studio in the browser automatically — the full timeline editor, where the user can play the video and edit anything by hand before rendering. This is the review surface, not just a viewer.
+
+When handing a project back to the user, use the Studio project URL, not the source `index.html` path:
+
+```text
+http://localhost:<port>/#project/<project-name>
+```
+
+Use the actual port and project directory name; treat `index.html` as source-code context, not the preview surface. For example, after `npx hyperframes preview --background --port 3017` in `codex-openai-video`, report `http://localhost:3017/#project/codex-openai-video`.
+
+Two ways a handed URL turns out dead — check both before handing it back: the URL is missing its `#project/<project-name>` hash (Studio loads but has no project to open), or the server is not actually running. Bare `preview` automatically creates a managed persistent session in a non-TTY agent shell; `--background` remains the clearest explicit form. Verify the printed URL returns HTTP 200, keep it alive for the whole review, and stop it explicitly with `npx hyperframes preview --stop` afterward. Use the printed URL as-is: HyperFrames URL-encodes project names that contain route metacharacters.
+
+### Agent context from Studio selection
+
+`preview --context` and `preview --selection` are the agent bridge into a running Studio session. They do **not** start a new server; they find the active preview server for the current project, read agent-useful state from Studio, print it, and exit.
+
+Use it when the user gives deictic edit instructions like "change this", "move the selected element", "make the card I clicked bigger", or "fix the current selection":
+
+```bash
+npx hyperframes preview --context --json --context-fields selection
+```
+
+The compact context payload includes the selected element's source file, composition path, current timeline time, `data-hf-id` / selector target, bounding box, text content, and a thumbnail URL for the selected element. Prefer `selection.target.hfId` when present; fall back to `selection.target.selector` only when no stable `data-hf-id` exists. If `selection` is `null`, inspect `errors.selection.code` (for example, `no-selection`).
+
+Keep agent context small by asking only for the slices you need:
+
+```bash
+npx hyperframes preview --context --json --context-fields selection
+npx hyperframes preview --context --json --context-fields lint
+npx hyperframes preview --context --json --context-fields selection,lint
+```
+
+Use `--context-detail full` only when the edit genuinely needs heavy selection fields such as `computedStyles`, `inlineStyles`, `dataAttributes`, or editable text-field metadata:
+
+```bash
+npx hyperframes preview --context --json --context-fields selection --context-detail full
+```
+
+`preview --selection --json` remains available when you explicitly want the full selected-element payload and do not need lint/server context.
+
+Failure modes:
+
+| Code                       | Meaning                                                                    |
+| -------------------------- | -------------------------------------------------------------------------- |
+| `preview-not-running`      | Start Studio first with `npx hyperframes preview --background`.            |
+| `ambiguous-preview-server` | Multiple matching Studio servers are open; rerun with one listed `--port`. |
+| `preview-port-mismatch`    | The requested `--port` is not one of the matching Studio servers.          |
+| `no-selection`             | Studio is open, but the user has not selected an element yet.              |
+| `selection-unavailable`    | The running preview server does not expose selection context cleanly.      |
+
+If there is no selection, ask the user to click the target element in Studio and rerun the command. If the server error lists candidate ports, rerun the same command with `--port <candidate>`. Do not infer the target from a screenshot when the CLI can give a stable element target.
+
+## play (lightweight player)
+
+```bash
+npx hyperframes play                  # current project, port 3003
+npx hyperframes play ./my-video       # specific project
+npx hyperframes play --port 8080      # custom port
+```
+
+`play` serves the composition through the embeddable `<hyperframes-player>` web component instead of the full Studio UI. Use it when sharing a preview link or when Studio is heavier than needed (no editor, no panels). `play` reports the plain `http://localhost:<port>` URL — no `#project/<name>` fragment (that's a Studio routing convention only `preview` uses).
+
+The player's `playback-rate` attribute (preview speed control, drives the timeline's `timeScale`) is clamped to `[0.1, 5]`; values `≤ 0` or non-finite fall back to `1`. This is a preview/playback knob, not a composition `data-*` attribute — authored motion still renders at `1×`.
+
+### Launching with an external browser (preview + play)
+
+Both `preview` and `play` can open inside an explicit Chromium-compatible browser instead of the OS default. Two use cases: isolated Chromium profile, or external CDP attach (DevTools / Playwright / Puppeteer / browser-MCP). **HyperFrames itself does not own CDP automation** — this only exposes the endpoint; whatever connects to it is your problem. Not to be confused with `--browser-gpu` (a `render` flag controlling Chrome GPU access during capture).
+
+| Flag                      | Type            | Notes                                                                                                                                                                                           |
+| ------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--browser-path`          | path            | Absolute path to a Chromium-compatible executable (`/usr/bin/chromium`, `/Applications/Brave Browser.app/...`).                                                                                 |
+| `--user-data-dir`         | path            | Chromium-compatible profile directory. Requires `--browser-path`. Use a throwaway directory to keep state out of your main profile.                                                             |
+| `--remote-debugging-port` | integer 1-65535 | Open a Chromium CDP endpoint on the given port. **Requires both** `--browser-path` and `--user-data-dir` — refused otherwise, so a CDP endpoint cannot leak into your main profile by accident. |
+
+```bash
+# Open preview in an isolated Chromium profile
+npx hyperframes preview --background --browser-path /usr/bin/chromium --user-data-dir /tmp/hf-profile
+
+# Same plus a CDP endpoint on :9222 (attach DevTools / Playwright / etc.)
+npx hyperframes play --browser-path /usr/bin/chromium --user-data-dir /tmp/hf-profile --remote-debugging-port 9222
+```
+
+Validation runs before any server boots, so an invalid value exits cleanly without leaving a listening socket behind.
+
+## render
+
+> Render after the user has reviewed in `preview` and approved, or when they asked for the file or to work without stopping. Passing checks alone is not a reason to render.
+
+```bash
+npx hyperframes render                                # standard MP4 from cwd
+npx hyperframes render ./my-video --output ./out.mp4  # render from outside the project dir
+npx hyperframes render --output final.mp4             # named output (no timestamp)
+npx hyperframes render -c compositions/intro.html -o intro.mp4  # render a specific sub-composition file
+npx hyperframes render --quality draft                # fast iteration
+npx hyperframes render --quality looks                # first real encode (default)
+npx hyperframes render --fps 60 --quality delivery    # final delivery
+npx hyperframes render --format webm                  # transparent WebM
+npx hyperframes render --docker                       # byte-identical
+```
+
+> Default `--output` is `renders/<project-name>_<YYYY-MM-DD>_<HH-MM-SS>.<ext>` — timestamped per render so successive runs don't clobber each other. Pass `--output` to get a stable name.
+
+| Flag                                 | Options                                                                                            | Default                        | Notes                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| ------------------------------------ | -------------------------------------------------------------------------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `dir` (positional)                   | path                                                                                               | cwd                            | Project directory. Omit to use current working directory.                                                                                                                                                                                                                                                                                                                                                                                     |
+| `--composition`, `-c`                | path to composition file                                                                           | `index.html`                   | Render a specific composition file (e.g. `compositions/intro.html`) instead of the project's `index.html`.                                                                                                                                                                                                                                                                                                                                    |
+| `--output`, `-o`                     | path                                                                                               | `renders/<project>_<ts>.<ext>` | Output path. Default is timestamped (`<project-name>_YYYY-MM-DD_HH-MM-SS.<ext>`).                                                                                                                                                                                                                                                                                                                                                             |
+| `--fps`                              | 24, 30, 60                                                                                         | 30                             | 60fps doubles render time                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `--quality`                          | draft, looks, delivery, standard, high                                                             | looks                          | `looks` is CRF 16 on the standard preset. `delivery` is `high`. draft for iterating                                                                                                                                                                                                                                                                                                                                                           |
+| `--format`                           | mp4, webm, mov, gif, png-sequence, hls                                                             | mp4                            | WebM/MOV render with transparency; gif for inline autoplay in GitHub PRs/READMEs/docs (two-pass palette encode, fps capped at 30 — prefer `--fps 15` — no audio, 1-bit transparency only, HDR falls back to SDR); png-sequence writes RGBA frames to a directory (AE/Nuke/Fusion ingest); hls writes an HLS VOD directory (master.m3u8 + video/audio playlists + MPEG-TS segments), SDR only, rejects `--gpu`, unavailable on lambda/cloudrun |
+| `--gif-loop`                         | 0-65535                                                                                            | 0                              | GIF loop count; `0` loops forever. Only with `--format gif`.                                                                                                                                                                                                                                                                                                                                                                                  |
+| `--hls-segment-seconds`              | 1-60                                                                                               | 4                              | HLS target segment length in whole seconds; also locks the encoder GOP so every segment starts on a keyframe. Only with `--format hls`.                                                                                                                                                                                                                                                                                                       |
+| `--resolution`                       | landscape, portrait, landscape-4k, portrait-4k, square, square-4k (+ aliases `1080p`, `4k`, `uhd`) | —                              | Supersample via Chrome `deviceScaleFactor`. Aspect ratio must match composition; scale must be an integer. Not with `--hdr`.                                                                                                                                                                                                                                                                                                                  |
+| `--crf`                              | 0-51                                                                                               | —                              | Encoder CRF (lower = higher quality). Mutually exclusive with `--video-bitrate`.                                                                                                                                                                                                                                                                                                                                                              |
+| `--video-bitrate`                    | e.g. `10M`, `5000k`                                                                                | —                              | Target bitrate. Mutually exclusive with `--crf`.                                                                                                                                                                                                                                                                                                                                                                                              |
+| `--hdr`                              | flag                                                                                               | off                            | Force HDR output even with SDR sources. MP4 only.                                                                                                                                                                                                                                                                                                                                                                                             |
+| `--sdr`                              | flag                                                                                               | off                            | Force SDR even with HDR sources.                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `--workers`                          | number or `auto`                                                                                   | auto                           | Each worker spawns Chrome (~256 MB)                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--docker`                           | flag                                                                                               | off                            | Reproducible output across hosts                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `--gpu`                              | flag                                                                                               | off                            | GPU-accelerated FFmpeg encoding (NVENC / VideoToolbox / VAAPI / QSV)                                                                                                                                                                                                                                                                                                                                                                          |
+| `--browser-gpu` / `--no-browser-gpu` | flag                                                                                               | auto (local), off (docker)     | Host GPU for Chrome/WebGL capture                                                                                                                                                                                                                                                                                                                                                                                                             |
+| `--browser-timeout`                  | seconds (0.001–86400)                                                                              | 60                             | Puppeteer page-navigation timeout for the entry HTML. Raise when heavy compositions (many videos / fonts / remote assets) can't reach `domcontentloaded` within the 60s default.                                                                                                                                                                                                                                                              |
+| `--quiet`                            | flag                                                                                               | off                            | Suppress verbose output                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| `--strict`                           | flag                                                                                               | off                            | Fail on lint errors                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| `--strict-all`                       | flag                                                                                               | off                            | Fail on lint errors AND warnings                                                                                                                                                                                                                                                                                                                                                                                                              |
+| `--variables`                        | JSON object                                                                                        | —                              | Override values declared in `data-composition-variables`                                                                                                                                                                                                                                                                                                                                                                                      |
+| `--variables-file`                   | path                                                                                               | —                              | JSON file with variable values (alternative to `--variables`)                                                                                                                                                                                                                                                                                                                                                                                 |
+| `--strict-variables`                 | flag                                                                                               | off                            | Fail render on undeclared keys or type mismatches in `--variables`                                                                                                                                                                                                                                                                                                                                                                            |
+
+**Quality guidance:** `draft` while iterating, `looks` (the default) for the first real encode, `delivery` for final delivery. `standard` and `high` still work.
+
+**Read the summary's second line.** After the output path and size, `render` prints the capture path, GPU mode, and per-stage timings, e.g. `beginframe capture · software gpu · compile 0.7s · setup 1.1s · capture 8.1s · encode 5.8s`. `capture` is the frame loop and `setup` is calibration plus session init; the capture path reads `a|b` when parallel workers diverged, and `encode (during capture)` means the streaming encoder overlapped the loop, so do not add it to the wall time. Local GPU `auto` (the default) requests BeginFrame. If the line still says `screenshot capture` with `software gpu` on Linux, a hint under it says BeginFrame did not run (needs chrome-headless-shell, no `--resolution` upscale). It only appears when the GPU was auto-probed, never under `--docker` or `--no-browser-gpu`, where software GL is the point. Heavy compositions can stall on software GL. Do not reach for `--debug` just to learn which path ran.
+
+**Parametrized renders:** the composition declares its variables on the `<html>` root with **`data-composition-variables`** — a JSON **array of declarations** (`{id, type, label, default}` per entry) that defines the schema. Scripts inside read the resolved values via `window.__hyperframes.getVariables()`. The CLI `--variables '{"title":"Q4 Report"}'` is a JSON **object keyed by id** that overrides those declared defaults for one render; missing keys fall through, so the same composition runs unchanged in dev preview and in production. Sub-comp hosts can also override per-instance with `data-variable-values`. See `../../hyperframes/references/format.md` for the full pattern.
+
+### feedback (report after rendering)
+
+After a render is verified, send one feedback line per task. This is the maintainers' primary signal — a render that finishes silently tells them nothing.
+
+```bash
+npx hyperframes feedback --rating 10                              # clean run, no notes
+npx hyperframes feedback --rating 6 --comment "bg <video> renders grey in multi-scene; worked around with --format png-sequence"
+```
+
+`--rating` is an integer from 0-10; `--comment` is free text. A `--comment` with no `--rating` is a ratingless report (`MISSING FEATURE:` and `HOST APP:` in `SKILL.md`) that never counts in the rating metric. Feedback is anonymous and attaches a `doctorSummary` (OS/Node/CPU/mem/ffmpeg) automatically, so don't repeat those fields. A clean run needs only a short result. Before sending any bug, workaround, or confusing behavior, collect this compact reproduction packet:
+
+```text
+REPRO COMMAND: <HF_*/PRODUCER_* env> npx hyperframes <exact command>   # run from the project directory; do NOT paste absolute paths
+EXPECTED / ACTUAL: <expected behavior> / <observed behavior and isolated trigger>
+EXACT ERROR: <verbatim error or warning; include frame/timestamp for visual defects>
+OUTCOME: <output correct | output corrupt | fallback succeeded | hard exit | command hung>
+WORKAROUND: <exact workaround, or none>
+COMPOSITION_STRUCTURE:
+  elements: video=<n> audio=<n> img=<n> svg=<n> canvas=<n> subComps=<n>
+  attributes: <comma-joined subset of clip-path, filter, mix-blend-mode, transform, mask, position:fixed, overflow:hidden, z-index, data-has-audio, data-duration, data-start, data-composition-src, background-image:url, mask-image:url — or "(none present)">
+  timeline: <flat | nested (<n> sub-comps)>; driver=<gsap | data-timeline | gsap+data-timeline | none>
+  delta: <what differs between the working workaround-render and the broken default render>
+  defect: <spatial location + frame index range, e.g. top-left / frames 0-30 — omit for non-visual defects>
+```
+
+`COMPOSITION_STRUCTURE:` is a privacy-preserving structural anatomy: counts + presence flags only, no file paths, no src URLs, no user text. It lets maintainers pattern-match the report against known bug families (e.g. "sub-comp mount + clip-path", "GSAP timeline + z-index") without receiving the composition ZIP. Required for any rating ≤ 7 that describes a visual defect (black frame, flicker, corrupt output, wrong frame, blank output, other visual anomaly); optional but appreciated on higher ratings. Agents on this skill can auto-fill the block by calling `buildCompositionCensus(html)` and `renderCompositionCensusBlock(census)` from `packages/cli/src/utils/compositionCensus.ts` against the composition HTML they already have access to — the human user does not fill this out by hand.
+
+**Feedback is submitted to a public channel — anonymize before sending.** Redact absolute paths (which leak user home directory + machine identity), any user or project names embedded in paths, secrets, and credentials. Path arguments in the command should stay relative to the project directory (`./renders/out.mp4`, not `/Users/<user>/Documents/…/out.mp4`; `.hf-tmp/`, not `/home/<user>/projects/<real-name>/.hf-tmp/`). Similarly strip absolute paths from `EXACT ERROR:` stack traces and log excerpts — keep the file basename and line number, drop the leading directory. Preserve flags and relevant `HF_*` / `PRODUCER_*` variables verbatim. If the failure no longer reproduces, include the last failing command and log excerpt (redacted the same way). Share a project link only when one is already available and safe to share.
+
+The `hyperframes feedback` command soft-warns when a non-10 `--comment` is missing `REPRO COMMAND:`, and when a rating-≤-7 visual-defect comment is missing `COMPOSITION_STRUCTURE:`. The warnings print above the submission ack and do not block — some legitimate reports (a one-line "cloudrun quota bumped yesterday, fine now") won't fit the mold. Fix the packet and rerun to silence them.
+
+Hit a reproducible bug? Add `--file-issue` (optionally `--dir <project>` and `--yes` for non-interactive shells) to also publish a minimal repro to a public URL and open a pre-filled GitHub `bug` issue draft for a maintainer to file. This publishes the project publicly, so it is opt-in and consent-gated; the issue is never auto-submitted.
+
+## publish
+
+```bash
+npx hyperframes publish              # upload current project privately, return stable URL
+npx hyperframes publish ./my-video   # specific project
+npx hyperframes publish --public     # allow anyone with the URL to view the claimed project
+npx hyperframes publish --yes        # skip the confirmation prompt (scripts/CI)
+```
+
+Uploads the project's source (HTML + assets) and returns a stable hosted URL that renders in the browser. A fresh publish is private by default and requires authentication plus access to view. Use `--public` to allow anyone with the URL to view the claimed project. Updating a project in place keeps its existing visibility: re-publishing without `--public` never turns a public project private. `--yes` only skips the confirmation prompt; it does not change visibility. A signed-out publish returns an authentication-required claim URL rather than a public playback URL. Lint findings are surfaced before upload but do not block.
+
+## Where to render, and skill attribution
+
+Use cloud rendering when the user wants hosted rendering without local Chrome, FFmpeg, or AWS. Use Lambda only when AWS ownership is a requirement. Use Cloud Run only when GCP ownership is a requirement. Read the matching reference before running any cloud path.
+
+Skill attribution is automatic — the examples above need no `--skill`. A project scaffolded with `hyperframes init --skill=<slug>` records its owning skill in `hyperframes.json`, and every later render inherits it on anonymous telemetry: re-renders, `npm run render`, and `--batch` alike. Pass `--skill=<slug>` explicitly only to stamp a project that was not scaffolded with one (its first render then persists it).
diff --git a/.claude/skills/hyperframes-cli/references/upgrade-info-misc.md b/.claude/skills/hyperframes-cli/references/upgrade-info-misc.md
new file mode 100644
index 0000000..1ea0272
--- /dev/null
+++ b/.claude/skills/hyperframes-cli/references/upgrade-info-misc.md
@@ -0,0 +1,142 @@
+# info, upgrade, compositions, timeline, docs, benchmark, telemetry, asset preprocessing
+
+Catch-all reference for commands that don't fit the main dev loop.
+
+## info
+
+```bash
+npx hyperframes info                   # project metadata
+npx hyperframes info ./my-video        # specific project
+npx hyperframes info --json
+```
+
+Prints **project** metadata: name, resolution, duration, element counts by type, track count, and total project size. Project-level — not environment. For environment health use `doctor`.
+
+## upgrade
+
+```bash
+npx hyperframes upgrade                # check + interactive prompt
+npx hyperframes upgrade --check        # check and exit, no prompt (agent-friendly)
+npx hyperframes upgrade --check --json # machine-readable: current / latest / updateAvailable
+npx hyperframes upgrade --yes          # print upgrade commands without prompting
+```
+
+Compares the installed CLI version against npm latest.
+
+`--project [dir]` bumps a **project's** pinned scripts instead of the global install: it rewrites every `npx …hyperframes@<version>…` in `<dir>/package.json` (default cwd) to npm-latest. Always invoke it unpinned (`npx hyperframes@latest upgrade --project`) — a project scaffolded on an old CLI stays frozen otherwise. `--project . --check` reports the delta without writing; add `--json` for `{ changed, from, to, path }`. Pass the dir explicitly whenever another flag follows `--project` — on older releases a bare `--project` consumes the next flag as its directory value.
+
+## timeline
+
+```bash
+npx hyperframes timeline [project-dir]          # tracks and clips as a table with bars
+npx hyperframes timeline [project-dir] --json
+```
+
+Reach for `timeline` instead of opening `index.html` and each `data-composition-src` file when you need to know what is on the timeline: which clips exist, when they start and end, what they play, and how loud. It reads the project's files statically (no browser).
+
+Text output is `timeline <N>s`, then one block per track kind (`video`, `graphics`, `captions`, `audio`) with one row per clip of that kind, ordered by absolute start:
+
+```
+graphics (2: 1 top-level, 1 nested)
+  |██████                                  | sec-connector 0-6.7s src=compositions/connector-morph.html
+  |██████████████                          | box 15.67-17.99s (local 0-2.32s) nested in sec-connector compositions/connector-morph.html
+audio (1)
+  | █                                      | vo 1.6-3.6s src=vo.mp3 vol=0.5 group=vo volume[0:0.2 2:1]
+```
+
+- The bar is 40 columns over the whole timeline. Times are seconds.
+- `src=`, `vol=`, `rate=` (playback rate, only when not 1), `group=` (audio group), and `<target>[t:v ...]` (automation lane points, `t` in seconds from the clip start) appear only when the clip has them.
+- The header counts every clip of that kind, nested ones included: `video (6: 2 top-level, 4 nested)`. The list is in absolute order, so the Nth row is the Nth clip of that kind on the main timeline. A clip inside a sub-composition prints its absolute start-end, then `(local <start>-<end>s)` (time inside that sub-composition), then `nested in <host row id> <file that declares it>`. Only one level of nesting is read: a sub-composition inside a sub-composition is listed as a row saying `children=unread`, and the clips inside it are not counted.
+- With no `data-duration`/`data-end`, a media row still gets a resolved length and says where it came from: `duration=media` means ffprobe measured the source (with playback start and rate applied); `duration=default` means an `img` got the 3s default; `duration=inferred` means a composition host summed its children; `pending: <reason>` (dotted bar, `duration` 0) means the source could not be probed (missing file, remote `src`, ffprobe error). A non-media leaf with nothing to resolve prints no source.
+- `lanes unreadable: ...` means the clip's `data-automation` or `data-fx-chain` did not parse; fix the attribute.
+
+`--json` prints `{ timeline: { duration, tracks: [{ kind, rows: [...] }] } }`. A track's `rows` are every clip of that kind, nested ones included, by `absStart`; read them, never only the top level. Each row has `id`, `kind` (tag), `trackKind`, `start`, `duration`, `end` (local to the row's own file), **`absStart`, `absEnd`, `file`** (main-timeline time and the project-relative file that declares the clip — use these, not `start`/`end`, to compare clips across nesting), `trackIndex`, `src`, `sourceFile`, `volume`, `lanes`, `playbackRate`, `audioGroup`, `durationAuthored`, **`durationSource`** (`"authored" | "media" | "default" | "inner" | "pending"`, or `null` for a non-media leaf with nothing to resolve), **`pendingReason`** (why nothing resolved; `null` unless `durationSource` is `"pending"`), `laneError`, **`index`** (the row's position in its kind's `rows`; a position, not an id), **`nested`** (declared inside a sub-composition), **`host`** (plain id of the row that hosts a nested clip, else `null`), **`hostRow`** (`{kind, index}` of that host row), and `children` (`{kind, index}` pointers to the sub-composition's clips, one level; every clip is already a full row in its kind's `rows`, so nothing needs following).
+
+### Query one-liners (jq, node fallback if jq is absent)
+
+```bash
+TL=$(npx hyperframes timeline --json)
+# 1. what plays at absolute time T=12.5
+jq --argjson t 12.5 '[.timeline.tracks[].rows[] | select(.absStart<=$t and .absEnd>$t)]' <<<"$TL"
+node -e 'const t=12.5,j=JSON.parse(require("fs").readFileSync(0,"utf8"));j.timeline.tracks.forEach(tr=>tr.rows.forEach(x=>{if(x.absStart<=t&&x.absEnd>t)console.log(x.id,x.file)}))' <<<"$TL"
+# 2. find a clip by id or src -> file, track, absStart, absEnd
+jq --arg q tsfx-pet2 '[.timeline.tracks[].rows[] | select(.id==$q or .src==$q)] | .[] | {file,trackKind,absStart,absEnd}' <<<"$TL"
+node -e 'const q="tsfx-pet2",j=JSON.parse(require("fs").readFileSync(0,"utf8"));j.timeline.tracks.forEach(tr=>tr.rows.forEach(x=>{if(x.id===q||x.src===q)console.log(x.file,x.trackKind,x.absStart,x.absEnd)}))' <<<"$TL"
+# 3. every clip of one kind, nested included, in absolute order
+jq --arg k video '.timeline.tracks[] | select(.kind==$k).rows[] | {id,absStart,absEnd}' <<<"$TL"
+node -e 'const k="video",j=JSON.parse(require("fs").readFileSync(0,"utf8"));j.timeline.tracks.find(t=>t.kind===k).rows.forEach(r=>console.log(r.id,r.absStart,r.absEnd))' <<<"$TL"
+# 4. gaps and overlaps within a kind (positive = gap, negative = overlap)
+jq --arg k video '(.timeline.tracks[] | select(.kind==$k).rows) as $r|[range(0;($r|length)-1)|{a:$r[.].id,b:$r[.+1].id,delta:($r[.+1].absStart-$r[.].absEnd)}]' <<<"$TL"
+node -e 'const k="video",j=JSON.parse(require("fs").readFileSync(0,"utf8"));const r=j.timeline.tracks.find(t=>t.kind===k).rows;for(let i=0;i<r.length-1;i++)console.log(r[i].id,r[i+1].id,r[i+1].absStart-r[i].absEnd)' <<<"$TL"
+# 5. the Nth clip of a kind by absolute start (N=2)
+jq --arg k video --argjson n 2 '.timeline.tracks[] | select(.kind==$k).rows[$n-1] | {index,id,absStart,file,nested}' <<<"$TL"
+node -e 'const k="video",n=2,j=JSON.parse(require("fs").readFileSync(0,"utf8"));const r=j.timeline.tracks.find(t=>t.kind===k).rows[n-1];console.log(r.index,r.id,r.absStart,r.file)' <<<"$TL"
+```
+
+## compositions, docs
+
+```bash
+npx hyperframes compositions           # list compositions in project
+npx hyperframes compositions --json
+npx hyperframes docs                   # list available topics
+npx hyperframes docs rendering         # print one topic inline in the terminal
+```
+
+`compositions` lists every `data-composition-id` in the project (including sub-comps) with duration, resolution, and element count.
+
+`docs` prints inline documentation **in the terminal** — it does not open a browser. Topics: `data-attributes`, `examples`, `rendering`, `gsap`, `troubleshooting`, `compositions`. Run without a topic to see the list.
+
+## benchmark
+
+```bash
+npx hyperframes benchmark              # run the preset matrix in current project
+npx hyperframes benchmark ./my-video   # specific project
+npx hyperframes benchmark --runs 5     # repeat each config N times (default 3)
+npx hyperframes benchmark --json
+```
+
+Renders the project with 5 preset configurations — `30fps draft 2w`, `30fps standard 2w`, `30fps high 2w`, `30fps standard 4w`, `60fps standard 4w` — and prints a comparison of render speed and output file size. Use it to find the fastest acceptable preset for your machine. Not a single-render-with-stage-breakdown.
+
+## telemetry
+
+```bash
+npx hyperframes telemetry status      # show telemetry state
+npx hyperframes telemetry disable     # disable anonymous usage telemetry
+npx hyperframes telemetry enable      # re-enable telemetry
+```
+
+Telemetry is anonymous usage counters only. Disable globally with `HYPERFRAMES_NO_TELEMETRY=1` if env-var control is preferred over the subcommand.
+
+Events include two fingerprint properties used to distinguish managed-sandbox runs from real laptops — no PII, no env-var **values**, only existence checks:
+
+- **`sandbox_runtime`**: `gvisor` / `firecracker` / `docker` / `kvm` / `wsl` / `null`. gVisor via kernel string + `/proc/version`. Firecracker via `/dev/vsock` + DMI sys_vendor. Docker via `/.dockerenv` + cgroup.
+- **`agent_runtime`**: `claude_code` / `codex` / `cursor` / `copilot_agent` / `jules` / `replit` / `devin` / `aider` / `gemini_cli` / `hermes` / `openclaw` / `null`. Detected by the existence of well-known vendor env vars; the values themselves are never read.
+- **`client`**: set only when an app launched the CLI with a `HYPERFRAMES_CLIENT` tag (`<app>/<version>/<channel>`), sent as-is when it is a short slug.
+
+## Asset Preprocessing
+
+```bash
+npx hyperframes tts
+npx hyperframes transcribe
+npx hyperframes remove-background
+```
+
+These produce assets (narration audio, word-level transcripts, transparent video) that get dropped into a composition. Each may download its own model on first run.
+
+For voice selection, Whisper model rules, output format choice, and the TTS → transcript → captions chain, invoke the `media-use` skill. This skill stays focused on the dev loop.
+
+## Remaining harness usage
+
+Run `npx hyperframes usage --json` at the start of a video workflow and again at milestones such as after drafting and before rendering. A fresh read at handoff can serve as the start read. Use `--harness claude-code`, `--harness codex`, or `--harness grok` to select explicitly.
+
+Known results contain `status: "known"`, `harness`, `planTier`, `session`, `weekly`, and `spend`. Each available window contains `usedPercent`, `remainingPercent`, and `resetsAt`; an unavailable window is `null`. `planTier` is the readable subscription tier when available, otherwise `null`. Claude Code reports its shared five-hour and weekly windows; a spend-metered plan (such as Enterprise) has neither and reports `spend`, the share of its billing-period spend limit already used, with `resetsAt: null`. Codex reports its shared session and weekly windows when available. Grok reports its included weekly allowance with `session: null`. Only Claude Code reports `spend`; it is `null` elsewhere. When no window is available the result is `status: "unknown"` with `reason: "no_usage_windows"`.
+
+Unknown results contain `status: "unknown"` and a token-free `reason`. Missing, expired, unsupported, ambiguous, or unreadable logins and unavailable provider responses return unknown. Report the unknown state without guessing allowance. The command reads existing credentials without refreshing or rewriting them and emits no tokens or telemetry. Usage is a snapshot; it does not reserve allowance or estimate the next video's cost. Keep scope and workflow choices with the user.
+
+## Remaining harness usage
+
+Run `npx hyperframes usage --json` at the start of a video workflow and again at milestones such as after drafting and before rendering. A fresh read at handoff can serve as the start read. Use `--harness claude-code`, `--harness codex`, or `--harness grok` to select explicitly.
+
+Known results contain `status: "known"`, `harness`, `planTier`, `session`, `weekly`, and `spend`. Each available window contains `usedPercent`, `remainingPercent`, and `resetsAt`; an unavailable window is `null`. `planTier` is the readable subscription tier when available, otherwise `null`. Claude Code reports its shared five-hour and weekly windows; a spend-metered plan (such as Enterprise) has neither and reports `spend`, the share of its billing-period spend limit already used, with `resetsAt: null`. Codex reports its shared session and weekly windows when available. Grok reports its included weekly allowance with `session: null`. Only Claude Code reports `spend`; it is `null` elsewhere. When no window is available the result is `status: "unknown"` with `reason: "no_usage_windows"`.
+
+Unknown results contain `status: "unknown"` and a token-free `reason`. Missing, expired, unsupported, ambiguous, or unreadable logins and unavailable provider responses return unknown. Report the unknown state without guessing allowance. The command reads existing credentials without refreshing or rewriting them and emits no tokens or telemetry. Usage is a snapshot; it does not reserve allowance or estimate the next video's cost. Keep scope and workflow choices with the user.
diff --git a/.claude/skills/hyperframes-registry/SKILL.md b/.claude/skills/hyperframes-registry/SKILL.md
new file mode 100644
index 0000000..57f14bd
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/SKILL.md
@@ -0,0 +1,56 @@
+---
+name: hyperframes-registry
+description: About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.
+---
+
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.
+
+# HyperFrames registry
+
+Starting from an item is faster and usually better than writing the effect yourself, and an installed item is ordinary source in your project: change it, cut it down, restyle it.
+
+## Find and install
+
+```bash
+npx hyperframes catalog --query "<what the beat should do, in English>" --json
+npx hyperframes add <name> --json        # prints the written files and the mount snippet
+```
+
+- Query in English even when the video is not: the catalog is indexed in English, and another script returns `No searchable words in query`, which is not a gap.
+- Search is local and sends nothing. The default `words` tier only finds items that reuse your words; `--on-device` ranks by meaning after a one-time ~33 MB download. Offer that download and let the person decide; never enable it silently. The `--json` envelope names the tier that answered.
+- Narrow with `--type block|component` and `--tag <tag>`. `add <tag>` installs every block with that tag; dependencies install first. `add` needs the network even for an item installed before; search works offline from the cached manifest.
+- Nothing fits: report it before you hand-build, on either tier. `catalog --query` prints the line pre-filled (`report_gap` in `--json`): `npx hyperframes feedback --search-miss "<query>" --wanted "<the move you needed>" --tier <tier>`. Describe the effect, not an item name you imagined.
+
+Tiers, `dropped` and `unindexed`, stale indexes, offline behaviour: `references/search.md`.
+
+## What's in it
+
+| Blocks: a scene with its own timeline | Examples |
+| --- | --- |
+| Transitions | `beat-freeze-cut`, `chromatic-radial-split`, `cinematic-zoom` |
+| Overlays and lower thirds | `camcorder-hud`, `editorial-flash-overlay`, `lt-clean-bar` |
+| Title cards and kinetic type | `canopy-part-title`, `code-slice-hero` |
+| Social, chat and UI cards | `ai-chat-reveal`, `chatgpt-exchange` |
+| Code, charts, data and maps | `code-diff`, `bar-chart-race`, `data-chart` |
+| 3D, shader and backgrounds | `app-showcase`, `aurora`, `blob` |
+
+| Components: a snippet merged into your scene | Examples |
+| --- | --- |
+| Motion primitives and text effects | `agent-cursor`, `blur-in`, `bottom-up-letters` |
+| Caption styles | `caption-clip-wipe`, `caption-editorial-emphasis` |
+| Camera moves | `camera-shake`, `camera-scan-gate` |
+| Product demo and UI props | `before-after-wipe`, `browser-device-stage` |
+| Textures, particles and effects | `ascii-render-pass`, `grain-overlay` |
+
+## Wiring
+
+- **Block**: installs to `compositions/<name>.html`. Mount it with `data-composition-src`, `data-composition-id` matching the block's own id, `data-start` and the `data-duration` you need; the snippet `add` prints is the starting point. `references/wiring-blocks.md`.
+- **Component**: installs to `compositions/components/<name>.html`. Copy its markup, `<style>` and script into your scene, and follow its comment block if it hooks into your timeline. `references/wiring-components.md`.
+- Take the largest unit that fits, then edit it. Keep an installed item's ids prefixed as they are, so two items can't collide.
+- An item keeps its own variables; set them for one mount with `data-variable-values` on its host (`add --vars '{"title":"…"}'` writes that), and point its colour and font variables at your brand's.
+- Beat-synced blocks take hit times from `npx hyperframes beats --json`: the beat times minus the mount's `data-start`.
+- Install paths come from `hyperframes.json` (`references/install-locations.md`).
+
+## Contributing
+
+Authoring a new block or component for an upstream PR: `references/contributing.md`, starter templates in `references/templates.md`, quality bar in `references/component-quality-bar.md`.
diff --git a/.claude/skills/hyperframes-registry/examples/add-block.md b/.claude/skills/hyperframes-registry/examples/add-block.md
new file mode 100644
index 0000000..95bee6f
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/examples/add-block.md
@@ -0,0 +1,51 @@
+# Worked Example: Adding a Block
+
+## Scenario
+
+User has an existing HyperFrames project and wants to add an animated chart alongside their video content.
+
+## Steps
+
+### 1. Install the block
+
+```bash
+hyperframes add data-chart
+```
+
+### 2. Wire into index.html
+
+```html
+<div id="stage" data-composition-id="main" data-width="1920" data-height="1080" data-duration="30">
+  <video
+    id="speaker"
+    src="speaker.mp4"
+    data-start="0"
+    data-duration="30"
+    data-track-index="0"
+    style="position: absolute; width: 60%; height: 100%; left: 0; top: 0; object-fit: cover;"
+  ></video>
+
+  <!-- Data chart appears at 5s in the right 40% of the screen -->
+  <div
+    data-composition-id="data-chart"
+    data-composition-src="compositions/data-chart.html"
+    data-start="5"
+    data-duration="15"
+    data-track-index="1"
+    data-width="1920"
+    data-height="1080"
+    style="position: absolute; right: 0; top: 0; width: 40%; height: 100%;"
+  ></div>
+</div>
+```
+
+### 3. Lint and preview
+
+```bash
+hyperframes lint
+hyperframes preview
+```
+
+### 4. Customize (optional)
+
+Edit `compositions/data-chart.html` — data arrays are at the top of the script, colors are in the CSS rules scoped under `[data-composition-id="data-chart"]`.
diff --git a/.claude/skills/hyperframes-registry/examples/add-component.md b/.claude/skills/hyperframes-registry/examples/add-component.md
new file mode 100644
index 0000000..1371289
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/examples/add-component.md
@@ -0,0 +1,73 @@
+# Worked Example: Adding a Component
+
+## Scenario
+
+User wants to add a shimmer light sweep effect to their title text.
+
+## Steps
+
+### 1. Install the component
+
+```bash
+hyperframes add shimmer-sweep
+```
+
+### 2. Read the snippet
+
+Open `compositions/components/shimmer-sweep.html` and read the comment header.
+
+### 3. Wire into your composition
+
+**HTML** — wrap target elements:
+
+```html
+<div class="shimmer-sweep-target" style="--shimmer-color: rgba(255, 255, 255, 0.5)">
+  <h1 class="title">AI-Powered Video</h1>
+</div>
+```
+
+**CSS** — paste the `.shimmer-sweep-target` and `.shimmer-mask` rules from the snippet.
+
+**JS** — paste the auto-injection script (before timeline code):
+
+```js
+document.querySelectorAll(".shimmer-sweep-target").forEach((el) => {
+  if (!el.querySelector(".shimmer-mask")) {
+    const mask = document.createElement("div");
+    mask.className = "shimmer-mask";
+    el.appendChild(mask);
+  }
+});
+```
+
+**Timeline** — add the sweep:
+
+```js
+tl.fromTo(
+  ".shimmer-sweep-target",
+  {
+    "--shimmer-pos": "-20%",
+  },
+  {
+    "--shimmer-pos": "120%",
+    duration: 1.2,
+    ease: "power2.inOut",
+    stagger: 0.15,
+  },
+  1.5,
+);
+```
+
+### 4. Lint and preview
+
+```bash
+hyperframes lint
+hyperframes preview
+```
+
+### 5. Customize
+
+- `--shimmer-color`: highlight color per element
+- `--shimmer-width`: light band width (default 20%)
+- `--shimmer-angle`: sweep direction (default 120deg)
+- Timeline `duration`, `ease`, `stagger`: control speed and feel
diff --git a/.claude/skills/hyperframes-registry/references/component-quality-bar.md b/.claude/skills/hyperframes-registry/references/component-quality-bar.md
new file mode 100644
index 0000000..c34ec97
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/component-quality-bar.md
@@ -0,0 +1,250 @@
+# Component quality bar
+
+What a catalog component has to be for us to keep shipping it. Every criterion here comes from a
+defect found and verified on this branch, not from taste.
+
+A registry component is a motion primitive an author installs into their own composition and
+ships. The catalog page is marketing; the installed file is the product. Every criterion below is
+therefore evaluated against **the item's own `<name>.html`, mounted alone**, never against
+`demo.html` and never against the catalog page, because both of those carry scaffolding the author
+does not receive.
+
+Read this before auditing, scoring or cutting anything. It exists so several people auditing in
+parallel reach the same verdict on the same item.
+
+## The one rule
+
+> An item earns its place when the file the author installs, mounted by itself on the ground it
+> was designed for, renders the subject its name promises and moves the way its description says.
+> Anything that fails that and cannot be fixed into something no other item already does is cut.
+
+## How an audit runs
+
+Two passes, in this order. The mechanical pass is free and runs across every item in seconds; the
+visual pass costs a browser and eyes, so it is spent only on what the mechanical pass could not
+decide. A mechanical signal is a **candidate**, never a verdict.
+
+| Pass           | Cost           | Decides                                                                                  |
+| -------------- | -------------- | ---------------------------------------------------------------------------------------- |
+| **Mechanical** | grep and hash  | duplicates, missing timeline, banned hexes, empty markup, name gaps, unbounded variables |
+| **Visual**     | render and eye | renders at all, implements its description, legible, deterministic                       |
+
+`hyperframes check` is not a visual gate. It passes compositions that render nothing: a blank plot
+produces no error, no warning and no layout finding, because an empty render is a valid render. No
+criterion below may rest on `check` alone.
+
+### The mount harness
+
+Three ways to get a false verdict from a working item, all of them the harness's fault. Build the
+shell like this or the audit invents defects.
+
+1. **Two shapes of item, two ways to mount.** If the file, with HTML comments stripped, contains a
+   `data-composition-id`, it is a sub-composition: mount it with
+   `data-composition-src="./<name>.html"` on a clip. If it does not, it is a snippet: paste it
+   inline inside a `class="clip"` div. Inlining a sub-composition nests a document in a document
+   and renders black, which reads exactly like a dead item.
+2. **Use the item's own ground.** Take the background off its `demo.html` body rule. A snippet
+   whose ink defaults to `#18181b` is a 16:1 headline on its own `#f7f7f8` and an invisible 1.5:1
+   smudge on a dark stage. The stage is not evidence.
+3. **Load GSAP and register a paused root timeline**, then snapshot with
+   `hyperframes snapshot . --at 0.05,1.2,2.5,4.0 --no-end` and read the contact sheet.
+
+An item whose own `data-duration` is shorter than the shell's will be blank in the last frames.
+That is arithmetic, not a defect.
+
+## Fatal, cut the item
+
+Fatal means there is nothing worth keeping underneath the defect: no edit short of writing a
+different item fixes it, or the fix produces something the catalog already ships. Cite the named
+evidence; a fatal verdict without it does not count.
+
+**F1. Does not implement its own description.** The markup contains no trace of the subject the
+item is named and described for. Not "renders badly", but "the thing is absent from the file".
+`ecosystem-constellation`, `hero-device-assemble` and `terminal-to-browser-deploy` are the same
+file holding empty card divs with different headings.
+_Check:_ read the markup, then swap the name for any other item's name. If nothing in the file
+would have to change, the name is a label on a generic shell.
+_Evidence:_ the named subject has no element (no nodes in a constellation, no terminal in a
+terminal deploy).
+
+**F2. Redundant duplicate.** Same **motion fingerprint** and same **markup skeleton** as another
+item that survives. Fingerprint is the gsap call list with selectors neutralised, keeping props,
+durations and eases; skeleton is the tag sequence with classes and text stripped. One wipe
+currently ships eight times with the same properties, durations and easings; one word-stagger
+ships seven times.
+_Evidence:_ both hashes match a sibling, and the sibling wins the tie-break below.
+
+**F3. Renders nothing.** Frames are blank, or the named subject never appears, with the item
+mounted correctly on its own ground and its recipe applied.
+_Evidence:_ four blank frames plus the cause, in the item rather than the harness: a missing
+sibling asset, a `ReferenceError` in the console, a subject that never enters the viewport. A
+frame-capture artifact that renders correctly live is a false alarm, so confirm on a real page
+before recording it.
+
+**F4. The description is a different item.** The frames show the promised event never happening: a
+wipe that never reveals its second panel, a chart that draws no series. Not a wording gap.
+
+**F5. Cannot be made seekable.** Frame N genuinely depends on frame N-1 with no closed form and no
+bounded replay, and making it seekable would make it a different effect. Rare. Most accumulators
+have a trivial rewrite, so reach for this only after establishing there is none; a seeded,
+index-derived replacement for `Math.random()` is X7, not F5.
+_Evidence:_ two snapshots of the same timestamp reached by different seek paths differ.
+
+## Fixable, keep and repair
+
+Real defects, but the item has a reason to exist that nothing else covers and the repair is
+bounded. Log the specific fix, never "needs polish".
+
+**X1. No timeline of its own.** No `__timelines` registration, so the installed artifact renders a
+still frame while the catalog page looks fine, because the generator transplants the demo's
+timeline into the preview. 97 of the 213 new components are in this state.
+_Repair:_ fold the trailing `Timeline integration:` recipe into a real `<script>` that builds a
+paused timeline and registers it. Roughly 10 to 15 minutes for a single-element item.
+_Escalates to fatal_ only when there is no motion anywhere to fold in, which usually means F1 too.
+
+**X2. Name claims a technique the code lacks.** Grep the code region, never the doc header: the
+header's prose is full of the exact words you are looking for, and will report a match on an item
+that has none.
+| Name pattern | Must contain |
+| -------------------------------- | -------------------------------------------------- |
+| `spring-*` | `elastic`, `back.`, `bounce` or a custom spring ease |
+| `mask-*`, `*-mask*` | `mask` or `clip-path` |
+| `frosted*`, `*glass*` | `backdrop-filter` |
+| `*3d*`, `*depth*`, `*orbit*`, `*camera*` | `perspective`, `rotateX`, `rotateY`, `translateZ` |
+| `*-draw`, `*-trace`, `*stroke*` | `stroke-dash` or `pathLength` |
+_Repair:_ add the technique, or rename the item. Renaming is often the honest fix.
+
+**X3. Illegible.** At 1920x1080 on its own ground: text under 4.5:1, or a subject whose smallest
+meaningful feature is under about 24px.
+_Repair:_ one value step, per `placeholder-material.md`. Text never sits below L1.
+
+**X4. Placeholder gradients.** The purple and blue palette standing in for content.
+_Repair:_ the monochrome ramp. Already done across the catalog, so a new instance is a regression,
+not a legacy defect.
+
+**X5. Hardcoded ink, no theme token.** A literal colour on the item's own text or subject with no
+`var(--...)` fallback chain, so it disappears when an author drops it on the opposite theme.
+_Repair:_ route it through the theme token with the literal as fallback.
+
+**X6. No markup of its own.** The file is a `<style>` and a `<script>` and nothing else, so
+mounting it renders an empty box.
+_Repair:_ ship sample markup, or declare it an attachment snippet in `registry-item.json` and give
+the demo a host element.
+
+**X7. Unseeded randomness.** Scatter derived from `Math.random()` rather than the element index.
+_Repair:_ derive from the index.
+
+**X8. Declared bounds it cannot honour.** A number variable with no `min`/`max`, so the control
+offers values the item cannot express, or a default it can never return to.
+_Repair:_ declare real bounds, or use a numeric field instead of a slider.
+
+## Duplicates, which one survives
+
+A group is the set of items sharing both hashes from F2. Exactly one survives, chosen in order:
+
+1. **The one whose name describes what the shared motion actually does.** A group where one member
+   is a directional wipe and the rest borrowed it keeps the directional wipe.
+2. **Then the one with subject-specific markup.** More elements that only make sense for that
+   name, not more elements.
+3. **Then the one already on `origin/main`.** Removing a shipped item breaks installs.
+4. **Never a member whose name claims something the shared implementation does not do.**
+   `frosted-glass-wipe` has no `backdrop-filter`, `spring-scale-in` has no spring, `mask-reveal-up`
+   has no mask, so none of those three is the survivor. Such a member is F2 and X2 at once, and X2
+   cannot be fixed without breaking the group. If no member is honest, keep the plainest name.
+
+**If every member of a group fails F1, the group is cut entire.** Do not preserve a survivor to
+soften the count. Twelve names on one empty card shell is one bad item, not twelve, and keeping one
+of them keeps the bad item.
+
+Same motion with genuinely different subjects is not a duplicate. A bar chart, a line chart and a
+dashboard populate can share a stagger; the subject is the item.
+
+## Never cut
+
+Protection is per criterion, not blanket. A protected item still answers every other row.
+
+**N1. Load-bearing colour** is exempt from X4 only. `chromatic-aberration-wipe` (the RGB split is
+the effect), `confetti` (multi-hue is the celebration), `matrix-decode` (green is its identity),
+`mesh-gradient-bg` (the gradient is the subject), `multi-device-splay`. `us-map`'s gradient is a
+sequential choropleth scale, which is colour carrying data.
+
+**N2. Real product depiction** is exempt from X4 and F1. A Figma logo inside a Figma mock is not
+slop; the HyperFrames wordmark in `logo-brand-close` is the subject. Judge the placeholder content,
+not the depicted product.
+
+**N3. Deliberate static** is exempt from X1. An item whose description promises no motion is not
+failing X1. A style snippet or a passive overlay is allowed to sit still.
+
+**N4. Environment sets** are exempt from F3. An item that is a backdrop rather than a shot is not
+failing F3 for being calm. Measured PSNR between frames separates the two: sets score 45 or higher,
+things that genuinely run score 17 to 24. Judge against the description.
+
+**N5. A rest state that is the recipe's `from` state** is exempt from F3. `confetti` ships
+`.particle` spans sitting at opacity 0 until the timeline fans them out. Still is not dead.
+
+**N6. Attachment snippets** are exempt from F3. A text splitter has no markup by design. Grade X6.
+
+**N7. The 36 items already on `origin/main`** are out of audit scope.
+
+## Mechanical first pass
+
+| Signal              | How                                                                                   | Maps to |
+| ------------------- | ------------------------------------------------------------------------------------- | ------- |
+| No timeline         | `grep -L __timelines` over each composition                                           | X1      |
+| Duplicate           | motion fingerprint AND markup skeleton hashes, matched pairwise                       | F2      |
+| Empty shell         | markup skeleton matches an unrelated item, or is `<h3>` + `<p>` + generic panels only | F1      |
+| No markup at all    | element count of the comment-, style- and script-stripped file is 0                   | X6      |
+| Placeholder palette | grep the six banned hexes                                                             | X4      |
+| Name gap            | the X2 table, grepped over the code region only                                       | X2      |
+| Unbounded number    | read `min`/`max` in `registry-item.json`                                              | X8      |
+| Non-determinism     | grep `Math.random`, `Date.now`, `performance.now`, `requestAnimationFrame`            | X7, F5  |
+
+## Visual pass, required for a verdict
+
+Render at least four frames across the duration from the **composition**, not the demo, mounted per
+the harness rules above, and look at them. Then, for anything not scoring clean, confirm on the
+real catalog page before recording it.
+
+Record per item: the criteria it fails, the evidence you saw, and fatal or fixable. An unviewed
+item is not a pass.
+
+## Calibration
+
+Ten items scored with this rubric, frames rendered and looked at. Three of them corrected the
+rubric rather than the other way round.
+
+| Item                         | Expected   | Frames actually showed                                                                                                    | Verdict            |
+| ---------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------ |
+| `ecosystem-constellation`    | fatal      | Sidebar with three pill buttons and three empty white panels. No nodes, no edges. Identical at all four timestamps.       | **Cut** F1, F2, F4 |
+| `terminal-to-browser-deploy` | fatal      | Pixel-identical to the above, only the `<h3>` and one subtitle differ. No terminal, no browser.                           | **Cut** F1, F2, F4 |
+| `frosted-glass-wipe`         | fatal      | One card reading "Before", static, forever; the "After" panel stays clipped. Recipe byte-identical to `directional-wipe`. | **Cut** F2, F4, X2 |
+| `char-slam-explode`          | pass       | Letters scattered at 0.05s, assembled into "Impact" by 1.2s, held. Real per-character motion.                             | **Keep**           |
+| `echo-trail`                 | pass       | Card travels left to right with a decaying blurred echo trail behind it. Legible on its own light ground.                 | **Keep**           |
+| `logo-brand-close`           | pass       | "H" resolves into the full wordmark, tagline and URL land after it. Staged, legible.                                      | **Keep**           |
+| `blur-in`                    | borderline | Still, but the still is the correct rest state: legible headline, unique implementation, theme-token ink.                 | **Keep**, X1       |
+| `spring-scale-in`            | borderline | Legible on its own `#f7f7f8`. Ease is `power3.out`, no spring anywhere. Shares its recipe with six others.                | **Cut** F2, X2     |
+| `confetti`                   | borderline | Card and mesh, no particles visible. Source ships `.particle` spans the recipe fans out from opacity 0.                   | **Keep**, X1       |
+| `bottom-up-letters`          | borderline | Four blank frames. The file is a splitter with no markup at all.                                                          | **Keep**, X6       |
+
+Three corrections the calibration forced, all of them false cuts:
+
+- `spring-scale-in` first scored X3 at roughly 1.5:1. That was the harness's dark stage, not the
+  item. Hence "use the item's own ground".
+- `confetti` first scored F3. Its rest state is its recipe's `from` state. Hence N5.
+- `char-slam-explode` first scored F3 with four black frames. It is a sub-composition and was being
+  inlined. Hence the two-shapes rule.
+
+A rubric that cuts a working item is wrong even when the verdict is convenient.
+
+## Checklist
+
+Per item, in order. Stop at the first fatal.
+
+- [ ] Mounted the right way for its shape, on its own ground, with GSAP and a paused root.
+- [ ] F1: the markup contains the named subject.
+- [ ] F2: motion fingerprint and markup skeleton are not both shared with a survivor.
+- [ ] F3: it renders something with the recipe applied, or it is protected by N3 to N6.
+- [ ] F4: the frames show the event the description promises.
+- [ ] F5: frame N is computed from N.
+- [ ] X1 through X8 logged with the specific fix.
+- [ ] Verdict cites the evidence the criterion names, not an impression.
diff --git a/.claude/skills/hyperframes-registry/references/contributing.md b/.claude/skills/hyperframes-registry/references/contributing.md
new file mode 100644
index 0000000..28eb495
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/contributing.md
@@ -0,0 +1,180 @@
+# Contributing a Block or Component to the Registry
+
+Guide the user from idea to merged PR for a new registry block or component.
+
+## Workflow
+
+```
+1. Clarify → 2. Scaffold → 3. Build → 4. Validate → 5. Preview → 6. Ship
+```
+
+### Step 1: Clarify
+
+Ask what they're building. The registry has two item types:
+
+- **Block** (`registry/blocks/`, type `hyperframes:block`) — a full standalone composition with fixed dimensions and duration. Caption styles, VFX effects, title cards, lower thirds.
+- **Component** (`registry/components/`, type `hyperframes:component`) — a reusable snippet with no fixed dimensions or duration. CSS effects, text treatments, overlays that adapt to any composition size.
+
+Then ask:
+
+- One-sentence description of the effect
+- Visual reference (URL, screenshot, or description)
+- Who uses this and when?
+
+### Step 2: Scaffold
+
+Create the registry structure:
+
+**For blocks:**
+
+```
+registry/blocks/{block-name}/
+  {block-name}.html
+  registry-item.json
+```
+
+**For components:**
+
+```
+registry/components/{component-name}/
+  {component-name}.html
+  registry-item.json
+```
+
+**Naming convention:**
+
+| Item name        | ID prefix | Example IDs            |
+| ---------------- | --------- | ---------------------- |
+| `cap-hormozi`    | `hz`      | `hz-cg-0`, `hz-cw-3`   |
+| `cap-typewriter` | `tw`      | `tw-cg-0`, `tw-ch-0-5` |
+| `vfx-chrome`     | `vc`      | `vc-canvas`            |
+
+Use a 2-3 letter prefix. ALL element IDs must use this prefix to avoid collisions in sub-compositions.
+
+**registry-item.json** — use the canonical templates in [templates.md](templates.md) (block and component variants, both with all required fields).
+
+### Step 3: Build
+
+Apply the correct template based on type. See [templates.md](templates.md) for copy-paste starters.
+
+#### Caption blocks
+
+**Non-negotiable caption rules:**
+
+- Font: **96px minimum** for proportional fonts. **64-72px acceptable for monospace** (wider characters need less size).
+- Readability: `-webkit-text-stroke: 2-3px` OR multi-layer `text-shadow`
+- Overflow: call `window.__hyperframes.fitTextFontSize()` on every group
+- Karaoke: highlight active word via `tl.to(wordEl, { color/scale }, WORDS[wi].start)`
+- Hard kill: `tl.set(groupEl, { opacity: 0, visibility: "hidden" }, g.end)` on EVERY group
+- **Never use `tl.from(el, { opacity: 0 })` at the same position as `tl.set(el, { opacity: 1 })`** — the from clobbers the set. Use `tl.to` instead.
+
+**Per-character animation** (typewriter, scramble):
+
+- Wrap each character in `<span>` with ID `{prefix}-ch-{group}-{char}`
+- Stagger via `tl.set` at computed intervals from word timestamps
+- Cursors/decorative elements: use `tl.set` at intervals — NOT CSS animation (not seekable)
+
+**Positioning variants:**
+
+- Centered: `display: flex; align-items: center; justify-content: center;`
+- Lower-third: `position: absolute; bottom: 100px; left: 0; width: 100%; text-align: center;`
+- Left-aligned: `position: absolute; bottom: 100px; left: 120px; text-align: left;`
+
+#### VFX blocks (Three.js)
+
+- Use `three@0.147.0` from CDN (global script)
+- `tl.eventCallback("onUpdate", renderScene); renderScene();` — NO requestAnimationFrame
+- State proxy pattern: GSAP animates plain JS object, render function reads it
+- Seeded PRNG (`mulberry32`) for randomness
+
+#### All types
+
+- **Load files the block ships through `__hyperframes.assetUrl("assets/...")`** whenever a script
+  builds the path (textures, fonts, JSON, models). Attributes like `src` and `href` are rebased
+  when the block is mounted; strings in a script are not, so a bare `"assets/..."` 404s once the
+  block lives under `compositions/<name>/`. A separate `.js` file gets the URLs from the block's
+  inline script. A block whose assets install to the project's own `assets/` (target
+  `compositions/<name>.html`) keeps plain project-root paths; `assetUrl` would look beside the file.
+- **Placeholder content is monochrome** — read
+  [placeholder-material.md](placeholder-material.md) before choosing a single colour. Stand-in
+  screens, images, cards, avatars, logos and chart series use four alpha steps of the
+  composition's ink; accent marks one element and never a placeholder.
+- `data-composition-id` MUST match `window.__timelines["id"]`
+- All element IDs prefixed with block abbreviation
+- `gsap.timeline({ paused: true })` — always paused
+- No `Math.random()`, no `Date.now()`
+
+### Step 4: Validate
+
+```bash
+hyperframes lint                    # 0 errors required
+hyperframes check --no-contrast  # 0 console errors required
+```
+
+### Step 5: Preview
+
+```bash
+# Render preview video
+hyperframes render -o preview.mp4
+
+# Snapshot for visual QA
+hyperframes snapshot --at "1.0,3.0,5.0,7.0"
+
+# Publish to hyperframes.dev for review
+npx hyperframes publish
+```
+
+**Catalog preview image** — For the default PNG preview, save your snapshot at `docs/images/catalog/{kind}/{name}.png` in the repository checkout (`{kind}` is `blocks` or `components`). After upload, the catalog serves it from `https://static.heygen.ai/hyperframes-oss/docs/images/catalog/{kind}/{name}.png`. If `registry-item.json` declares `preview`, the card uses its `poster` URL; a `preview` without `poster` has no image fallback.
+
+- **HeyGen internal contributors:** run `scripts/upload-docs-images.sh` from the repository root (requires AWS profile `engineering-767398024897`)
+- **External contributors:** attach the preview MP4 to your PR description. A maintainer will generate and upload the catalog image before merging.
+
+### Step 6: Ship
+
+**All steps are required. Missing any one produces a broken catalog entry.**
+
+`{kind}` is `blocks` or `components` depending on what you built in Step 1.
+
+```bash
+# 1. Create branch
+git checkout -b feat/registry-{name}
+
+# 2. Format HTML
+npx oxfmt registry/{kind}/{name}/*.html
+
+# 3. Regenerate registry/registry.json from the item directories.
+#    Do not hand-edit it: an entry added by hand survives until the next
+#    regeneration and then vanishes, and one left behind for a directory that
+#    no longer exists is worse, because `hyperframes add <name>` resolves the
+#    name and then fails on missing files.
+npx tsx scripts/generate-registry-items.ts
+
+# 4. Generate catalog docs page
+npx tsx scripts/generate-catalog-pages.ts
+
+# 5. Publish to hyperframes.dev so reviewers can preview
+npx hyperframes publish
+
+# 6. Stage everything
+git add registry/{kind}/{name}/ registry/registry.json docs/catalog/
+
+# 7. Commit
+git commit -m "feat(registry): add {name} — {one sentence}"
+
+# 8. Push and open PR with hyperframes.dev link
+git push origin feat/registry-{name}
+gh pr create --title "feat(registry): {name}" --body "preview: {hyperframes.dev-url}"
+```
+
+**If you don't have a GitHub account:** you need one to open a PR. Sign up at https://github.com/signup, then run `gh auth login`.
+
+## Quality Gate
+
+- [ ] `hyperframes lint` → 0 errors
+- [ ] `hyperframes check` → 0 console errors
+- [ ] `npx oxfmt --check` passes
+- [ ] `registry/registry.json` updated with new entry
+- [ ] `scripts/generate-catalog-pages.ts` run (docs page generated)
+- [ ] `npx hyperframes publish` run (claim your project URL)
+- [ ] Preview MP4 attached to PR (external) or catalog PNG uploaded (internal)
+- [ ] All IDs unique and prefixed
diff --git a/.claude/skills/hyperframes-registry/references/demo-html-pattern.md b/.claude/skills/hyperframes-registry/references/demo-html-pattern.md
new file mode 100644
index 0000000..3e53838
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/demo-html-pattern.md
@@ -0,0 +1,54 @@
+# The demo.html Convention
+
+## Why components ship demo.html
+
+Every component in the registry ships a companion `demo.html` file alongside its snippet. The demo serves two purposes:
+
+1. **Preview fixture** — the CI preview pipeline renders the demo to generate thumbnail images and preview videos for the catalog docs page.
+
+2. **Usage example** — the demo shows the component effect applied to representative content, serving as a working reference.
+
+## Demo structure
+
+A demo is a complete, standalone HTML composition:
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Component Name — Demo</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      /* reset + canvas size */
+    </style>
+  </head>
+  <body>
+    <div data-composition-id="<name>-demo" data-width="1920" data-height="1080" data-duration="N">
+      <!-- Demo content showing the effect -->
+      <!-- Component snippet inlined here -->
+    </div>
+    <script>
+      // GSAP timeline demonstrating the effect
+      window.__timelines = window.__timelines || {};
+      window.__timelines["<name>-demo"] = tl;
+    </script>
+  </body>
+</html>
+```
+
+Key conventions:
+
+- `data-composition-id` is `<component-name>-demo` to avoid collisions
+- The demo is self-contained — all CSS and JS from the snippet is inlined
+- The GSAP timeline is registered on `window.__timelines`
+- Duration should be long enough to showcase the effect (typically 5-8 seconds)
+
+## Blocks don't need demo.html
+
+Blocks are already standalone compositions that can be rendered directly. Only components need the demo wrapper.
+
+## Demos are not installed
+
+The `demo.html` is NOT installed by `hyperframes add` — it exists only in the registry for preview generation and as a reference.
diff --git a/.claude/skills/hyperframes-registry/references/discovery.md b/.claude/skills/hyperframes-registry/references/discovery.md
new file mode 100644
index 0000000..5504243
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/discovery.md
@@ -0,0 +1,217 @@
+# Registry discovery
+
+<!-- registry-items: allow=data-composition-id,data-start,data-track-index -->
+
+## Use the catalog command first
+
+```bash
+npx hyperframes catalog
+npx hyperframes catalog --type block
+npx hyperframes catalog --type component
+npx hyperframes catalog --type block --tag social
+npx hyperframes catalog --json
+npx hyperframes catalog --human-friendly
+```
+
+- Default output is a readable table. It does not install anything.
+- `--type` accepts `block` or `component`; `--tag` may narrow either result.
+- `--json` is the deterministic agent and CI surface. Select a name, then run `npx hyperframes add <name>`.
+- `--human-friendly` opens a picker and installs the selected item immediately.
+
+## Read the registry manifest as a fallback
+
+When the CLI is unavailable, the top-level `registry.json` lists all available items:
+
+```bash
+curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
+```
+
+Each entry has `name` and `type` (`hyperframes:example`, `hyperframes:block`, or `hyperframes:component`).
+
+## Reading an item's manifest
+
+Each item has a `registry-item.json` with full metadata:
+
+```
+<base>/<type-dir>/<name>/registry-item.json
+```
+
+Where `<type-dir>` is `examples`, `blocks`, or `components`.
+
+## Item manifest fields
+
+| Field                  | Type     | Required | Description                                    |
+| ---------------------- | -------- | -------- | ---------------------------------------------- |
+| `name`                 | string   | yes      | Kebab-case identifier                          |
+| `type`                 | string   | yes      | `hyperframes:block` or `hyperframes:component` |
+| `title`                | string   | yes      | Human-readable title                           |
+| `description`          | string   | yes      | One-line description                           |
+| `tags`                 | string[] | no       | Filter tags (e.g., `["data", "chart"]`)        |
+| `dimensions`           | object   | blocks   | `{ width, height }` — blocks only              |
+| `duration`             | number   | blocks   | Duration in seconds — blocks only              |
+| `files`                | array    | yes      | Files to install (`path`, `target`, `type`)    |
+| `registryDependencies` | string[] | no       | Other registry items this depends on           |
+
+## Available items
+
+### Blocks
+
+For an always-current list run `npx hyperframes catalog --type block`. **The search is the source of truth; the tables below are a hand-maintained sample and under-cover by design** — they group 97 of the registry's 180 blocks by category, so a block missing from them is not evidence the registry lacks it. Only an empty `npx hyperframes catalog --query "<what you want>" --json` is that evidence. Do not grow these tables toward the full set; search instead. **Block name ≠ shader name**: shader-transition blocks (e.g. `domain-warp-dissolve`) wrap a HyperShader runtime whose internal name omits the `-dissolve`/`-warp` suffix — see the showcase HTML installed alongside the block for the canonical name.
+
+#### Shader transitions (14)
+
+Single-shader blocks; each installs one HyperShader runtime + a showcase composition. Use ≤2 per video.
+
+| Name                     | Description                                                              |
+| ------------------------ | ------------------------------------------------------------------------ |
+| `chromatic-radial-split` | Chromatic aberration radial split                                        |
+| `cinematic-zoom`         | Dramatic zoom blur                                                       |
+| `cross-warp-morph`       | Cross-warped morphing                                                    |
+| `domain-warp-dissolve`   | Fractal noise domain warping                                             |
+| `flash-through-white`    | White flash crossfade (rarely a neutral default — see SKILL.md guidance) |
+| `glitch`                 | Digital glitch artifacts                                                 |
+| `gravitational-lens`     | Gravitational lensing distortion                                         |
+| `light-leak`             | Cinematic light leak overlay                                             |
+| `ridged-burn`            | Ridged turbulence burn                                                   |
+| `ripple-waves`           | Concentric ripple wave distortion                                        |
+| `sdf-iris`               | Signed-distance-field iris reveal                                        |
+| `swirl-vortex`           | Swirling vortex distortion                                               |
+| `thermal-distortion`     | Heat-haze thermal distortion                                             |
+| `whip-pan`               | Fast camera whip-pan                                                     |
+
+#### Transition galleries (13)
+
+Showcase compositions grouping multiple CSS / GSAP transition styles by family. Use as reference for picking a CSS scene transition; not meant to embed as-is.
+
+| Name                      | Description                         |
+| ------------------------- | ----------------------------------- |
+| `transitions-3d`          | 3D perspective flip and rotate      |
+| `transitions-blur`        | Blur-based scene transitions        |
+| `transitions-cover`       | Cover / uncover slide               |
+| `transitions-destruction` | Destructive break-apart             |
+| `transitions-dissolve`    | Dissolve and fade                   |
+| `transitions-distortion`  | Warp and distortion                 |
+| `transitions-grid`        | Grid-based tile                     |
+| `transitions-light`       | Light-based glow and flash          |
+| `transitions-mechanical`  | Mechanical shutter and iris         |
+| `transitions-other`       | Misc creative (VHS, gravity, morph) |
+| `transitions-push`        | Push and slide                      |
+| `transitions-radial`      | Radial wipe and reveal              |
+| `transitions-scale`       | Scale and zoom                      |
+
+#### Liquid Glass (7)
+
+WebGPU + html-in-canvas frosted-glass surfaces. **Require Brave / Chrome canary** with WebGPU enabled — set `PRODUCER_HEADLESS_SHELL_PATH` to point at the browser; engine auto-passes `--enable-unsafe-webgpu`. See `/hyperframes` → `references/runtimes.md`.
+
+| Name                        | Description                                                                             |
+| --------------------------- | --------------------------------------------------------------------------------------- |
+| `ios26-liquid-glass`        | 3D iPhone (GLTF) + iOS 26 home screen, glass app icons, shader wallpaper, notifications |
+| `macos-tahoe-liquid-glass`  | 3D MacBook (GLTF) + macOS Tahoe-style desktop, glass menu bar, Finder, dock             |
+| `liquid-glass-widgets`      | Frosted stat cards, showcase panel, pill chips over aurora shader                       |
+| `liquid-glass-notification` | Frosted notification cards floating over aurora shader                                  |
+| `vfx-liquid-glass`          | Bare VFX composition shell for liquid-glass effects                                     |
+
+#### VFX (6)
+
+HTML-in-canvas + WebGL composition blocks. See `/hyperframes` → `references/runtimes.md` for the underlying runtimes.
+
+| Name                    | Description                                                                                             |
+| ----------------------- | ------------------------------------------------------------------------------------------------------- |
+| `vfx-iphone-device`     | GLTF iPhone 15 Pro Max + MacBook Pro with live HTML-in-canvas screens, glass-lens morph, 360° turntable |
+| `vfx-liquid-background` | Organic liquid sim — vertex displacement on subdivided plane, HTML floats above                         |
+| `vfx-magnetic`          | VFX shell (magnetic field-line treatment)                                                               |
+| `vfx-portal`            | VFX shell (portal reveal)                                                                               |
+| `vfx-shatter`           | VFX shell (shatter into fragments)                                                                      |
+| `vfx-text-cursor`       | Cursor glow + chromatic shadow rays + spectral edges on a black stage                                   |
+
+#### Showcases (6)
+
+Story-driven showcase compositions — narrated YouTube-style inserts. Most include bundled SFX.
+
+| Name                       | Description                                                       |
+| -------------------------- | ----------------------------------------------------------------- |
+| `app-showcase`             | Three floating smartphone screens, fitness app product showcase   |
+| `apple-money-count`        | Counter $0 → $10,000, green flash, money-icon burst, SFX          |
+| `blue-sweater-intro-video` | Warm AI-creator intro resolving into an X follow card             |
+| `north-korea-locked-down`  | Map zoom with red scribble circle, locked-down pop-up label       |
+| `nyc-paris-flight`         | Map animation, plane NYC → Paris, marker circle, landing pop, SFX |
+| `vpn-youtube-spot`         | App-store scroll, VPN install flow, SFX                           |
+
+#### Maps + data viz (8)
+
+D3 + GSAP animated geographies and charts.
+
+| Name                               | Description                                                                                        |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------- |
+| `us-map`                           | US choropleth, staggered state reveals, value labels, gradient legend                              |
+| `us-map-bubble`                    | US bubble map — proportional city markers, callouts, connection lines                              |
+| `us-map-flow`                      | US flow map — animated origin-destination arcs                                                     |
+| `us-map-hex`                       | US hex-grid map — each state as equal-weight hex with data fill                                    |
+| `spain-map`                        | Spain choropleth by autonomous community — D3 conic conformal                                      |
+| `world-map`                        | World choropleth + rotating globe inset, D3 Natural Earth                                          |
+| `data-chart`                       | Animated bar + line chart, staggered reveal, NYT-style typography                                  |
+| `flowchart` / `flowchart-vertical` | Decision tree, SVG connectors, sticky-note nodes, cursor + typing correction (vertical = portrait) |
+
+#### Social overlays (7)
+
+Platform-recognizable UI overlays. Stamp on top of a beat or use as a beat closer.
+
+| Name                 | Description                                      |
+| -------------------- | ------------------------------------------------ |
+| `instagram-follow`   | Profile card + follow button                     |
+| `tiktok-follow`      | Profile card + follow button                     |
+| `yt-lower-third`     | YouTube subscribe lower third with avatar        |
+| `x-post`             | X/Twitter post card with engagement metrics      |
+| `reddit-post`        | Post card with upvotes and comments              |
+| `spotify-card`       | Now-playing card with album art and progress bar |
+| `macos-notification` | macOS-style banner with app icon and message     |
+
+#### Branding + 3D UI (2)
+
+| Name           | Description                                                         |
+| -------------- | ------------------------------------------------------------------- |
+| `logo-outro`   | Piece-by-piece logo assembly, glow bloom, tagline fade-in, URL pill |
+| `ui-3d-reveal` | Perspective 3D reveal for UI elements                               |
+
+#### Code snippets (24)
+
+A code/terminal window that **types a code or shell session per-character**. Theme = visual chrome only; structure, wiring, and install are identical across all 24 — pick one by name, wire it like any block (`data-composition-id` + `data-start` + `data-track-index`, see `wiring-blocks.md`). Two chrome families:
+
+**Apple Terminal (12)** — macOS Terminal.app window typing a shell session. Profile = window colors:
+
+| Name                              | Look                             |
+| --------------------------------- | -------------------------------- |
+| `code-snippet-apple-terminal-pro` | Black bg, grey text, lime cursor |
+
+#### Code Animations (9)
+
+The richer, motion-first counterpart to the static `code-snippet-*` window themes above: each is a self-contained 1920×1080 block (~5–8s) with a paused, deterministic GSAP timeline that _animates_ code — typing, diffing, morphing, spotlighting, or GPU hero reveals — rather than typing a fixed snippet inside editor/terminal chrome. **Reuse-first**: `npx hyperframes add <name>`, then customize the baked code/diff content in place; hand-author only when no block covers the motion you need.
+
+**DOM / text reveal (6):**
+
+| Name             | Description                                                                                                                |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `code-typing`    | Token-streamed typing reveal, caret tracks the frontier (no CSS animation) — live-coding on screen                         |
+| `code-diff`      | An edit shown as a colored diff: removed lines collapse red, added expand green — before/after at line level               |
+| `code-morph`     | One snippet transforms into another, tokens glide between positions (Shiki Magic Move) — a refactor / one state to another |
+| `code-highlight` | A highlight band sweeps a target line while surrounding context dims — spotlight one line                                  |
+| `code-scroll`    | Camera scrolls a long file to center + spotlight a target line — walk through a real module                                |
+
+**GPU / WebGL hero reveals (3):** heavier, for a title-card / hero code moment.
+
+| Name                     | Description                                                                                                     |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| `code-3d-extrude`        | Syntax-highlighted code on a lit beveled 3D slab that rotates through real space and settles (true WebGL depth) |
+| `code-shader-dissolve`   | Code resolves out of seeded noise with a chromatic dissolve front + edge glow, then holds crisp                 |
+| `code-particle-assemble` | Thousands of GPU points fly to the exact glyph pixels and resolve into readable syntax-highlighted code         |
+
+### Components
+
+| Name                 | Description                                                                                               | Tags                                             |
+| -------------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| `grain-overlay`      | Animated film grain texture overlay                                                                       | texture, grain, overlay, film                    |
+| `shimmer-sweep`      | CSS gradient light sweep for AI accents                                                                   | text, shimmer, highlight, effect                 |
+| `morph-text`         | Gooey text morph cycling an editable word list (SVG threshold + GSAP blur)                                | text, text-effect, typography, morph, gooey      |
+| `grid-pixelate-wipe` | Grid dissolve transition between scenes                                                                   | transition, wipe, grid, pixelate                 |
+| `parallax-zoom`      | Center card scales up to fill the frame while siblings parallax outward (single `--pz-progress` 0→1)      | transition, zoom, parallax, grid, hero           |
+| `parallax-unzoom`    | Reverse of `parallax-zoom` — focus card shrinks from full frame as siblings parallax in (`--pu-progress`) | transition, reveal, unzoom, parallax, grid, hero |
diff --git a/.claude/skills/hyperframes-registry/references/install-locations.md b/.claude/skills/hyperframes-registry/references/install-locations.md
new file mode 100644
index 0000000..65e3d34
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/install-locations.md
@@ -0,0 +1,45 @@
+# Install Locations
+
+## Default paths
+
+| Item type | Default install path                  | Configured by                       |
+| --------- | ------------------------------------- | ----------------------------------- |
+| Block     | `compositions/<name>.html`            | `hyperframes.json#paths.blocks`     |
+| Component | `compositions/components/<name>.html` | `hyperframes.json#paths.components` |
+
+## How path remapping works
+
+The `target` field in each item's `registry-item.json` specifies a default install path. The `add` command remaps the prefix based on `hyperframes.json#paths`:
+
+- Block targets starting with `compositions/` get remapped to `<paths.blocks>/`
+- Component targets starting with `compositions/components/` get remapped to `<paths.components>/`
+
+## hyperframes.json
+
+Created automatically by `hyperframes init`. If it doesn't exist when you run `add`, the CLI creates it with defaults:
+
+```json
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  }
+}
+```
+
+## Custom layouts
+
+To install blocks into a `scenes/` directory instead of `compositions/`:
+
+```json
+{
+  "paths": {
+    "blocks": "scenes"
+  }
+}
+```
+
+Then `hyperframes add data-chart` writes to `scenes/data-chart.html` instead of `compositions/data-chart.html`. The snippet output reflects the remapped path.
diff --git a/.claude/skills/hyperframes-registry/references/placeholder-material.md b/.claude/skills/hyperframes-registry/references/placeholder-material.md
new file mode 100644
index 0000000..d6648aa
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/placeholder-material.md
@@ -0,0 +1,149 @@
+# Placeholder material
+
+Registry items ship with stand-in content: a rectangle where the user's screenshot goes, a
+bar where their number goes, a chip where their teammate's face goes. That stand-in is
+**placeholder material**, and it is monochrome. No hue, no colour ramps, no purple-to-blue
+diagonal fill.
+
+The rule exists because placeholder colour is always arbitrary. A violet card, a blue logo
+tile and a rainbow avatar row assert a brand the composition does not have; across 250 items
+the same three arbitrary hues become the catalog's identity instead of the author's. Value
+says everything colour was saying here, and says it truthfully.
+
+## The one rule
+
+> Placeholder content carries no hue. It is built from four alpha steps of the composition's
+> own ink over the composition's own ground, plus a hairline. Accent marks one element per
+> composition, and never a placeholder.
+
+## The ramp
+
+Four fill steps and a hairline. All of them are the ink at an alpha, so the ramp inverts for
+free on dark themes and needs no second table.
+
+| Step   | Ink alpha | What it is for                                                               |
+| ------ | --------- | ---------------------------------------------------------------------------- |
+| `ink`  | 100%      | Real content: headline, number, label. Not placeholder.                      |
+| `L1`   | 72%       | The subject. Chart bars, a filled logo mark, a play glyph, a front avatar.   |
+| `L2`   | 45%       | Support. A comparison series, avatars behind the front one, secondary icons. |
+| `L3`   | 18%       | Media fill and skeleton text lines. "Content lives here."                    |
+| `L4`   | 8%        | Recessed plate interiors. The tray a card sits in.                           |
+| `hair` | 14%       | Every 1px boundary. Replaces the separation a gradient edge was doing.       |
+
+Write them the way the file already writes colour:
+
+```css
+/* theme-token primitives (--fg / --surface available) */
+background: color-mix(in srgb, var(--fg, #f8fafc) 18%, transparent);
+
+/* fixed-palette ports (local --hf-ink, no theme tokens) */
+background: rgba(17, 24, 39, 0.18);
+```
+
+**Four steps, not eight.** Grays go muddy when adjacent steps sit close together, so every
+step is at least 1.6x the alpha of the one below it. Reaching for a fifth value is the signal
+that the layout, not the palette, needs the work. Snap to the nearest step instead.
+
+Contrast, measured against both shipped grounds (`neutral` light `#fcfcfd`, `bold` dark
+`#1b1230`): L1 is 7.7:1 / 8.9:1, L2 is 3.1:1 / 4.4:1, L3 and L4 are below 3:1 by design.
+Therefore **text never goes below L1**, and L2 is the floor for any graphic a viewer has to
+compare (a chart series, a state indicator). L3 and L4 are for surfaces only.
+
+## Depth without colour
+
+In priority order. Reach for the first one that works.
+
+1. **Value step.** Nothing sits on the same step as its ground. One full step of separation
+   minimum. This alone resolves most stacking.
+2. **Hairline.** `1px` of `hair` on every plate boundary. A border separates two surfaces more
+   cleanly than a gradient ever did, and survives video compression that eats a soft edge.
+3. **Negative space.** Padding is elevation. A plate with `--space-2` inside it reads as raised
+   without any fill difference at all.
+4. **Texture, at the finest grain only.** A `repeating-linear-gradient` at `L3`-and-below,
+   period 2-4px, achromatic. This is the one thing value cannot say: a flat gray rectangle
+   reads as an empty box, the same rectangle finely hatched reads as a surface with content on
+   it. Use it to mark media, nothing else.
+
+Shadows are allowed and must be achromatic and diffuse: `0 Npx 3Npx rgba(0,0,0,0.18)`. Never a
+coloured glow; a glow is an accent wearing a shadow's clothes.
+
+## Reading each kind in black and white
+
+A gray rectangle has to still say _screen_ and not _image_. Shape, aspect, glyph and texture
+carry the meaning that hue was carrying badly.
+
+| Kind            | Signature                                                                                                                                |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Screen / device | Device aspect + `--radius` + `hair` + scanline texture at L3 + inset vignette. The chrome is the signal; the fill is L3 and stays quiet. |
+| Video footage   | Screen signature plus a centred play triangle in a ring at L1. The glyph is what makes it video rather than a static screen.             |
+| Image           | 4:3 or 3:2 plate at L3 with a horizon-and-disc glyph at L2, offset toward a corner, never centred. Offset is what reads as "photo".      |
+| Card            | Plate at L4, `hair` border, two skeleton rules at L3 (100% and 62% width). Two rules of unequal length is the whole idiom.               |
+| Avatar / person | **Circle** at L2 with initials knocked out in the ground colour. Stacks differ by step (L1 front, L2, L3), never by hue.                 |
+| Logo / brand    | **Rounded square** at L1 with the mark knocked out in the ground colour. Every mark on the same step: a logo wall means "many, equal".   |
+| Chart series    | Flat fills. Primary series L1, comparison series L2, gridlines `hair`. Never a gradient inside a bar.                                    |
+| Text block      | Rounded rules at L3, widths 100 / 86 / 62%. The ragged right edge is what reads as prose.                                                |
+
+Circle means person, rounded square means app or brand. Keeping those two shapes distinct is
+what lets both live at the same value step without ambiguity.
+
+Why no gradient inside a chart bar: a vertical light-to-dark fill makes every bar lighter at
+its top, so the tallest bar reads _palest_ exactly where the eye lands to compare heights. The
+decoration contradicts the data. Flat fills are both plainer and more honest.
+
+## Accent
+
+The accent enum stays. `green` rides `--brand`, `blue` rides `--accent`, `violet` rides
+`--accent-2`, exactly as before, and every declared `accent` or `tone` variable keeps working
+unchanged. What changes is where accent is allowed to land:
+
+> Accent marks at most **one** element per composition, and only where the accent _is_ the
+> meaning: the selected tier, the current step, the figure a count-up lands on, the ink of a
+> stroke being drawn. Placeholder content is never accent-coloured.
+
+Fixed-palette ports have no theme tokens, so they get the accent through their own
+variable with a neutral fallback:
+
+```css
+/* was: --hf-accent: #2563eb; */
+--hf-accent: var(--accent, #18181b);
+```
+
+Unthemed, the item renders in pure black and white. Drop it into a themed composition and
+the author's accent lands on that one element and nowhere else. Where the accent is chosen by
+an enum, the lookup table maps to tokens, never to hex: `green` to `var(--brand, <neutral>)`,
+`blue` to `var(--accent, <neutral>)`, `violet` to `var(--accent-2, <neutral>)`. The enum's
+declared options and default are unchanged, so no mount breaks.
+
+"One element" means one role, not one node: an app mark repeated on three devices of the same
+mock is still one element.
+
+Killing accent outright was the alternative and it is worse. Accent is already load-bearing in
+exactly the cases where it is correct, and it is the only hook an author has for their own
+brand; removing it would push those cases into value tricks for a job one hue does better with
+one element. The failure was never that accent existed, it was that accent had become the
+default fill for every placeholder. Capping it at one element fixes the failure with no
+variable migration.
+
+## Gradients that stay
+
+The ban is on **hue-carrying fills**, not on the CSS function. These are material, not
+placeholder, and flattening them breaks the thing the item exists to do:
+
+- **Physical surfaces** — device bezels, brushed metal, glass, a screen's inner vignette.
+- **Sheens and sweeps** — `linear-gradient(90deg, transparent, rgba(255,255,255,0.75), transparent)`
+  driven across an element. That is motion, not decoration.
+- **Scrims and vignettes** — `rgba(0,0,0,α)` ramps that buy text contrast over media.
+- **Effects whose subject is the gradient** — aurora, liquid glass, chromatic aberration,
+  grain fields, shader transitions. The gradient is the product.
+
+All four are achromatic or physically motivated. If a gradient is neither, it is placeholder
+slop and it goes.
+
+## Checklist
+
+- [ ] No `#7c3aed`, `#2563eb`, `#6366f1`, `#8b5cf6`, `#a855f7`, `#4f46e5` anywhere in the item.
+- [ ] Every placeholder fill is `ink` at 72 / 45 / 18 / 8 / 14 percent, and nothing else.
+- [ ] At most one accent-coloured element, and it means something.
+- [ ] Text sits at L1 or above; L3 and L4 carry no text.
+- [ ] Every remaining gradient is a surface, a sweep, a scrim, or the effect itself.
+- [ ] `hyperframes check` passes, and a rendered frame was looked at.
diff --git a/.claude/skills/hyperframes-registry/references/search.md b/.claude/skills/hyperframes-registry/references/search.md
new file mode 100644
index 0000000..a87d4cc
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/search.md
@@ -0,0 +1,67 @@
+# Searching the catalog
+
+How `hyperframes catalog` ranks, what its `--json` envelope means, offline behaviour, and reporting a miss.
+
+Use the CLI as the primary discovery surface. **Search by intent before browsing:** the registry holds more items than you can scan by eye, so listing them and matching on names or tags is the slow path, and it fails whenever the author's wording differs from yours.
+
+```bash
+# Rank the whole catalog against what the beat should do
+npx hyperframes catalog --query "reveal a headline one line at a time"
+npx hyperframes add caption-clip-wipe
+```
+
+Search is local and sends nothing. By default it ranks on vocabulary shared with the item's name, title and description, so it only finds items that reuse your words; `--on-device` ranks by meaning instead, after a one-time model download. With `--json` the envelope names which tier answered, so check that rather than assuming a ranking happened.
+
+**Always query in English, whatever language the video is in.** The catalog is written in English and both tiers index it that way (the on-device model is English-only too). A query in another script produces no searchable terms and returns nothing at all. This is easy to get wrong on a Japanese or Chinese project, where the brief, the captions and the narration are all in that language and the query naturally follows: describe the _move_ in English, then write the on-screen copy in whatever language the video needs. If a query does come back with `No searchable words in query`, that is this rule, not a missing component, and it is not worth a gap report.
+
+Installability is applied after ranking, not before it: a name the vectors carry but this registry cannot serve is dropped from the results and counted in `dropped`, so a non-zero `dropped` means the two are different generations. The offline tier, the consent gate and refreshing a stale index are under "Search tiers" below.
+
+To browse or filter instead of search:
+
+```bash
+npx hyperframes catalog
+npx hyperframes catalog --type block
+npx hyperframes catalog --type component
+npx hyperframes catalog --type block --tag social
+npx hyperframes catalog --json
+npx hyperframes catalog --human-friendly
+```
+
+The normal table and `--json` modes only list matches; install a selected name with `hyperframes add <name>`. `--human-friendly` opens an interactive picker and installs the selected item immediately. In CI or agent workflows, prefer `--json` followed by an explicit `add`.
+
+### Report what the catalog does not have
+
+When the search comes back and nothing in it does the job, say so before you hand-author the move:
+
+```bash
+npx hyperframes feedback --search-miss "<the query you ran>" --wanted "<the move you needed>" --tier <the tier that answered>
+```
+
+`catalog --query` prints this line for you, pre-filled, and `--json` carries it as `report_gap` — so it is already in hand at the moment you decide nothing fits.
+
+**Report whenever nothing in the results does the job, on either tier.** Do not wait for the on-device tier to have answered: it needs a consented 33 MB download, so an agent run is on `words` unless it explicitly opted in, and gating on `on-device` would silence almost every report. The `--tier` value rides along so a vocabulary miss stays distinguishable from a meaning miss when these are read. Describe the effect you wanted, not the item name you imagined: what comes back is a list of moves worth building, and a report naming a non-existent item teaches nothing. This is the only path that sends a query anywhere, which is exactly why it is a separate deliberate command rather than something the search does on its own. It carries no rating and never lands in the rating metric.
+
+This is the whole demand signal for the catalog. Skipping it means the gap you hit gets guessed at from install counts instead, which cannot see a move nobody could install.
+
+If the CLI cannot reach the configured registry, inspect the raw manifest as a fallback:
+
+```bash
+curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
+```
+
+A registry the CLI cannot reach does **not** empty the catalog for **discovery**: a previously fetched manifest keeps serving past its 24h refresh window whenever revalidation fails, so `catalog` and `catalog --query` still list and rank against the last copy on disk.
+
+**`add` still needs the network, even for an item you installed yesterday.** Only manifests are cached; the item's actual files are fetched on every install. So offline you can search, and you can see what an item is, but installing it fails at the file fetch. Do not promise a user an offline install.
+
+Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
+
+See [discovery.md](./discovery.md) for details on filtering by type and tags.
+
+## Search tiers
+
+- **Search the catalog before writing motion by hand.** `npx hyperframes catalog --query "<the beat, in plain English>"`. Search is entirely local: there is no hosted tier, no account, and the query text is never sent anywhere. By default it ranks on vocabulary shared with the item's name, title, description and tags, which misses any phrasing that does not reuse the catalog's own wording. Add `--on-device` to rank by meaning instead (see the offline tier below).
+- **Query in English even when the video is not.** Both tiers index an English catalog, so a query in another script produces no searchable terms and returns nothing. Describe the move in English; the on-screen copy stays in whatever language the video needs. `No searchable words in query` means exactly this and is not a missing component, so do not report it as a catalog gap.
+- **Read which tier answered; never infer it from results appearing.** With `--json` the envelope carries `query`, `tier` (`on-device` or `words`), `tier_detail`, `dropped`, `unindexed`, `shown`, `total` and `results`, plus `top_score` when the answering tier produces one and `warnings` when a tier was asked for and could not run, or when a search returned nothing and a better tier is still waiting on someone's consent. A weak result on `words` is expected; the same result on `on-device` is a bug. `top_score` is on-device only and has no threshold behind it: the ranker returns the whole catalog in some order for every query, so read it as evidence rather than as a pass or fail.
+- **`dropped` and `unindexed` are opposite skews between the registry and the on-device index, and rewording the query fixes neither.** `dropped` counts ranked names this registry cannot install, so the strongest matches are the ones being lost. `unindexed` counts registry moves the index cannot see at all, which no query can ever return. Refreshing the registry is not the answer to either: its manifest carries a 24h TTL and heals itself, while the vectors are a separately published artifact fetched into `~/.hyperframes/catalog/`. Re-running with `--on-device` refetches that index when `unindexed` is above zero, so that is the remedy to hand the user. A pure over-coverage skew (`dropped` above zero while `unindexed` is zero) does not trigger the refetch; clearing `~/.hyperframes/catalog/` is the only way out of that one. Both counts are of names rather than of results, so either can exceed `total`.
+- **When a search comes back with nothing worth installing, say so.** `npx hyperframes feedback --search-miss "<the query you ran>" --wanted "<the move you needed>" --tier <the tier that answered>`. You do not have to assemble that line: `catalog --query` prints it pre-filled, and every `--json` search envelope carries it as `report_gap` with the query and tier already correct — fill in `--wanted` and send. This is the only path that sends a query anywhere, and it is a separate deliberate command precisely so plain `catalog --query` keeps its promise of sending nothing. **Report on either tier**, whenever the results do not do the thing; do not hold out for the on-device tier, which needs a consented 33 MB download and is therefore off in most agent runs — waiting for it means never reporting at all. The tier rides along in the report, so a vocabulary miss stays distinguishable from a meaning miss without you having to judge which one you hit. What comes back is a list of moves the catalog does not have yet, read directly rather than guessed from install counts, so the phrasing that matters is the effect you wanted, not the item name you imagined. It carries no rating and never lands in the rating metric.
+- **Offer the offline tier; never enable it silently.** A one-time ~33 MB download (a quantized ONNX build of `bge-small-en-v1.5` plus its tokenizer, pinned to a fixed revision) and the catalog vectors from the registry, both cached under `~/.hyperframes/`, neither added to the project or any package. Once cached it ranks by meaning with nothing sent. Say the size out loud and let the person decide, then pass `--on-device` (with `-y` to skip the prompt) once they agree. The interactive offer only fires on a TTY. Under `--json` there is no prompt, but a search that found nothing puts the same ask in `warnings`, so read that array and put the decision to the user yourself. When the person asks what the download is, why this model, or what leaves the machine, point them to https://hyperframes.heygen.com/developers/catalog-search.
diff --git a/.claude/skills/hyperframes-registry/references/templates.md b/.claude/skills/hyperframes-registry/references/templates.md
new file mode 100644
index 0000000..8834c95
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/templates.md
@@ -0,0 +1,417 @@
+# Contribute Templates
+
+Copy-paste starter templates for each component type. These embed the proven patterns that pass `lint` and `check`.
+
+## Caption Template
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&display=swap"
+      rel="stylesheet"
+    />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #111;
+        overflow: hidden;
+      }
+      #root-BLOCKNAME {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #111;
+      }
+      .cap-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .cg {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 32px;
+        max-width: 1700px;
+        overflow: visible;
+        opacity: 0;
+        visibility: hidden;
+      }
+      .cw {
+        font-family: "Montserrat", sans-serif;
+        font-weight: 900;
+        font-size: 128px;
+        color: #ffffff;
+        text-transform: uppercase;
+        line-height: 1;
+        display: inline-block;
+        -webkit-text-stroke: 3px rgba(0, 0, 0, 0.8);
+        paint-order: stroke fill;
+        text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root-BLOCKNAME"
+      data-composition-id="BLOCKNAME"
+      data-start="0"
+      data-duration="9"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div class="cap-container" id="cc-BLOCKNAME"></div>
+      <div
+        id="drv-BLOCKNAME"
+        class="clip"
+        data-start="0"
+        data-duration="9"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // REPLACE with actual transcript data
+        var WORDS = [
+          { text: "Welcome", start: 0.3, end: 0.65 },
+          { text: "to", start: 0.65, end: 0.8 },
+          { text: "the", start: 0.8, end: 0.95 },
+          { text: "future", start: 0.95, end: 1.4 },
+          // ... add all words
+        ];
+
+        var GROUPS = [
+          { start: 0.3, end: 1.3, wordStart: 0, wordEnd: 3, text: "Welcome to the future" },
+          // ... add all groups
+        ];
+
+        var container = document.getElementById("cc-BLOCKNAME");
+
+        GROUPS.forEach(function (g, gi) {
+          var groupEl = document.createElement("div");
+          groupEl.id = "PREFIX-cg-" + gi;
+          groupEl.className = "cg";
+
+          for (var wi = g.wordStart; wi <= g.wordEnd; wi++) {
+            var wordEl = document.createElement("span");
+            wordEl.id = "PREFIX-cw-" + wi;
+            wordEl.className = "cw";
+            wordEl.textContent = WORDS[wi].text;
+            groupEl.appendChild(wordEl);
+          }
+
+          // Pretext overflow prevention
+          if (window.__hyperframes && window.__hyperframes.fitTextFontSize) {
+            var _fit = window.__hyperframes.fitTextFontSize(g.text.toUpperCase(), {
+              fontFamily: "Montserrat",
+              fontWeight: 900,
+              maxWidth: 1550,
+              baseFontSize: 128,
+              minFontSize: 48,
+            });
+            if (_fit.fontSize < 128) {
+              for (var _fi = 0; _fi < groupEl.children.length; _fi++) {
+                groupEl.children[_fi].style.fontSize = _fit.fontSize + "px";
+              }
+            }
+          }
+          container.appendChild(groupEl);
+        });
+
+        var tl = gsap.timeline({ paused: true });
+
+        GROUPS.forEach(function (g, gi) {
+          var groupEl = document.getElementById("PREFIX-cg-" + gi);
+
+          // SHOW — set opacity to 1 (never use tl.from with opacity:0 here)
+          tl.set(groupEl, { opacity: 1, visibility: "visible" }, g.start);
+
+          // ENTRANCE — customize this per style
+          tl.from(groupEl, { scale: 1.3, duration: 0.15, ease: "back.out(2)" }, g.start);
+
+          // KARAOKE — highlight each word
+          for (var wi = g.wordStart; wi <= g.wordEnd; wi++) {
+            var wordEl = document.getElementById("PREFIX-cw-" + wi);
+            tl.to(wordEl, { color: "#FFD700", scale: 1.1, duration: 0.06 }, WORDS[wi].start);
+            tl.to(wordEl, { color: "#FFFFFF", scale: 1, duration: 0.08 }, WORDS[wi].end);
+          }
+
+          // EXIT
+          tl.to(groupEl, { opacity: 0, scale: 0.9, duration: 0.1 }, g.end - 0.1);
+
+          // HARD KILL (mandatory)
+          tl.set(groupEl, { opacity: 0, visibility: "hidden" }, g.end);
+        });
+
+        window.__timelines["BLOCKNAME"] = tl;
+      })();
+    </script>
+  </body>
+</html>
+```
+
+**Replace checklist:**
+
+- `BLOCKNAME` → your block name (e.g., `cap-swoosh`)
+- `PREFIX` → short unique prefix for IDs (e.g., `sw`)
+- Font family, weight, size → your style's typography
+- Entrance animation → your style's entrance
+- Karaoke highlight → your style's active word treatment
+- Colors → your style's palette
+
+---
+
+## VFX Template
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: #030308;
+        overflow: hidden;
+      }
+      #root-BLOCKNAME {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #030308;
+      }
+      #canvas-BLOCKNAME {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="root-BLOCKNAME"
+      data-composition-id="BLOCKNAME"
+      data-start="0"
+      data-duration="10"
+      data-width="1920"
+      data-height="1080"
+    >
+      <canvas id="canvas-BLOCKNAME" width="1920" height="1080"></canvas>
+      <div
+        id="drv-BLOCKNAME"
+        class="clip"
+        data-start="0"
+        data-duration="10"
+        data-track-index="0"
+        style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
+      ></div>
+    </div>
+    <script>
+      (function () {
+        window.__timelines = window.__timelines || {};
+
+        // Seeded PRNG — NEVER use Math.random()
+        function mulberry32(a) {
+          return function () {
+            a |= 0;
+            a = (a + 0x6d2b79f5) | 0;
+            var t = Math.imul(a ^ (a >>> 15), 1 | a);
+            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+          };
+        }
+        var rng = mulberry32(42);
+
+        var W = 1920,
+          H = 1080;
+        var canvas = document.getElementById("canvas-BLOCKNAME");
+        var renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+        renderer.setSize(W, H);
+        renderer.setPixelRatio(1);
+        renderer.toneMapping = THREE.ACESFilmicToneMapping;
+        renderer.toneMappingExposure = 1.1;
+
+        var scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x030308);
+        var camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100);
+        camera.position.set(0, 0, 8);
+
+        // YOUR SCENE SETUP HERE
+        // - lights
+        // - geometry
+        // - materials
+
+        // State proxy — GSAP animates this, render reads it
+        var st = {
+          rotY: 0,
+          camZ: 8,
+          // add your animated properties
+        };
+
+        var tl = gsap.timeline({ paused: true });
+
+        // YOUR TWEENS HERE
+        tl.to(st, { rotY: Math.PI * 2, duration: 10, ease: "none" }, 0);
+
+        window.__timelines["BLOCKNAME"] = tl;
+
+        function renderScene() {
+          // Apply state to Three.js objects
+          camera.position.z = st.camZ;
+          // mesh.rotation.y = st.rotY;
+
+          renderer.render(scene, camera);
+        }
+
+        // Render via onUpdate — NO requestAnimationFrame
+        tl.eventCallback("onUpdate", renderScene);
+        renderScene();
+      })();
+    </script>
+  </body>
+</html>
+```
+
+**Replace checklist:**
+
+- `BLOCKNAME` → your block name (e.g., `vfx-chrome-blob`)
+- Scene setup → your geometry, lights, materials
+- State proxy → your animated properties
+- Tweens → your animation timeline
+- renderScene → apply state to your Three.js objects
+
+---
+
+## registry-item.json Templates
+
+**For blocks:**
+
+```json
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "BLOCKNAME",
+  "type": "hyperframes:block",
+  "title": "Human-Readable Title",
+  "description": "One sentence: what it does and who uses it",
+  "dimensions": { "width": 1920, "height": 1080 },
+  "duration": 10,
+  "tags": ["category", "subcategory"],
+  "files": [
+    {
+      "path": "BLOCKNAME.html",
+      "target": "compositions/BLOCKNAME.html",
+      "type": "hyperframes:composition"
+    }
+  ]
+}
+```
+
+**For components** (no `dimensions` or `duration`):
+
+```json
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "COMPONENTNAME",
+  "type": "hyperframes:component",
+  "title": "Human-Readable Title",
+  "description": "One sentence: what it does",
+  "tags": ["category"],
+  "files": [
+    {
+      "path": "COMPONENTNAME.html",
+      "target": "compositions/components/COMPONENTNAME.html",
+      "type": "hyperframes:snippet"
+    }
+  ]
+}
+```
+
+Tags by category:
+
+- Captions: `captions`, `viral`, `professional`, `karaoke`, `minimal`
+- VFX: `three-js`, `particles`, `shader`, `gpu`
+- Transitions: `transition`, `shader`, `wipe`, `dissolve`
+- Blocks: `lower-third`, `social`, `title-card`, `data-viz`
+- Components: `effect`, `overlay`, `text-treatment`
+
+---
+
+## Component Template
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      *,
+      *::before,
+      *::after {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background: transparent;
+        overflow: hidden;
+      }
+      .COMPNAME-wrap {
+        position: absolute;
+        inset: 0;
+        overflow: hidden;
+        pointer-events: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="COMPNAME-wrap">
+      <!-- Your reusable effect/overlay here -->
+    </div>
+    <script>
+      (function () {
+        // Component snippet — no data-composition-id, no __timelines.
+        // The parent composition controls timing.
+        // Keep all class names and IDs prefixed with COMPNAME.
+      })();
+    </script>
+  </body>
+</html>
+```
+
+**Replace checklist:**
+
+- `COMPNAME` → your component name (e.g., `shimmer-sweep`)
+- Background should be `transparent` so it overlays cleanly
+- No `data-composition-id` or `window.__timelines` — the parent owns timing
diff --git a/.claude/skills/hyperframes-registry/references/wiring-blocks.md b/.claude/skills/hyperframes-registry/references/wiring-blocks.md
new file mode 100644
index 0000000..d3f4474
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/wiring-blocks.md
@@ -0,0 +1,61 @@
+# Wiring Blocks
+
+Blocks are standalone compositions with their own `data-composition-id`, dimensions, duration, and GSAP timeline. Include them in a host composition using `data-composition-src` on a `<div>`.
+
+## Basic wiring
+
+After `hyperframes add data-chart`, wire it into your `index.html`:
+
+```html
+<div id="stage" data-composition-id="main" data-width="1920" data-height="1080" data-duration="20">
+  <video id="a-roll" src="video.mp4" data-start="0" data-duration="20" data-track-index="0"></video>
+
+  <!-- Block: appears at 2s, plays for 15s, on layer 1 -->
+  <div
+    data-composition-id="data-chart"
+    data-composition-src="compositions/data-chart.html"
+    data-start="2"
+    data-duration="15"
+    data-track-index="1"
+    data-width="1920"
+    data-height="1080"
+  ></div>
+</div>
+```
+
+## Required attributes
+
+| Attribute              | Description                                                          |
+| ---------------------- | -------------------------------------------------------------------- |
+| `data-composition-src` | Path to the block HTML file (relative to index.html)                 |
+| `data-composition-id`  | Unique ID matching the block's internal composition ID               |
+| `data-start`           | When the block appears in the host timeline (seconds)                |
+| `data-duration`        | How long the block plays (seconds, at most the block's own duration) |
+| `data-track-index`     | Layer ordering — higher numbers render in front                      |
+| `data-width`           | Block canvas width (match the block's dimensions)                    |
+| `data-height`          | Block canvas height (match the block's dimensions)                   |
+
+## Timeline coordination
+
+The block's internal GSAP timeline runs independently from the host timeline. The HyperFrames runtime loads the sub-composition, finds its `window.__timelines` registration, and seeks the block in sync with the host, offset by `data-start`. You do NOT need to reference the block's timeline in your host's GSAP code.
+
+## Positioning blocks
+
+To position a block in a specific area of the screen, add CSS:
+
+```html
+<div
+  data-composition-id="data-chart"
+  data-composition-src="compositions/data-chart.html"
+  data-start="2"
+  data-duration="15"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+  style="position: absolute; right: 0; top: 0; width: 40%; height: 100%;"
+></div>
+```
+
+## Multiple blocks
+
+Add additional `<div data-composition-src="...">` siblings with non-overlapping or overlapping `data-start` values — each block's timeline is independent and seeked in sync by the runtime.
diff --git a/.claude/skills/hyperframes-registry/references/wiring-components.md b/.claude/skills/hyperframes-registry/references/wiring-components.md
new file mode 100644
index 0000000..9521a21
--- /dev/null
+++ b/.claude/skills/hyperframes-registry/references/wiring-components.md
@@ -0,0 +1,39 @@
+# Wiring Components
+
+Components are effect snippets — HTML, CSS, and optionally JS that you merge directly into an existing composition. Unlike blocks, components have no standalone timeline; they participate in the host composition's timeline.
+
+## General process
+
+1. Run `hyperframes add <component-name>`
+2. Open the installed file (e.g., `compositions/components/grain-overlay.html`)
+3. Read the comment header for usage instructions
+4. Copy the parts into your host composition:
+   - **HTML elements** — inside your `<div data-composition-id="...">`
+   - **CSS styles** — into your composition's `<style>` block
+   - **JS setup** — into your composition's `<script>`, before your timeline code
+   - **Timeline calls** — into your GSAP timeline (if the component exposes them)
+
+## Example: grain-overlay (CSS-only, no timeline integration)
+
+```html
+<!-- Paste the overlay div into your composition -->
+<div
+  id="grain-overlay"
+  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;"
+>
+  <div class="grain-texture"></div>
+</div>
+```
+
+Then paste the CSS keyframes and `.grain-texture` rule into your styles. No GSAP timeline calls needed — the grain animates via CSS `@keyframes`.
+
+## Example: shimmer-sweep (needs timeline integration)
+
+See `examples/add-component.md` for the full shimmer-sweep walkthrough (HTML wrapping, CSS, JS setup, and timeline call).
+
+## Key principles
+
+- Components inherit the host composition's dimensions and duration
+- Place component HTML at the appropriate z-index relative to your content
+- Read the comment header in each snippet for customizable values
+- Run `hyperframes lint` after wiring to catch structural issues
diff --git a/.claude/skills/hyperframes/SKILL.md b/.claude/skills/hyperframes/SKILL.md
new file mode 100644
index 0000000..e0a01d0
--- /dev/null
+++ b/.claude/skills/hyperframes/SKILL.md
@@ -0,0 +1,74 @@
+---
+name: hyperframes
+description: Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.
+---
+
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](references/plugin-installation.md) when this skill is inside a HyperFrames plugin.
+
+# HyperFrames
+
+HyperFrames renders HTML to video by seeking a paused timeline frame by frame, so every render is identical; the person edits the same files in the Studio preview. Use it unless another framework or a plain browser recording is asked for. Run the CLI as `npx hyperframes <command>` (`/hyperframes-cli`); at the start of a new video, `npx hyperframes usage --json` reports the person's remaining plan usage (say "unknown" when it is).
+
+`index.html` is the root composition: it declares the video's variables and mounts one scene per sub-composition from `compositions/`. Media and fonts live in `assets/`. A new project: `npx hyperframes init <dir>`. A website as the subject: `npx hyperframes capture <url> --json`.
+
+Build what was asked: no voiceover or captions and no new aspect ratio unless the request or the source calls for them; a film over ~15 s that tells something gets music and sound on its visible actions unless the person asked for silence (`references/sound.md`). A new video is 1920×1080 at 30 fps. A question, a hold or a loose idea gets an answer or a proposal, not an edit. Before hand-writing a named effect, transition, caption style, chart or card, search the registry (`/hyperframes-registry`). Any media (a presenter or avatar, footage, voice, music): `/media-use`, which says when HeyGen is needed and what is free. Show real things from their source (the product's screens, the brand's logo, a real place's imagery); draw only what has none.
+
+## Contract
+
+`npx hyperframes check --json` reports most violations with a `Fix:` line.
+
+1. Every timed element has `class="clip"`, `data-start` and `data-duration` in seconds, and shows over `[start, start + duration)`: land an end state just before its end. `data-track-index` is only a Studio lane; paint order is `z-index`.
+2. The video's length is the root's `data-duration`: overrun is cut, an early end holds the last frame.
+3. Each composition builds one paused timeline and registers it after its tweens: `window.__timelines["<data-composition-id>"] = tl`.
+4. No `Date.now()`, unseeded `Math.random()`, network fetches, timers or `repeat: -1`. Everything visible is a function of timeline time.
+5. Never tween `display`, `visibility` or `autoAlpha` on a `.clip`; animate a child.
+6. No CSS `transform` on an element GSAP transforms; animate transforms, not `left`/`top`/`width`/`height`.
+7. Never `play()`, `pause()` or seek media. A `<video>` keeps its sound with `data-has-audio="true"`, else it is `muted`; music, voice, replacement sound and J/L cuts are a separate `<audio>`.
+8. Every `<audio>` has an `id` or it is left out of the mix. No `crossorigin` on media. Time a `<video>` or its wrapper, never both.
+9. Only the bundled fonts (`references/format.md`) resolve by name; any other family needs `@font-face` to a file in `assets/fonts/`.
+10. Asset paths are root-relative (`assets/...`), in sub-compositions too.
+11. Grades, grain, blur and vignettes on footage go through `npx hyperframes media-treatment` (`/media-use`), never CSS filters.
+12. A scene file puts its styles, markup and scripts inside `<template>` and styles its root as `#root`. Intended overflow or overlap: `data-layout-allow-overflow`, `data-layout-allow-overlap`.
+
+## Keep it editable
+
+Studio edits the tags you write.
+
+- One scene per sub-composition, short readable ids; the root holds only scene hosts, media and audio.
+- Timed elements are written in the HTML, not made by script, each with a stable `id`.
+- Copy, brand colours and swappable media are variables (`data-var-text`, `data-var-src`, `var(--id)`).
+- One kind per track: `data-track-kind="graphics"` on scene and overlay hosts, `captions` on the one host that holds every caption group.
+- Content stays inside the 90% action-safe box, captions and key text inside 80% title-safe; Studio draws the guides, never add them.
+
+## Work loop
+
+- An existing project: `npx hyperframes timeline --json` shows what plays when; before any change, `npx hyperframes history --since mine --who <you>` shows what the person changed since your last turn: build on it (`/hyperframes-cli`).
+- A new film over ~15 s that tells something: its type's file (below), then `references/story.md`: three storylines that are three different films, in words only; the person picks unless they asked for the file or no stops. Then `SPEC.md` (`references/spec.md`): every adjective as a number, the defaults banned by name, the shots by frame.
+- After your last edit: `npx hyperframes check --json`; fix every error, weigh every warning. A film: `npx hyperframes snapshot --review` and `references/review.md`, ending in `REVIEW.md`. A small edit: snapshot what you changed (`--at`, `--range`, `--composition`) and look before you reply.
+- Render when the person approves the Studio preview, asks for the file or asks for no stops, after your check and review pass; otherwise stop at the preview and wait.
+
+## The HyperFrames desktop app
+
+Call it "the HyperFrames desktop app", never "Studio"; offer it as the better way to keep editing, not the only one.
+
+- Before the delivery render of a new video, open the Studio preview, even in no-questions mode, and say they can edit there. If `preview` printed "Keep editing by chatting with Framey", add that the **Edit with Framey** button opens the app.
+- After the delivery render, pass on its Framey line in your own words: offer to run the `hyperframes open` it names or give its download link; else say nothing (autonomous: the delivery note).
+- When any command says to run `catch-up`, run `npx hyperframes catch-up [dir]` before your next change; what it lists is their work, not a new request.
+
+## What to read
+
+| The request | Read |
+| --- | --- |
+| Launch, promo, feature | `references/types/launch.md` |
+| Explainer, tutorial | `references/types/explainer.md` |
+| Music video | `references/types/music.md` |
+| Chart, numbers | `references/types/data.md` |
+| Vertical or social clip | `references/types/vertical.md` |
+| 3D, simulation, generative | `references/types/3d.md` |
+| Character, mascot, story short | `references/types/character.md` |
+| A real place or map; a website, PR or script; kinetic type | `references/film.md` |
+| Captions; cards over a talking head | `references/captions.md`; `references/overlays.md` |
+| Motion: eases, titles, cuts, punch-ins, speed, holds | `references/motion.md` |
+| Scenes, attributes, media, lint; GSAP, Lottie, 3D, canvas | `references/format.md`; `references/runtimes.md` |
+
+Decks: `/slideshow`. Remotion source: `/remotion-to-hyperframes`. Figma: `/figma`. Installing, refreshing or upgrading skills and the pinned CLI: `references/skill-lifecycle.md`.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/FRAME.md
new file mode 100644
index 0000000..c082ea2
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/FRAME.md
@@ -0,0 +1,289 @@
+---
+version: alpha
+name: Biennale Yellow — Frame (video / frame layer)
+description: >
+  Video-first companion to Biennale Yellow's design.md. The unit is the frame (1920×1080). Atoms
+  are identical and sacred — warm parchment grounds, a single deep indigo ink, solar yellow deployed
+  as bloom / panel / tile underprint, Instrument Serif display + Archivo sans + JetBrains Mono data,
+  1px hairline rules as the only border, atmospheric depth (no shadows), and the bottom-right
+  pagenum. Composition + frame scale rewritten. Restraint is the rule; 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:
+  paper: "#E9E5DB"
+  paper-deep: "#DCD6C4"
+  sun: "#F1EE2E"
+  sun-soft: "#F8F39B"
+  haze: "#F0DA7C"
+  ink: "#1B2566"
+  ember: "#E26B4A"
+
+typography:
+  # — reading + data ramp —
+  body:    { fontFamily: "Archivo", cqw: 0.85, weight: 400, lineHeight: 1.5, color: "ink" }
+  body-lede:{ fontFamily: "Archivo", cqw: 0.95, weight: 400, lineHeight: 1.55 }
+  micro-label:{ fontFamily: "Archivo", px: 13, weight: 600, tracking: "0.18em", upper: true }
+  rail-label:{ fontFamily: "Archivo", px: 13, weight: 600, tracking: "0.32em", upper: true }
+  mono-data:{ fontFamily: "JetBrains Mono", cqw: 0.73, weight: 400, tracking: "0.04em" }
+  pagenum: { fontFamily: "JetBrains Mono", px: 13, weight: 400, tracking: "0.08em", opacity: 0.75 }
+  # — display ramp (Instrument Serif 400, tight, negative tracking) —
+  ledger-title:{ fontFamily: "Instrument Serif", cqw: 1.55, weight: 400, lineHeight: 1.15 }
+  strand-title:{ fontFamily: "Instrument Serif", cqw: 1.7, weight: 400, lineHeight: 1.1 }
+  headline-sm:{ fontFamily: "Instrument Serif", cqw: 2.9, weight: 400, lineHeight: 1.0 }
+  headline:{ fontFamily: "Instrument Serif", cqw: 4.6, weight: 400, lineHeight: 1.06, tracking: "-0.005em" }
+  date-rail:{ fontFamily: "Instrument Serif", cqw: 5.0, weight: 400, lineHeight: 0.96, tracking: "-0.005em" }
+  display-it:{ fontFamily: "Instrument Serif", cqw: 7.0, weight: 400, italic: true, lineHeight: 1.04, tracking: "-0.005em" }
+  numeral-md:{ fontFamily: "Instrument Serif", cqw: 7.5, weight: 400, lineHeight: 0.92, tracking: "-0.01em" }
+  display:{ fontFamily: "Instrument Serif", cqw: 14.6, weight: 400, lineHeight: 0.86, tracking: "-0.018em" }
+  numeral-jumbo:{ fontFamily: "Instrument Serif", cqw: 28.0, weight: 400, lineHeight: 0.84, tracking: "-0.04em" }
+
+spacing:
+  pad-edge: "4cqw"
+  pad-region: "4.2cqw"
+  gap-region: "2.5cqw"
+
+components:
+  sun-bloom:
+    background: "radial gradient {colors.sun} core → {colors.sun-soft} → {colors.haze} → transparent on {colors.paper}"
+    size: "42–70% of the frame, off-center or behind the focal element"
+    description: "The primary depth layer. One per frame; a flat parchment frame reads as broken."
+  ember-bloom:
+    background: "radial {colors.ember} at 15–22% opacity"
+    placement: "corner opposite the sun-bloom"
+    description: "Subordinate counter-temperature balance; never dominant."
+  block-tile:
+    backgroundColor: "{colors.sun} at 40–70% opacity"
+    layout: "rectangles on an 8×4 grid behind cover/colophon"
+    description: "A layered poster underprint."
+  yellow-panel:
+    backgroundColor: "{colors.sun}"
+    textColor: "{colors.ink}"
+    rounded: "0"
+    border: "none (meets paper directly)"
+    description: "Full-bleed column/third — the strongest color statement, ink on top."
+  hairline-rule:
+    rule: "1px solid {colors.ink} (soft variant: {colors.ink} at 18–20%)"
+    description: "The ONLY border — header underlines, footer tops, ledger separators. No thicker rule exists."
+  strand-row:
+    borderBottom: "1px {colors.ink} 18–20%"
+    typography: "{typography.strand-title} + {typography.body}"
+    description: "Serif numeral + serif title + sans body. Numbered editorial lists."
+  ledger-row:
+    borderBottom: "1px {colors.ink} 18–20%"
+    typography: "{typography.mono-date} · {typography.ledger-title} · {typography.body} · {typography.mono-data}"
+    description: "4-col tabular — mono date · serif title · sans venue · mono duration (right)."
+  footer-band:
+    borderTop: "1px solid {colors.ink} per cell"
+    typography: "{typography.micro-label} + {typography.body-sm}"
+    description: "4-column metadata strip at the foot of cover/colophon."
+  vertical-rail:
+    typography: "{typography.rail-label}"
+    transform: "rotated up the left edge"
+    description: "Section marker on chapter/divider frames."
+  pagenum:
+    typography: "{typography.pagenum}"
+    color: "{colors.ink} at 75%"
+    placement: "bottom-right"
+    description: "The only persistent chrome."
+---
+
+# Biennale Yellow — Frame (video / frame layer)
+
+## Overview
+
+Biennale Yellow at frame scale is a **literary-editorial system** in the register of an art
+biennale catalogue: warm parchment, a single deep indigo ink, and solar yellow as atmosphere. No
+cards, no buttons, no shadows, no rounded corners — the structural vocabulary is just **paper, ink,
+and yellow.** Depth is delivered by soft radial **sun blooms**, not elevation.
+
+The voice is three faces in rigid roles: **Instrument Serif** (weight 400, tight line-height,
+negative tracking) carries every display, numeral, and quote from 40px to 720px+; **Archivo** carries
+body and the wide-tracked uppercase micro-label; **JetBrains Mono** carries every date, figure, and
+the pagenum. Text is **always ink** — contrast comes from size and weight, never color. The mood
+sits between a folded museum brochure and a slow-reading literary quarterly: confident, atmospheric,
+deeply restrained.
+
+**Key characteristics at frame scale:**
+
+- **Warm parchment ground** on every frame; never white, never gray.
+- **Single ink** (`{colors.ink}`) for all type and all rules; **solar yellow** as bloom / panel / tile.
+- **Instrument Serif 400** display (tight, negative-tracked); **Archivo** body + micro-labels; **JetBrains Mono** data.
+- **1px hairline rules** are the only border — no thicker weight exists; **no shadows, no rounded corners**.
+- **Sun bloom** is the primary depth layer on every frame; an ember counter-bloom adds warm-cool tension.
+- **Editorial-restrained** — sparse reads as elegant; crowding breaks the catalogue feel.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one Instrument Serif moment dominates at 3–6× its neighbor; the sun bloom centers the eye.
+- **Silence** — frames read **55–60% empty**; the **ledger is the one dense exception** (density via quiet hairline repetition, not richness).
+- **Restraint** — **one ink color** for all type and rules; **one sun bloom** per frame (+ optional subordinate ember); never invert (no yellow text on ink).
+- **Reference** — aim at an **art-biennale catalogue / slow exhibition poster / literary quarterly**; failure looks like a **flat CMS template** (no bloom) or a **bordered-card deck**.
+
+- **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:** `pad-edge` 4cqw (40–76px equivalent) — the elegance depends on edge negative space; only blooms, tiles, and panels bleed.
+
+**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; bloom sizes scale
+as `%` of the frame.
+
+## Colors
+
+Tokens identical to the source. `{colors.paper}` is the universal ground; `{colors.ink}` (deep
+indigo navy) is **every line of type and every rule** — there is no secondary text color.
+`{colors.sun}` deploys three ways: the **bloom** (radial atmosphere), the **yellow-panel**
+(full-bleed poster fill, ink on top), and the **block-tile** underprint. `{colors.sun-soft}`/`haze`
+are bloom mid/outer stops. `{colors.ember}` appears **only** as a 15–22% counter-bloom — never a
+fill, never text. **The system never inverts** — ink on sun is correct; yellow text on ink does not exist.
+
+## Typography
+
+Two ramps. The **reading/data ramp** (Archivo body 0.85cqw ink, micro-labels in px, JetBrains Mono
+data) carries copy + chrome; the **display ramp** (Instrument Serif `ledger-title` 1.55cqw →
+`numeral-jumbo` 28cqw) carries every headline, numeral, and quote.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono/labels in px are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display`; 4–6 → `headline`; 7+ → `headline-sm`. The jumbo numeral is a divider's whole point — don't shrink it.
+- **Instrument Serif is weight 400 only** (its contrast is the weight signal), tight line-height (0.84–1.06), negative tracking; **micro-labels uppercase Archivo 600, ≥0.16em**; **mono for all numerals/dates**. No bold serif, no second text color, no mono in body/display.
+
+## Depth & Surface
+
+Atmospheric, not structural. Depth from:
+
+- **Sun bloom** — the primary layer: a layered radial (sun 70–95% core → sun-soft → haze 18–22% → paper 0%), 42–70% of the frame. One per frame.
+- **Ember bloom** — a 15–22% peach counter-bloom in the opposite corner; always subordinate.
+- **Block-tile underprint** — translucent yellow rectangles on an 8×4 grid (cover/colophon).
+- **Yellow panel** — the one "hard" color statement: a flooded column/third, ink on top.
+- **Hairline rules** — 1px ink for structural separation (soft 18–20% variant for dense rows).
+
+**Ceiling:** zero box-shadow, zero text-shadow, zero rounded corner, no border thicker than 1px.
+
+## Shapes
+
+- **0 radius on everything** — strict rectangles. Blooms are edgeless (they fade into paper).
+
+## Components
+
+- **sun-bloom / ember-bloom / block-tile** — the atmospheric depth set. **yellow-panel** — the poster-fill statement.
+- **hairline-rule** — the only border (1px ink; soft variant for dense rows).
+- **strand-row / ledger-row / footer-band** — the editorial list, tabular calendar, and metadata strip.
+- **vertical-rail** — rotated chapter marker. **pagenum** — the bottom-right mono chrome.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> A sun bloom + bottom-right pagenum on every frame; sparse is the default.
+
+### 1 · Cover (identity · move: display + sun bloom · left)
+
+**Ground** paper + a large sun-bloom (left-of-center) + an ember counter-bloom (opposite corner).
+**Composes** micro-label, display, date-rail, footer-band, pagenum. **Focal** a 2-line Instrument
+Serif `display` (italic key word) in ink, left, under a micro-label. **Chrome** a serif date-rail
+top-right; a 4-column footer-band at the foot. **Accent** the sun bloom + yellow. **Silence** the
+bloom holds the open space. **Fixed** ink type, one bloom, 1px footer rules, no shadow. **Free**
+title, date, footer cells. **Density** low.
+
+### 2 · Chapter Divider (section · move: jumbo numeral · vertical rail)
+
+**Ground** paper + a corner-anchored sun-bloom. **Composes** vertical-rail, numeral-jumbo,
+headline-sm. **Focal** a single huge Instrument Serif `numeral-jumbo` (≈28cqw) dominating, with a
+serif title beneath. **Chrome** a rotated vertical-rail label up the left edge; pagenum. **Accent**
+the bloom behind the numeral. **Silence** ~60%. **Fixed** serif 400, jumbo numeral, rail label.
+**Free** the ordinal, title, rail text. **Density** low.
+
+### 3 · Ledger (catalog · move: hairline tabular rows · the dense frame)
+
+**Ground** paper (bloom optional, subtle). **Composes** headline-sm + micro-label topbar, ledger-rows.
+**Focal** a 4-column tabular calendar — mono date · serif title · sans venue · mono duration —
+separated by hairline-soft rules under a 1px ink header rule. **Chrome** pagenum. **Accent** none —
+density through quiet repetition, not color. **Silence** tight — the density exception (achieved by
+repetition, not richness). **Fixed** hairline rules, mono dates, serif titles. **Free** rows, venues.
+**Density** dense-exception.
+
+### 4 · Manifesto / Quote (quote · move: italic serif · centered bloom)
+
+**Ground** paper + a centered sun-bloom. **Composes** numeral-lg quote mark, display-it, attribution.
+**Focal** a 2-line Instrument Serif **italic** `display-it` quote in ink, centered, under an
+oversized serif quote mark. **Chrome** a micro-label attribution. **Accent** the centered bloom.
+**Silence** ~60% — deliberately open. **Fixed** italic serif, one bloom, ink. **Free** quote,
+attribution. **Density** low.
+
+### 5 · Poster Panel (statement · move: yellow panel · split)
+
+**Ground** paper with a full-bleed `{colors.sun}` `yellow-panel` (column or third). **Composes**
+yellow-panel, micro-label, headline. **Focal** an Instrument Serif `headline` in ink sitting **on
+the sun panel** (ink-on-yellow — a signature). **Chrome** micro-label; pagenum. **Accent** the panel
+itself. **Silence** the paper side stays open. **Fixed** ink-on-sun, panel meets paper directly (no
+border), no shadow. **Free** headline, panel side/width. **Density** low.
+
+### 6 · Strand List (programme · move: numbered editorial rows · left)
+
+**Ground** paper + a subtle sun-bloom. **Composes** micro-label, headline-sm, strand-rows. **Focal**
+a numbered list — serif numeral + serif title + sans body, hairline-soft separators. **Chrome**
+micro-label; pagenum. **Accent** the bloom. **Silence** moderate; rows breathe. **Fixed** serif
+numerals, hairline-soft rules. **Free** items, copy. **Density** standard.
+
+## Composition Rules
+
+### Do
+
+- Start on **warm parchment**; add **one sun bloom** (optionally an ember counter-bloom) — atmosphere is the depth.
+- Set every line in **ink**; use **Instrument Serif 400** (tight, negative-tracked) for display, **Archivo** body, **JetBrains Mono** for all numerals/dates.
+- Make every separator a **1px ink hairline** (soft variant for dense rows); flood a **yellow panel** for poster moments (ink on top).
+- Keep micro-labels **uppercase Archivo 600, 0.16–0.32em**; pin the **pagenum** bottom-right.
+- Lean sparse; left/asymmetric on cover/chapter/list, centered on manifesto.
+
+### Don't
+
+- No drop shadows, no rounded corners, no bordered cards, no border thicker than 1px.
+- No second text color; no bold Instrument Serif; no inverted ink grounds.
+- No mono for body/display; no font substitutes.
+- Don't crowd the canvas — sparse reads as elegant; don't omit the bloom (flat parchment reads as a CMS template).
+- Don't blow a headline edge-to-edge — step the ramp down.
+
+## Aspect-Ratio Behavior
+
+| Treatment       | 16:9                                           | 9:16                       | 1:1                        |
+| --------------- | ---------------------------------------------- | -------------------------- | -------------------------- |
+| Cover           | display left, date-rail top-right, footer foot | display top, footer stacks | display upper, footer foot |
+| Chapter Divider | jumbo numeral, rail left                       | numeral centered, rail top | numeral centered           |
+| Ledger          | 4-col rows                                     | drop venue col → 3-col     | 3-col                      |
+| Manifesto       | centered italic                                | centered, taller           | centered                   |
+| Poster Panel    | side panel + paper                             | top/bottom panel band      | panel third                |
+| Strand List     | numbered rows                                  | rows (tighter)             | rows                       |
+
+`pad-edge` holds on the short edge; display clamps use the shorter axis so portrait doesn't blow out
+headlines. Keep load-bearing lines ≥ 1.4cqw. Ledger/strand fixed first columns may tighten on 9:16.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Programme titles, venues, and dates are content; the system supplies paper, ink, yellow.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, dates, durations, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `NN JUN`, `N m`. Ledger dates/durations and chart values especially carry placeholders
+until the script supplies them. Chapter ordinals (01, 02…) are decorative.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one serif display moment dominates; the bloom centers the eye.
+- **Silence** — sparse frames 55–60% open; only the ledger runs dense (via repetition, not richness).
+- **One color** — ink for all text + rules; sun for bloom/panel/tile; ember counter-bloom only; no inversion.
+- **Type** — Instrument Serif 400 tight negative-tracked, fit-to-measure; micro-labels uppercase 0.16em+; mono numerals; ≥1.4cqw floor.
+- **Depth** — 0 shadow, 0 rounded corner, 1px hairlines only; one sun bloom present.
+- **Anchor** — left on cover/chapter/list, centered on manifesto; pagenum bottom-right.
+- **Fabrication** — every numeral/date traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the source's 280ms crossfade is a deck mechanic.
+- **Instrument Serif + Archivo + JetBrains Mono via Google Fonts.** CJK: Smiley Sans (display) / Noto Serif SC (body) / Noto Sans SC (labels); italic serif and mono tabular figures have no exact Hanzi equal — keep ledger dates Latin.
+- **9:16 / 1:1 are guidance**; the `min(vw,vh)` clamp pattern keeps display from blowing out — verify per ratio.
+- Sun/ember blooms, block tiles, yellow panels, and hairline rules are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/caption-skin.html
new file mode 100644
index 0000000..dc103fc
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/caption-skin.html
@@ -0,0 +1,220 @@
+<!--
+  Biennale Yellow — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a biennale 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-parchment card on a single 1px hairline indigo-ink border — biennale's
+  ONLY border — square corners, NO shadow (biennale's depth is atmospheric, never cast).
+  Instrument Serif, sentence case, ink glyphs. Upcoming words sit in faint ink; the
+  current word gets a solar-yellow underprint (the brand's signature "sun as panel /
+  underprint", a hard square block, no blur) with ink reading on top; spoken words
+  settle to solid ink, underprint cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 parchment card — single 1px hairline ink border (biennale's only border),
+     square corners, NO shadow */
+  .caption-pill {
+    max-width: 78%;
+    padding: 20px 44px 24px;
+    background: var(--cap-canvas, #e9e5db);
+    border: 1px solid var(--cap-ink, #1b2566);
+    border-radius: 0;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.1em 0.34em;
+    font-family: var(--font-display, "Instrument Serif"), Georgia, serif;
+    font-weight: 400;
+    font-size: clamp(40px, 4.4vw, 58px);
+    line-height: 1.16;
+    letter-spacing: -0.01em;
+  }
+
+  /* upcoming — faint indigo ink, no underprint */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.06em;
+    color: color-mix(in srgb, var(--cap-ink, #1b2566) 42%, var(--cap-canvas, #e9e5db));
+  }
+  /* current word — THE solar-yellow underprint (box-shadow spread = a hard square
+     block w/o layout shift; no blur), indigo ink reading on top */
+  .caption-word.is-active {
+    color: var(--cap-ink, #1b2566);
+    background: var(--cap-accent, #f1ee2e);
+    box-shadow: 0 0 0 0.06em var(--cap-accent, #f1ee2e);
+  }
+  /* already spoken — solid indigo ink, underprint cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #1b2566);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — Instrument Serif italic, biennale's only display inflection */
+  .caption-word.cap-brand {
+    font-style: italic;
+  }
+  /* numerals / data — the mono voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "JetBrains Mono"), ui-monospace, monospace;
+    color: color-mix(in srgb, var(--cap-ink, #1b2566) 72%, var(--cap-canvas, #e9e5db));
+  }
+  /* emphasis — an ember-red hairline underline (the counter-temperature accent) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--cap-accent-2, #e26b4a);
+    text-underline-offset: 0.1em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.97 }, { scale: 1, duration: 0.14, ease: "power2.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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/frame-showcase.html
new file mode 100644
index 0000000..186f825
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/biennale-yellow/frame-showcase.html
@@ -0,0 +1,1214 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Biennale Yellow</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Archivo:wght@400;600&family=JetBrains+Mono:wght@400&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --paper: #e9e5db;
+        --paper-deep: #dcd6c4;
+        --sun: #f1ee2e;
+        --sun-soft: #f8f39b;
+        --haze: #f0da7c;
+        --ink: #1b2566;
+        --ember: #e26b4a;
+        --serif: "Instrument Serif", Georgia, serif;
+        --sans: "Archivo", sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, monospace;
+        --bloom: radial-gradient(
+          circle at 50% 50%,
+          rgba(241, 238, 46, 0.92) 0%,
+          rgba(241, 238, 46, 0.5) 30%,
+          rgba(240, 218, 124, 0.22) 55%,
+          rgba(233, 229, 219, 0) 78%
+        );
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0c0d1a;
+      }
+      body {
+        background: var(--paper);
+        color: var(--ink);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        font-weight: 400;
+        letter-spacing: -0.018em;
+        line-height: 0.9;
+      }
+      .micro {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        font-size: 13px;
+      }
+
+      section {
+        padding: 120px 76px;
+        position: relative;
+        overflow: hidden;
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 24px;
+        border-bottom: 1px solid var(--ink);
+        padding-bottom: 18px;
+        margin-bottom: 56px;
+        position: relative;
+        z-index: 2;
+      }
+      .sec-head .micro {
+        color: var(--ink);
+      }
+      .sec-head h2 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 56px;
+        line-height: 1;
+        letter-spacing: -0.01em;
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .bloom {
+        position: absolute;
+        width: 62%;
+        height: 70%;
+        left: 8%;
+        top: 14%;
+        background: var(--bloom);
+        z-index: 0;
+        pointer-events: none;
+      }
+      .cover .ember {
+        position: absolute;
+        width: 36%;
+        height: 40%;
+        right: -6%;
+        bottom: -6%;
+        background: radial-gradient(
+          circle at 60% 60%,
+          rgba(226, 107, 74, 0.2) 0%,
+          rgba(226, 107, 74, 0) 70%
+        );
+        z-index: 0;
+        pointer-events: none;
+      }
+      .cover .daterail {
+        position: absolute;
+        top: 64px;
+        right: 76px;
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: clamp(48px, 5.2vw, 84px);
+        line-height: 0.96;
+        text-align: right;
+        letter-spacing: -0.005em;
+        z-index: 2;
+      }
+      .cover .inner {
+        padding: 0 76px;
+        position: relative;
+        z-index: 2;
+      }
+      .cover .micro {
+        margin-bottom: 28px;
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: clamp(110px, 15vw, 230px);
+        line-height: 0.84;
+        letter-spacing: -0.018em;
+      }
+      .cover h1 em {
+        font-style: italic;
+        letter-spacing: -0.005em;
+      }
+      .cover .footer {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: grid;
+        grid-template-columns: 1.1fr 1fr 1.4fr 2fr;
+        gap: 36px;
+        padding: 0 76px 56px;
+        z-index: 2;
+      }
+      .cover .fcell {
+        border-top: 1px solid var(--ink);
+        padding-top: 14px;
+      }
+      .cover .fcell .t {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+        margin-bottom: 8px;
+      }
+      .cover .fcell .b {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--ink);
+      }
+      .cover .pagenum {
+        position: absolute;
+        bottom: 30px;
+        right: 48px;
+        font-family: var(--mono);
+        font-size: 13px;
+        letter-spacing: 0.08em;
+        opacity: 0.75;
+        z-index: 2;
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 28px;
+        position: relative;
+        z-index: 2;
+      }
+      .sw .chip {
+        height: 130px;
+        border: 1px solid var(--ink);
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-size: 26px;
+        margin-top: 14px;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 12px;
+        color: var(--ink);
+        opacity: 0.7;
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-family: var(--sans);
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--ink);
+        margin-top: 8px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+      }
+      .type-row .tok {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+      }
+      .type-row .m {
+        font-family: var(--mono);
+        font-size: 11px;
+        color: var(--ink);
+        opacity: 0.65;
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 12px;
+        margin-bottom: 22px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 48px;
+        margin-bottom: 56px;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .ledger .row {
+        display: grid;
+        grid-template-columns: 92px 1.6fr 0.9fr 80px;
+        gap: 24px;
+        padding: 14px 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+        align-items: baseline;
+      }
+      .ledger .dt {
+        font-family: var(--mono);
+        font-size: 14px;
+      }
+      .ledger .ti {
+        font-family: var(--serif);
+        font-size: 26px;
+        line-height: 1.1;
+      }
+      .ledger .vn {
+        font-family: var(--sans);
+        font-size: 13px;
+        color: var(--ink);
+      }
+      .ledger .du {
+        font-family: var(--mono);
+        font-size: 13px;
+        text-align: right;
+      }
+      .strand .row {
+        display: grid;
+        grid-template-columns: 56px 1fr;
+        gap: 20px;
+        padding: 14px 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+        align-items: baseline;
+      }
+      .strand .nm {
+        font-family: var(--serif);
+        font-size: 34px;
+        line-height: 1;
+      }
+      .strand .ti {
+        font-family: var(--serif);
+        font-size: 24px;
+        line-height: 1.1;
+      }
+      .strand .bd {
+        font-family: var(--sans);
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--ink);
+        margin-top: 4px;
+      }
+      .bars .row {
+        display: grid;
+        grid-template-columns: 60px 1fr 60px;
+        gap: 16px;
+        align-items: center;
+        margin-bottom: 14px;
+      }
+      .bars .yr {
+        font-family: var(--mono);
+        font-size: 13px;
+      }
+      .bars .bar {
+        height: 20px;
+        background: var(--ink);
+      }
+      .bars .bar.lit {
+        background: var(--sun);
+        border: 1px solid var(--ink);
+      }
+      .bars .vl {
+        font-family: var(--mono);
+        font-size: 13px;
+        text-align: right;
+      }
+      .ypanel {
+        background: var(--sun);
+        padding: 36px;
+        color: var(--ink);
+      }
+      .ypanel .l {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+      }
+      .ypanel .h {
+        font-family: var(--serif);
+        font-size: 44px;
+        line-height: 0.95;
+        margin-top: 12px;
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+        position: relative;
+        z-index: 2;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+        color: var(--ink);
+        opacity: 0.6;
+      }
+      .fw .flabel b {
+        opacity: 1;
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--paper);
+        box-shadow: 0 0 0 1px rgba(27, 37, 102, 0.15);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+      .frame .bloom {
+        position: absolute;
+        background: var(--bloom);
+        z-index: 1;
+        pointer-events: none;
+      }
+      .frame .pn {
+        position: absolute;
+        right: 3cqw;
+        bottom: 2.6cqw;
+        font-family: var(--mono);
+        font-size: 1cqw;
+        opacity: 0.75;
+        z-index: 4;
+      }
+
+      /* f1 cover */
+      .yf1 .bloom {
+        width: 58%;
+        height: 64%;
+        left: 6%;
+        top: 16%;
+      }
+      .yf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .yf1 .micro {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        margin-bottom: 1.8cqw;
+      }
+      .yf1 h3 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 13cqw;
+        line-height: 0.84;
+        letter-spacing: -0.018em;
+      }
+      .yf1 h3 em {
+        font-style: italic;
+      }
+      .yf1 .dr {
+        position: absolute;
+        top: 4cqw;
+        right: 4cqw;
+        font-family: var(--serif);
+        font-size: 5cqw;
+        line-height: 0.96;
+        text-align: right;
+        letter-spacing: -0.005em;
+        z-index: 4;
+      }
+
+      /* f2 chapter divider */
+      .yf2 .bloom {
+        width: 60%;
+        height: 80%;
+        right: -10%;
+        top: -10%;
+        left: auto;
+      }
+      .yf2 .rail {
+        position: absolute;
+        left: 3cqw;
+        top: 50%;
+        transform: rotate(-90deg) translateX(50%);
+        transform-origin: left center;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.32em;
+        font-size: 1cqw;
+        white-space: nowrap;
+        z-index: 4;
+      }
+      .yf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw 0 9cqw;
+      }
+      .yf2 .num {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 38cqw;
+        line-height: 0.84;
+        letter-spacing: -0.04em;
+        color: var(--ink);
+      }
+      .yf2 .ti {
+        font-family: var(--serif);
+        font-size: 3.6cqw;
+        line-height: 1.05;
+        margin-top: -2cqw;
+        max-width: 46cqw;
+      }
+
+      /* f3 ledger */
+      .yf3 .body {
+        padding: 6cqw 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .yf3 .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        border-bottom: 1px solid var(--ink);
+        padding-bottom: 1.2cqw;
+        margin-bottom: 1.6cqw;
+      }
+      .yf3 .top h4 {
+        font-family: var(--serif);
+        font-size: 3.6cqw;
+        line-height: 1;
+      }
+      .yf3 .top .micro {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 0.9cqw;
+      }
+      .yf3 .row {
+        display: grid;
+        grid-template-columns: 8cqw 1.6fr 0.9fr 6cqw;
+        gap: 1.6cqw;
+        padding: 1cqw 0;
+        border-bottom: 1px solid rgba(27, 37, 102, 0.2);
+        align-items: baseline;
+      }
+      .yf3 .dt {
+        font-family: var(--mono);
+        font-size: 1cqw;
+      }
+      .yf3 .ti {
+        font-family: var(--serif);
+        font-size: 1.9cqw;
+        line-height: 1.1;
+      }
+      .yf3 .vn {
+        font-family: var(--sans);
+        font-size: 0.95cqw;
+      }
+      .yf3 .du {
+        font-family: var(--mono);
+        font-size: 0.95cqw;
+        text-align: right;
+      }
+
+      /* f4 manifesto */
+      .yf4 .bloom {
+        width: 54%;
+        height: 60%;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+      }
+      .yf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 0 9cqw;
+      }
+      .yf4 .qm {
+        font-family: var(--serif);
+        font-size: 14cqw;
+        line-height: 0.5;
+        height: 7cqw;
+      }
+      .yf4 .q {
+        font-family: var(--serif);
+        font-style: italic;
+        font-size: 5cqw;
+        line-height: 1.04;
+        letter-spacing: -0.005em;
+      }
+      .yf4 .at {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 1cqw;
+        margin-top: 2.4cqw;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 56px;
+        position: relative;
+        z-index: 2;
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-size: 34px;
+        margin-bottom: 8px;
+      }
+      .do-card .rule {
+        height: 1px;
+        background: var(--ink);
+        margin-bottom: 22px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--sans);
+        font-size: 14px;
+        line-height: 1.6;
+        padding-left: 22px;
+        position: relative;
+        margin-bottom: 13px;
+        color: var(--ink);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--serif);
+      }
+      .do-card.do li::before {
+        content: "\2014";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--ember);
+      }
+
+      .foot {
+        padding: 64px 76px;
+        border-top: 1px solid var(--ink);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-size: 30px;
+      }
+      .foot .r {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #e9e5db !important;
+        --secondary: #1b2566 !important;
+        --tertiary: #dcd6c4 !important;
+        --accent: #f1ee2e !important;
+        --f-disp: "Instrument Serif", sans-serif !important;
+        --f-body: "Archivo", sans-serif !important;
+        --paper: #e9e5db !important;
+        --paper-deep: #dcd6c4 !important;
+        --sun: #f1ee2e !important;
+        --ink: #1b2566 !important;
+        --serif: "Instrument Serif", sans-serif !important;
+        --sans: "Archivo", sans-serif !important;
+        --sun-soft: #f8f39b !important;
+        --haze: #f0da7c !important;
+        --ember: #e26b4a !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="bloom"></div>
+      <div class="ember"></div>
+      <div class="daterail">2026<br />—2027</div>
+      <div class="inner">
+        <div class="micro">Frame System · Vol. 01</div>
+        <h1>Paper, ink<br />&amp; <em>yellow.</em></h1>
+      </div>
+      <div class="footer">
+        <div class="fcell">
+          <div class="t">Register</div>
+          <div class="b">Literary-editorial, biennale catalogue.</div>
+        </div>
+        <div class="fcell">
+          <div class="t">Ground</div>
+          <div class="b">Warm parchment, never white.</div>
+        </div>
+        <div class="fcell">
+          <div class="t">Type</div>
+          <div class="b">Instrument Serif · Archivo · JetBrains Mono.</div>
+        </div>
+        <div class="fcell">
+          <div class="t">Depth</div>
+          <div class="b">Atmospheric blooms, no shadows, hairline rules.</div>
+        </div>
+      </div>
+      <div class="pagenum">01 / 06</div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="micro">Paper · Ink · Yellow</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--paper)"></div>
+          <div class="name">Paper</div>
+          <div class="hex">#E9E5DB</div>
+          <div class="role">The warm parchment ground.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="name">Ink</div>
+          <div class="hex">#1B2566</div>
+          <div class="role">The single text + rule color.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--sun)"></div>
+          <div class="name">Sun</div>
+          <div class="hex">#F1EE2E</div>
+          <div class="role">Panel, bloom, tile underprint.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ember)"></div>
+          <div class="name">Ember</div>
+          <div class="hex">#E26B4A</div>
+          <div class="role">Subordinate counter-bloom only.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--paper-deep)"></div>
+          <div class="name">Paper Deep</div>
+          <div class="hex">#DCD6C4</div>
+          <div class="role">Secondary parchment band.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--sun-soft)"></div>
+          <div class="name">Sun Soft</div>
+          <div class="hex">#F8F39B</div>
+          <div class="role">Mid stop in sun blooms.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--haze)"></div>
+          <div class="name">Haze</div>
+          <div class="hex">#F0DA7C</div>
+          <div class="role">Outer stop in sun blooms.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--bloom), var(--paper)"></div>
+          <div class="name">Sun Bloom</div>
+          <div class="hex">radial · atmosphere</div>
+          <div class="role">The primary depth layer.</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="micro">Serif · Sans · Mono</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">Instrument Serif 400 · line 0.86 · −0.018em</div>
+        </div>
+        <div class="spec"><span class="serif" style="font-size: 104px">Biennale</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display-it</div>
+          <div class="m">Instrument Serif italic · slow-reading</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-style: italic; font-size: 72px; line-height: 1.04"
+            >quietly,</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">numeral-md</div>
+          <div class="m">Instrument Serif 400 · hero stat</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 96px; letter-spacing: -0.04em">240</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Archivo 400 · line 1.5 · ink</div>
+        </div>
+        <div class="spec">
+          <p style="font-family: var(--sans); font-size: 16px; line-height: 1.5; max-width: 620px">
+            Archivo carries every paragraph — the quiet sans beneath the serif display, always in
+            ink.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">micro-label</div>
+          <div class="m">Archivo 600 · uppercase · 0.18em</div>
+        </div>
+        <div class="spec">
+          <span class="micro">Programme · Section</span> &nbsp;
+          <span
+            class="serif"
+            style="font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em"
+            >12 — 14 JUN</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="micro">Hairlines · Blooms · Panels</span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s7">
+          <div class="cnote">
+            Ledger rows — mono date · serif title · sans venue · mono duration
+          </div>
+          <div class="ledger">
+            <div class="row">
+              <span class="dt">12 JUN</span><span class="ti">Opening Address</span
+              ><span class="vn">Giardini Pavilion</span><span class="du">45m</span>
+            </div>
+            <div class="row">
+              <span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
+              ><span class="vn">Arsenale Hall</span><span class="du">90m</span>
+            </div>
+            <div class="row">
+              <span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
+              ><span class="vn">Central Library</span><span class="du">30m</span>
+            </div>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">Strand list + chart bars</div>
+          <div class="strand">
+            <div class="row">
+              <span class="nm">01</span>
+              <div><div class="ti">Parchment</div></div>
+            </div>
+            <div class="row">
+              <span class="nm">02</span>
+              <div><div class="ti">Ink</div></div>
+            </div>
+          </div>
+          <div class="bars" style="margin-top: 20px">
+            <div class="row">
+              <span class="yr">'24</span><span class="bar" style="width: 60%"></span
+              ><span class="vl">60</span>
+            </div>
+            <div class="row">
+              <span class="yr">'25</span><span class="bar lit" style="width: 88%"></span
+              ><span class="vl">88</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s5">
+          <div class="cnote">Yellow panel — strongest color statement</div>
+          <div class="ypanel">
+            <div class="l">Poster Fill</div>
+            <div class="h">Ink on Sun.</div>
+          </div>
+        </div>
+        <div class="s7">
+          <div class="cnote">Sun bloom + ember counter-bloom</div>
+          <div
+            style="
+              position: relative;
+              height: 170px;
+              border: 1px solid rgba(27, 37, 102, 0.2);
+              overflow: hidden;
+            "
+          >
+            <div
+              style="
+                position: absolute;
+                width: 60%;
+                height: 130%;
+                left: 6%;
+                top: -15%;
+                background: var(--bloom);
+              "
+            ></div>
+            <div
+              style="
+                position: absolute;
+                width: 40%;
+                height: 90%;
+                right: -8%;
+                bottom: -20%;
+                background: radial-gradient(circle, rgba(226, 107, 74, 0.22), transparent 70%);
+              "
+            ></div>
+            <div style="position: absolute; left: 24px; bottom: 20px" class="serif">
+              <span style="font-size: 40px">atmosphere.</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="micro">True 16:9 · cqw</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · sun bloom · date rail</span></div>
+          <div class="frame yf1">
+            <div class="bloom"></div>
+            <div class="dr">2026<br />—27</div>
+            <div class="body">
+              <div class="micro">Frame System</div>
+              <h3>Paper, ink<br />&amp; <em>yellow.</em></h3>
+            </div>
+            <div class="pn">01 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Chapter Divider</b><span>· section · jumbo numeral · vertical rail</span>
+          </div>
+          <div class="frame yf2">
+            <div class="bloom"></div>
+            <div class="rail">Section — Two</div>
+            <div class="body">
+              <div class="num">02</div>
+              <div class="ti">On measure &amp; the slow page.</div>
+            </div>
+            <div class="pn">02 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Ledger</b><span>· catalog · hairline rows · the dense frame</span>
+          </div>
+          <div class="frame yf3">
+            <div class="body">
+              <div class="top">
+                <h4>Programme</h4>
+                <span class="micro">12 — 14 JUN</span>
+              </div>
+              <div class="row">
+                <span class="dt">12 JUN</span><span class="ti">Opening Address</span
+                ><span class="vn">Giardini</span><span class="du">45m</span>
+              </div>
+              <div class="row">
+                <span class="dt">13 JUN</span><span class="ti">On Slow Reading</span
+                ><span class="vn">Arsenale</span><span class="du">90m</span>
+              </div>
+              <div class="row">
+                <span class="dt">14 JUN</span><span class="ti">Closing Colophon</span
+                ><span class="vn">Library</span><span class="du">30m</span>
+              </div>
+            </div>
+            <div class="pn">03 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Manifesto</b><span>· quote · italic serif · centered bloom</span>
+          </div>
+          <div class="frame yf4">
+            <div class="bloom"></div>
+            <div class="body">
+              <div class="qm">&ldquo;</div>
+              <div class="q">Read it slowly,<br />or not at all.</div>
+              <div class="at">— The System Voice</div>
+            </div>
+            <div class="pn">04 / 06</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="micro">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="micro">Restraint</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>Start on warm parchment; add at least one sun bloom for atmosphere.</li>
+            <li>
+              Set every line in ink — display, body, label, mono; contrast is size, not color.
+            </li>
+            <li>Use Instrument Serif 400, tight line-height, negative tracking, for display.</li>
+            <li>
+              Make every separator a 1px ink hairline; flood a yellow panel for poster moments.
+            </li>
+            <li>Reserve JetBrains Mono for dates, numerals, and the bottom-right pagenum.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>No drop shadows, no rounded corners, no bordered cards.</li>
+            <li>No second text color; no bold Instrument Serif.</li>
+            <li>No borders thicker than 1px; no inverted ink grounds.</li>
+            <li>No mono for body or headlines; no font substitutes.</li>
+            <li>Don't crowd the canvas — sparse reads as elegant.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--paper);
+        --cap-accent: var(--sun);
+        --cap-accent-2: var(--ember);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 1px solid var(--cap-ink);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 3.4cqw;
+        line-height: 1.16;
+        letter-spacing: -0.01em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.06em;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.06em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed rgba(27, 37, 102, 0.28);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-size: 0.95cqw;
+        letter-spacing: 0.04em;
+        color: var(--ink);
+        opacity: 0.5;
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="micro">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="micro">Lower-third · Karaoke</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="bloom" style="width: 54%; height: 60%; left: 10%; top: 12%"></div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pn">05 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Settled line</b><span>· all spoken · underprint cleared</span>
+          </div>
+          <div class="frame capdemo">
+            <div
+              class="bloom"
+              style="width: 50%; height: 58%; right: -6%; bottom: -6%; left: auto"
+            ></div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pn">06 / 06</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Biennale Yellow</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#E9E5DB" />
+        <circle cx="42" cy="42" r="34" fill="#F1EE2E" opacity="0.55" />
+        <text x="14" y="64" font-family="Georgia" font-size="30" fill="#1B2566">Aa</text>
+        <rect x="14" y="74" width="60" height="1.5" fill="#1B2566" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/blockframe/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/blockframe/FRAME.md
new file mode 100644
index 0000000..00e4d88
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/blockframe/FRAME.md
@@ -0,0 +1,275 @@
+---
+version: alpha
+name: BlockFrame — Frame (video / frame layer)
+description: >
+  Video-first companion to BlockFrame's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — 4px black borders + 8px hard offset shadows, the five-pastel candy palette
+  (pink/blue/green/yellow/cream) plus black/white/off-white, Inter 800–900 uppercase display +
+  Space Grotesk label chrome, square corners, label-pills, tilted decorations, star bursts, stripe
+  blocks, dot grids. 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:
+  black: "#000000"
+  white: "#FFFFFF"
+  offwhite: "#FFFDF5"
+  pink: "#FE90E8"
+  blue: "#C0F7FE"
+  green: "#99E885"
+  yellow: "#F7CB46"
+  cream: "#FFDC8B"
+
+borders: { primary: "4px solid black", thin: "3px solid black" }
+shadows: { default: "8px 8px 0 black", small: "4px 4px 0 black", hover: "6px 6px 0 black", close-yellow: "12px 12px 0 yellow", close-white: "6px 6px 0 white" }
+
+typography:
+  # — reading + chrome ramp —
+  body:    { fontFamily: "Inter", cqw: 0.95, weight: 500, lineHeight: 1.6 }
+  card-title:{ fontFamily: "Inter", cqw: 1.15, weight: 700, upper: true, lineHeight: 1.2 }
+  label:   { fontFamily: "Space Grotesk", px: 13, weight: 600, tracking: "0.08em", upper: true }
+  counter: { fontFamily: "Space Grotesk", px: 14, weight: 700, tracking: "0.1em", upper: true }
+  # — display ramp (Inter 800–900, uppercase, negative tracking) —
+  heading-md:{ fontFamily: "Inter", cqw: 2.1, weight: 700, lineHeight: 1.1, tracking: "-0.01em", upper: true }
+  quote-text:{ fontFamily: "Inter", cqw: 2.7, weight: 900, lineHeight: 1.15, tracking: "-0.02em", upper: true }
+  stat-number:{ fontFamily: "Inter", cqw: 3.3, weight: 900, lineHeight: 1.0 }
+  heading-lg:{ fontFamily: "Inter", cqw: 3.3, weight: 800, lineHeight: 1.0, tracking: "-0.02em", upper: true }
+  close-title:{ fontFamily: "Inter", cqw: 4.2, weight: 900, lineHeight: 0.95, tracking: "-0.03em", upper: true }
+  heading-xl:{ fontFamily: "Inter", cqw: 5.0, weight: 900, lineHeight: 0.95, tracking: "-0.03em", upper: true }
+
+spacing:
+  slide-pad: "3.1cqw"   # 60px @1920
+  gap-md: "1.7cqw"
+
+components:
+  card-elevated:
+    backgroundColor: "{colors.white}"
+    border: "0.4cqw solid {colors.black}"
+    rounded: "0"
+    shadow: "0.8cqw 0.8cqw 0 {colors.black}"
+    description: "Primary card. Border/shadow coupled: 4px↔8px, 3px↔4px."
+  card-small:
+    backgroundColor: "{colors.white}"
+    border: "0.3cqw solid {colors.black}"
+    rounded: "0"
+    shadow: "0.4cqw 0.4cqw 0 {colors.black}"
+    description: "Stat cards, team cards, timeline steps."
+  label-pill:
+    border: "0.3cqw solid {colors.black}"
+    backgroundColor: "any pastel / {colors.white}"
+    rounded: "9999px"
+    shadow: "0.4cqw 0.4cqw 0 {colors.black}"
+    typography: "{typography.label}"
+    description: "The universal eyebrow — never plain text."
+  button-primary:
+    backgroundColor: "{colors.yellow}"
+    textColor: "{colors.black}"
+    border: "0.3cqw solid {colors.black}"
+    rounded: "0"
+    shadow: "0.4cqw 0.4cqw 0 {colors.black}"
+    typography: "Inter 700"
+    description: "The CTA."
+  star-burst:
+    backgroundColor: "any pastel"
+    border: "0.3cqw solid {colors.black}"
+    clip: "10-point clip-path star"
+    description: "Corner attention-grabber."
+  stripe-block:
+    backgroundImage: "45° {colors.black} + pastel diagonal stripes"
+    border: "0.3cqw solid {colors.black}"
+    description: "Poster decoration."
+  bg-dot-grid:
+    backgroundImage: "radial-dot ~1.2px dots, 24px grid, {colors.black}"
+    description: "Faint corner/ground overlay."
+  tilt-deco:
+    transform: "rotate(±2°–12°)"
+    description: "Rotated rectangle/badge/star. Stat cards alternate −2/+2°. The grid-puncture signature."
+  stat-deco-dot:
+    backgroundColor: "any pastel"
+    border: "2px solid {colors.black}"
+    rounded: "50%"
+    size: "12px"
+    description: "The ONLY round shape, pinned to stat cards."
+  close-frame:
+    backgroundColor: "{colors.black}"
+    textColor: "{colors.white}"
+    border: "0.4cqw solid {colors.white}"
+    rounded: "0"
+    shadow: "1.2cqw 1.2cqw 0 {colors.yellow}"
+    description: "Inverted closer — the only colored shadow."
+---
+
+# BlockFrame — Frame (video / frame layer)
+
+## Overview
+
+BlockFrame at frame scale is a **maximalist neobrutalist** system on five laws: every region has a
+4px black border, every elevated element an 8px hard offset shadow, every corner square, every
+accent a saturated pastel, and every layout allowed to be a little crooked. The joy is the
+deliberate collision — bordered cards meeting bordered cards, shadows stacking, tilted decorations
+puncturing the grid.
+
+The voice is **Inter** at weight 800–900 in tight uppercase with negative tracking (display) +
+weight 500 sentence body, and **Space Grotesk** weight 600 uppercase 0.08em as the label/chrome
+voice. Five candy pastels (pink/blue/green/yellow/cream) cycle as full-bleed grounds across frames
+— the color cycling is the primary rhythm. Depth is **hard offset shadow** (8px/4px, solid black,
+zero blur, bottom-right); the close-frame's 12px yellow shadow is the one colored exception.
+
+**Key characteristics at frame scale:**
+
+- **4px black borders + 8px hard shadows** on primary cards; 3px + 4px on chrome (weights coupled).
+- **Five-pastel palette** cycled as full-bleed grounds; black/white/off-white structural.
+- **Inter 800–900 uppercase** negative-tracked display; **Space Grotesk** label chrome.
+- **Square corners** everywhere (only the stat-deco dot is round); **tilted decorations** puncture the grid.
+- **Label-pills** open every region; star bursts, stripe blocks, dot grids are reusable attention units.
+- **Comfortably dense** — packed reads as authoritative; empty corners read as broken.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one Inter display moment dominates at 3–6× its neighbor; cards read as a system, not rivals.
+- **Silence** — cover/quote/close keep air (decorations, not content); the **feature-card and stat grids are the dense exception**.
+- **Restraint** — the 4px→08px / 3px→4px coupling holds; black borders only (white on close); pastel ground **cycles** one per frame; no sixth pastel.
+- **Reference** — aim at a **zine / 1990s sticker-book / toy-packaging spread** (bordered blocks, tilted decorations); failure looks like a **flat, borderless, blurred-shadow web card grid**.
+
+- **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` ~3.1cqw; decorations may bleed off edges.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Borders/shadows scale in `cqw` so the
+4px↔8px coupling holds proportionally; corners stay square.
+
+## Colors
+
+Tokens identical to the source. `{colors.offwhite}` is the default ground, but frames **cycle**
+through `{colors.cream}`/`blue`/`pink`/`green`/`yellow` grounds — the cycle is the rhythm.
+`{colors.black}` is every border + structural text; `{colors.white}` is card fills. The five pastels
+are interchangeable with **no semantic meaning** — pair by juxtaposition (pink+blue+green trio,
+cream+yellow warm pair). `{colors.yellow}` is the CTA + the one colored (close) shadow;
+`{colors.black}` ground is the close surface. **No sixth pastel.**
+
+## Typography
+
+Two ramps. The **reading/chrome ramp** (Inter body 0.95cqw weight 500, Space Grotesk labels in px)
+carries copy + chrome; the **display ramp** (Inter `heading-md` 2.1cqw → `heading-xl` 5cqw, weight
+800–900 uppercase) carries every headline + stat.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; px labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `heading-xl`; 4–6 → `heading-lg`; 7+ → `heading-md`.
+- **Inter display is uppercase, weight 800–900, negative-tracked** (−0.01..−0.03em); body weight 500 sentence case; **Space Grotesk labels uppercase 0.08em**. No sentence-case display, no untracked display.
+
+## Depth & Surface
+
+Hard offset shadow, solid black, zero blur, bottom-right:
+
+- **0.8cqw (8px)** primary cards; **0.4cqw (4px)** chrome; **0.6cqw (6px)** hover.
+- **Border-based depth** — the 4px/3px borders do much of the lift; shadow makes it "elevated."
+- **Tilt** — ±2°–12° rotation breaks the grid for perceived dimension.
+- **Inverted close** — 12px YELLOW shadow (and 6px white on close-btn) — the only colored shadows.
+
+**Ceiling:** no blurred shadow, no rounded corner (save the stat-deco dot), no gradient depth.
+
+## Shapes
+
+- **0 radius everywhere** except the 12px stat-deco dot (50%). Square corners are the structural identity.
+
+## Components
+
+- **card-elevated / card-small** — the bordered+shadowed content cards (weight-coupled).
+- **label-pill** — the universal eyebrow (border+shadow+pastel). **button-primary** — yellow CTA.
+- **star-burst / stripe-block / bg-dot-grid / tilt-deco** — the reusable decoration units (one per frame min).
+- **stat-deco-dot** — the lone round shape. **close-frame** — the inverted black+white+yellow-shadow closer.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> Cycle the ground color; add ≥1 decoration per frame; open with a label-pill.
+
+### 1 · Cover (identity · move: decorations puncture · left)
+
+**Ground** `{colors.cream}` (or offwhite) + faint dot-grid. **Composes** label-pill, heading-xl, tilt-deco rect, star-burst, counter. **Focal** a 2–3 line Inter `heading-xl` uppercase, left, under a label-pill; tilted pastel rects + a star burst puncture the right. **Chrome** counter pill. **Accent** the decorations' pastels. **Silence** right third holds decorations. **Fixed** 4px/8px coupling, uppercase display, square. **Free** title, decoration placement/colors. **Density** comfortable.
+
+### 2 · Feature Cards (catalog · move: 3-up bordered grid · blue ground)
+
+**Ground** `{colors.blue}`, `slide-pad`. **Composes** label-pill, heading-lg, 3× card-elevated (icon-square + card-title + body). **Focal** three white bordered+shadowed cards. **Chrome** label-pill eyebrow. **Accent** the pastel icon-squares (pink/green/yellow). **Silence** tight — dense by design. **Fixed** 4px border + 8px shadow, square, uppercase card-titles. **Free** card content, icon hues. **Density** dense-exception.
+
+### 3 · Stat Grid (data · move: tilted stat cards · green ground)
+
+**Ground** `{colors.green}`, `slide-pad`. **Composes** label-pill, heading-lg, 3× card-small (tilted −2/+2°, stat-deco dot, stat-number + label). **Focal** three tilted bordered stat cards. **Accent** the deco-dots' pastels + black stat numerals. **Silence** moderate. **Fixed** alternating tilt, 3px+4px, round deco-dot only. **Free** figures (from script), dot hues. **Density** dense-exception.
+
+### 4 · Closing Plate (closer · move: inverted black · centered)
+
+**Ground** `{colors.black}`. **Composes** close-frame (4px white border, 12px yellow shadow), label-pill (inverted), close-title, star-burst. **Focal** a white `close-title` inside the white-bordered frame with the yellow offset shadow; a pink star punctures a corner. **Accent** the yellow shadow + pink star. **Silence** ~50%. **Fixed** white-on-black, 12px yellow shadow (only here), square. **Free** sign-off, star placement. **Density** low.
+
+### 5 · Quote (quote · move: bordered quote frame · pink ground)
+
+**Ground** `{colors.pink}` (or offwhite). **Composes** label-pill, quote-text in a card-elevated, attribution. **Focal** an Inter `quote-text` (900 uppercase) inside a white bordered+shadowed frame. **Accent** the ground + one decoration. **Silence** moderate. **Fixed** uppercase quote, 4px/8px. **Free** quote, ground. **Density** comfortable.
+
+### 6 · Timeline (process · move: stepped bordered cards · offwhite)
+
+**Ground** `{colors.offwhite}`. **Composes** label-pill, heading-lg, 3–4 card-small steps + step-connectors. **Focal** a row of bordered step cards linked by black connector bars, each a pastel + step-num. **Accent** the step pastels. **Silence** moderate. **Fixed** 3px+4px steps, square, connectors. **Free** steps, hues. **Density** standard.
+
+## Composition Rules
+
+### Do
+
+- Pair **4px borders with 8px shadows**, **3px with 4px** — the coupling is non-negotiable.
+- **Cycle pastel grounds** across frames; keep the deck visually rhythmic.
+- Set Inter display **uppercase, 800–900, negative-tracked**; open every region with a **label-pill**.
+- Render shadows **solid black, zero blur, bottom-right**; add **≥1 decoration** (tilt/star/stripe/dots) per frame.
+- Use **yellow** for CTAs; use the **inverted black + 12px yellow shadow** close-frame for the closer.
+- Tilt decorations ±2°–12°; lean left on most frames.
+
+### Don't
+
+- No rounded corners (save the stat-deco dot); no blurred shadows.
+- No colored borders (black only, save the close-frame white); no sixth pastel.
+- No sentence-case Inter display; no untracked display; no label as plain text.
+- Don't keep everything perfectly aligned (tilt is the signature); don't leave corners empty.
+- Don't blow a headline edge-to-edge — fit to measure.
+
+## Aspect-Ratio Behavior
+
+| Treatment     | 16:9                          | 9:16                         | 1:1                      |
+| ------------- | ----------------------------- | ---------------------------- | ------------------------ |
+| Cover         | title left, decorations right | title top, decorations below | title, fewer decorations |
+| Feature Cards | 3 across                      | 3 stacked                    | 2+1                      |
+| Stat Grid     | 3 tilted across               | 3 tilted stacked             | 2×2                      |
+| Closing       | centered close-frame          | centered, taller             | centered                 |
+| Quote         | quote frame                   | quote stacked                | centered                 |
+| Timeline      | horizontal steps              | vertical (connectors hidden) | 2×2                      |
+
+`slide-pad` holds on the short edge; re-step display above the 1.4cqw floor. Decoration count drops
+on tighter ratios so the frame stays bordered, not cluttered.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Pastel fills, decorations, and tilts are content-agnostic.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, stats, or counts at frame scale. Render slots as `— figure —`, `{metric}`,
+`N×`. Stat cards and charts carry placeholders until the script supplies values. Slide counters and
+list numbers are decorative.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one Inter display moment dominates; cards read as a system.
+- **Silence** — only feature/stat grids run dense; cover/quote/close keep air with decorations.
+- **Borders/shadows** — 4px↔8px / 3px↔4px coupling holds; solid black, zero blur.
+- **Color** — pastel ground cycles; black borders only (white on close); no sixth pastel.
+- **Type** — Inter uppercase 800–900 negative-tracked, fit-to-measure; Space Grotesk labels 0.08em; ≥1.4cqw floor.
+- **Shape** — square corners (only stat-deco dot round); ≥1 tilt/decoration per frame.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the source toggles slides via display, no transition.
+- **Inter + Space Grotesk via Google Fonts.** CJK: Noto Sans SC 900 (sentence case — the uppercase signal drops); lean harder on borders/shadows/decoration to carry the brutalist identity.
+- **9:16 / 1:1 are guidance**; verify the floor and that decoration count scales down.
+- Star bursts (clip-path), stripe blocks, dot grids, and tilts are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/blockframe/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/blockframe/caption-skin.html
new file mode 100644
index 0000000..e606041
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/blockframe/caption-skin.html
@@ -0,0 +1,223 @@
+<!--
+  BlockFrame — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a blockframe 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 white card carved by a 4px black border with an 8px hard offset shadow
+  (solid black, zero blur, bottom-right — blockframe's sacred depth), square corners.
+  Inter 900, UPPERCASE, negative-tracked. Upcoming words sit in faded ink; the current
+  word gets a saturated-yellow stamp-block — a hard square highlight (box-shadow spread,
+  no blur) with black ink reading on top, blockframe's signature stamp gesture; spoken
+  words settle to solid black ink, stamp cleared. The word pops in with a snappy
+  back.out overshoot — loud, a little crooked.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 bordered card — 4px black border + 8px hard offset shadow (solid black,
+     zero blur, bottom-right — blockframe's sacred depth), square corners */
+  .caption-pill {
+    max-width: 80%;
+    padding: 18px 40px 22px;
+    background: var(--cap-canvas, #ffffff);
+    border: 4px solid var(--cap-ink, #000000);
+    border-radius: 0;
+    box-shadow: 8px 8px 0 var(--cap-ink, #000000);
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.12em 0.32em;
+    font-family: var(--font-display, "Inter"), system-ui, sans-serif;
+    font-weight: 900;
+    text-transform: uppercase;
+    font-size: clamp(38px, 4.2vw, 56px);
+    line-height: 1.12;
+    letter-spacing: -0.02em;
+  }
+
+  /* upcoming — faded black ink, no stamp */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.1em;
+    color: color-mix(in srgb, var(--cap-ink, #000000) 40%, var(--cap-canvas, #ffffff));
+  }
+  /* current word — THE yellow stamp-block (box-shadow spread = a hard square block
+     w/o layout shift; no blur), black ink reading on top — blockframe's signature stamp */
+  .caption-word.is-active {
+    color: var(--cap-ink, #000000);
+    background: var(--cap-accent, #f7cb46);
+    box-shadow: 0 0 0 0.08em var(--cap-accent, #f7cb46);
+  }
+  /* already spoken — solid black ink, stamp cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #000000);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — heavier ink weight, blockframe's display is already 900 */
+  .caption-word.cap-brand {
+    color: var(--cap-ink, #000000);
+  }
+  /* numerals / data — the body voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Inter"), ui-monospace, monospace;
+    color: color-mix(in srgb, var(--cap-ink, #000000) 74%, var(--cap-canvas, #ffffff));
+  }
+  /* emphasis — a cream hard underline bar (the second-chroma accent) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 4px;
+    text-decoration-color: var(--cap-accent-2, #ffdc8b);
+    text-underline-offset: 0.12em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.86 }, { scale: 1, duration: 0.2, ease: "back.out(2.4)" }, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/blockframe/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/blockframe/frame-showcase.html
new file mode 100644
index 0000000..3f5a165
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/blockframe/frame-showcase.html
@@ -0,0 +1,1347 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>BlockFrame</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --black: #000000;
+        --white: #ffffff;
+        --offwhite: #fffdf5;
+        --pink: #fe90e8;
+        --blue: #c0f7fe;
+        --green: #99e885;
+        --yellow: #f7cb46;
+        --cream: #ffdc8b;
+        --disp: "Inter", sans-serif;
+        --mono: "Space Grotesk", monospace;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #111;
+      }
+      body {
+        background: var(--offwhite);
+        color: var(--black);
+        font-family: var(--disp);
+        -webkit-font-smoothing: antialiased;
+      }
+      .disp {
+        font-family: var(--disp);
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        line-height: 0.95;
+        font-weight: 900;
+      }
+      .pill {
+        display: inline-block;
+        border: 3px solid var(--black);
+        background: var(--white);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 6px 16px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 13px;
+      }
+      .dotgrid {
+        background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
+        background-size: 24px 24px;
+      }
+
+      section {
+        padding: 90px 60px;
+        position: relative;
+        border-bottom: 4px solid var(--black);
+      }
+      .sec-head {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 48px;
+      }
+      .sec-head h2 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        font-size: 46px;
+        line-height: 1;
+      }
+      .sec-head .sp {
+        flex: 1;
+        height: 4px;
+        background: var(--black);
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        background: var(--offwhite);
+        padding: 60px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .dg {
+        position: absolute;
+        inset: 0;
+        opacity: 0.4;
+        background-image: radial-gradient(circle, var(--black) 1.2px, transparent 1.2px);
+        background-size: 24px 24px;
+        pointer-events: none;
+      }
+      .cover .inner {
+        position: relative;
+        z-index: 3;
+        max-width: 72%;
+      }
+      .cover .pill {
+        margin-bottom: 28px;
+      }
+      .cover h1 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.04em;
+        line-height: 0.9;
+        font-size: clamp(64px, 9vw, 150px);
+      }
+      .cover .sub {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 1.5;
+        color: var(--black);
+        margin-top: 24px;
+        max-width: 540px;
+      }
+      .cover .deco-rect {
+        position: absolute;
+        top: 18%;
+        right: 8%;
+        width: 200px;
+        height: 130px;
+        background: var(--pink);
+        border: 4px solid var(--black);
+        box-shadow: 8px 8px 0 var(--black);
+        transform: rotate(8deg);
+        z-index: 2;
+      }
+      .cover .deco-rect2 {
+        position: absolute;
+        bottom: 16%;
+        right: 18%;
+        width: 120px;
+        height: 120px;
+        background: var(--blue);
+        border: 4px solid var(--black);
+        box-shadow: 8px 8px 0 var(--black);
+        transform: rotate(-6deg);
+        z-index: 1;
+      }
+      .cover .star {
+        position: absolute;
+        top: 30%;
+        right: 30%;
+        width: 90px;
+        height: 90px;
+        background: var(--yellow);
+        border: 3px solid var(--black);
+        clip-path: polygon(
+          50% 0%,
+          61% 35%,
+          98% 35%,
+          68% 57%,
+          79% 91%,
+          50% 70%,
+          21% 91%,
+          32% 57%,
+          2% 35%,
+          39% 35%
+        );
+        z-index: 4;
+      }
+      .cover .counter {
+        position: absolute;
+        bottom: 30px;
+        left: 60px;
+        border: 3px solid var(--black);
+        background: var(--white);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 10px 18px;
+        font-family: var(--mono);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 14px;
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 28px;
+      }
+      .sw {
+        border: 4px solid var(--black);
+        background: var(--white);
+        box-shadow: 8px 8px 0 var(--black);
+      }
+      .sw .chip {
+        height: 120px;
+        border-bottom: 4px solid var(--black);
+      }
+      .sw .meta {
+        padding: 16px 18px;
+      }
+      .sw .name {
+        font-family: var(--disp);
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: -0.01em;
+        font-size: 18px;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 12px;
+        letter-spacing: 0.04em;
+        margin-top: 6px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 24px 0;
+        border-bottom: 4px solid var(--black);
+      }
+      .type-row .tok {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+      }
+      .type-row .m {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 11px;
+        color: #444;
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+        margin-bottom: 20px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 32px;
+        margin-bottom: 48px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .fcard {
+        border: 4px solid var(--black);
+        background: var(--white);
+        box-shadow: 8px 8px 0 var(--black);
+        padding: 32px;
+        position: relative;
+        height: 100%;
+      }
+      .fcard .notch {
+        position: absolute;
+        top: -12px;
+        right: 24px;
+        width: 44px;
+        height: 44px;
+        background: var(--yellow);
+        border: 3px solid var(--black);
+      }
+      .fcard .ic {
+        width: 60px;
+        height: 60px;
+        border: 3px solid var(--black);
+        background: var(--blue);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 26px;
+        margin-bottom: 20px;
+      }
+      .fcard .t {
+        font-family: var(--disp);
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 21px;
+        line-height: 1.2;
+      }
+      .fcard .bd {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 1.6;
+        color: #222;
+        margin-top: 10px;
+      }
+      .statcard {
+        border: 3px solid var(--black);
+        background: var(--white);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 24px;
+        position: relative;
+      }
+      .statcard .dot {
+        position: absolute;
+        top: 14px;
+        right: 14px;
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        border: 2px solid var(--black);
+      }
+      .statcard .n {
+        font-family: var(--disp);
+        font-weight: 900;
+        font-size: 48px;
+        line-height: 1;
+      }
+      .statcard .l {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+        margin-top: 8px;
+      }
+      .btn {
+        display: inline-block;
+        border: 3px solid var(--black);
+        background: var(--yellow);
+        box-shadow: 4px 4px 0 var(--black);
+        padding: 14px 32px;
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 16px;
+      }
+      .stripe {
+        height: 80px;
+        border: 3px solid var(--black);
+        background: repeating-linear-gradient(
+          45deg,
+          var(--black),
+          var(--black) 4px,
+          var(--green) 4px,
+          var(--green) 12px
+        );
+      }
+      .listnum {
+        display: inline-grid;
+        place-items: center;
+        width: 36px;
+        height: 36px;
+        border: 3px solid var(--black);
+        background: var(--yellow);
+        font-family: var(--mono);
+        font-weight: 700;
+        font-size: 14px;
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+        color: #555;
+      }
+      .fw .flabel b {
+        color: var(--black);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--offwhite);
+        border: 4px solid var(--black);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+
+      /* f1 cover */
+      .bf1 {
+        background: var(--cream);
+      }
+      .bf1 .dg {
+        position: absolute;
+        inset: 0;
+        opacity: 0.35;
+        background-image: radial-gradient(circle, var(--black) 0.15cqw, transparent 0.15cqw);
+        background-size: 3cqw 3cqw;
+        z-index: 1;
+      }
+      .bf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .bf1 .pill {
+        display: inline-block;
+        border: 0.25cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.4cqw 0.4cqw 0 var(--black);
+        padding: 0.5cqw 1.2cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 1cqw;
+        margin-bottom: 2cqw;
+        align-self: flex-start;
+      }
+      .bf1 h3 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.04em;
+        line-height: 0.9;
+        font-size: 9.5cqw;
+        max-width: 60cqw;
+      }
+      .bf1 .star {
+        position: absolute;
+        top: 18%;
+        right: 8%;
+        width: 14cqw;
+        height: 14cqw;
+        background: var(--pink);
+        border: 0.3cqw solid var(--black);
+        clip-path: polygon(
+          50% 0%,
+          61% 35%,
+          98% 35%,
+          68% 57%,
+          79% 91%,
+          50% 70%,
+          21% 91%,
+          32% 57%,
+          2% 35%,
+          39% 35%
+        );
+        z-index: 2;
+      }
+      .bf1 .rect {
+        position: absolute;
+        bottom: 16%;
+        right: 16%;
+        width: 16cqw;
+        height: 9cqw;
+        background: var(--blue);
+        border: 0.3cqw solid var(--black);
+        box-shadow: 0.6cqw 0.6cqw 0 var(--black);
+        transform: rotate(-6deg);
+        z-index: 1;
+      }
+
+      /* f2 feature cards */
+      .bf2 {
+        background: var(--blue);
+      }
+      .bf2 .body {
+        padding: 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .bf2 .pill {
+        align-self: flex-start;
+        border: 0.2cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.3cqw 0.3cqw 0 var(--black);
+        padding: 0.4cqw 1cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.85cqw;
+        margin-bottom: 1.4cqw;
+      }
+      .bf2 h3 {
+        font-family: var(--disp);
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: -0.02em;
+        font-size: 3.6cqw;
+        margin-bottom: 2cqw;
+      }
+      .bf2 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1.6cqw;
+        flex: 1;
+      }
+      .bf2 .c {
+        border: 0.3cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.6cqw 0.6cqw 0 var(--black);
+        padding: 1.8cqw;
+      }
+      .bf2 .c .ic {
+        width: 4cqw;
+        height: 4cqw;
+        border: 0.2cqw solid var(--black);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 1.8cqw;
+        margin-bottom: 1.2cqw;
+      }
+      .bf2 .c .t {
+        font-family: var(--disp);
+        font-weight: 700;
+        text-transform: uppercase;
+        font-size: 1.5cqw;
+        line-height: 1.15;
+      }
+      .bf2 .c .bd {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 0.95cqw;
+        line-height: 1.5;
+        color: #222;
+        margin-top: 0.6cqw;
+      }
+
+      /* f3 stat grid (tilted) */
+      .bf3 {
+        background: var(--green);
+      }
+      .bf3 .body {
+        padding: 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .bf3 .pill {
+        align-self: flex-start;
+        border: 0.2cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.3cqw 0.3cqw 0 var(--black);
+        padding: 0.4cqw 1cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.85cqw;
+        margin-bottom: 1.4cqw;
+      }
+      .bf3 h3 {
+        font-family: var(--disp);
+        font-weight: 800;
+        text-transform: uppercase;
+        letter-spacing: -0.02em;
+        font-size: 3.6cqw;
+        margin-bottom: 2.4cqw;
+      }
+      .bf3 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2cqw;
+      }
+      .bf3 .sc {
+        border: 0.25cqw solid var(--black);
+        background: var(--white);
+        box-shadow: 0.4cqw 0.4cqw 0 var(--black);
+        padding: 1.8cqw;
+        position: relative;
+      }
+      .bf3 .sc:nth-child(odd) {
+        transform: rotate(-2deg);
+      }
+      .bf3 .sc:nth-child(even) {
+        transform: rotate(2deg);
+      }
+      .bf3 .sc .dot {
+        position: absolute;
+        top: 1cqw;
+        right: 1cqw;
+        width: 1cqw;
+        height: 1cqw;
+        border-radius: 50%;
+        border: 0.15cqw solid var(--black);
+      }
+      .bf3 .sc .n {
+        font-family: var(--disp);
+        font-weight: 900;
+        font-size: 4.6cqw;
+        line-height: 1;
+      }
+      .bf3 .sc .l {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.85cqw;
+        margin-top: 0.6cqw;
+      }
+
+      /* f4 close (black) */
+      .bf4 {
+        background: var(--black);
+      }
+      .bf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .bf4 .cardf {
+        border: 0.3cqw solid var(--white);
+        box-shadow: 1.2cqw 1.2cqw 0 var(--yellow);
+        padding: 4cqw 6cqw;
+        position: relative;
+      }
+      .bf4 .pill {
+        border: 0.25cqw solid var(--white);
+        background: var(--black);
+        color: var(--white);
+        box-shadow: 0.5cqw 0.5cqw 0 var(--white);
+        padding: 0.5cqw 1.2cqw;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 1cqw;
+        margin-bottom: 1.6cqw;
+        display: inline-block;
+      }
+      .bf4 h3 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        font-size: 7cqw;
+        line-height: 0.95;
+        color: var(--white);
+      }
+      .bf4 .star {
+        position: absolute;
+        top: -3cqw;
+        right: -3cqw;
+        width: 9cqw;
+        height: 9cqw;
+        background: var(--pink);
+        border: 0.3cqw solid var(--white);
+        clip-path: polygon(
+          50% 0%,
+          61% 35%,
+          98% 35%,
+          68% 57%,
+          79% 91%,
+          50% 70%,
+          21% 91%,
+          32% 57%,
+          2% 35%,
+          39% 35%
+        );
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 32px;
+      }
+      .do-card {
+        border: 4px solid var(--black);
+        box-shadow: 8px 8px 0 var(--black);
+        padding: 36px;
+      }
+      .do-card.do {
+        background: var(--green);
+      }
+      .do-card.dont {
+        background: var(--white);
+      }
+      .do-card h4 {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.02em;
+        font-size: 30px;
+        margin-bottom: 20px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 1.55;
+        padding-left: 26px;
+        position: relative;
+        margin-bottom: 13px;
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--disp);
+        font-weight: 900;
+      }
+      .do-card.do li::before {
+        content: "+";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+      }
+
+      .foot {
+        padding: 48px 60px;
+        background: var(--black);
+        color: var(--white);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        letter-spacing: -0.03em;
+        font-size: 28px;
+      }
+      .foot .r {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 11px;
+        color: #aaa;
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #fffdf5 !important;
+        --secondary: #000000 !important;
+        --tertiary: #ffdc8b !important;
+        --accent: #fe90e8 !important;
+        --f-disp: "Inter", sans-serif !important;
+        --f-body: "Space Grotesk", sans-serif !important;
+        --black: #000000 !important;
+        --offwhite: #fffdf5 !important;
+        --pink: #fe90e8 !important;
+        --cream: #ffdc8b !important;
+        --disp: "Inter", sans-serif !important;
+        --mono: "Space Grotesk", sans-serif !important;
+        --white: #ffffff !important;
+        --blue: #c0f7fe !important;
+        --green: #99e885 !important;
+        --yellow: #f7cb46 !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="dg"></div>
+      <div class="star"></div>
+      <div class="deco-rect"></div>
+      <div class="deco-rect2"></div>
+      <div class="inner">
+        <span class="pill">Frame System · Vol. 01</span>
+        <h1>Loud,<br />bordered,<br />a little crooked.</h1>
+        <div class="sub">
+          A maximalist neobrutalist frame system — 4px ink borders, 8px hard shadows, five candy
+          pastels, and tilted decorations that puncture the grid.
+        </div>
+      </div>
+      <div class="counter">01 / 06</div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="pill">Palette</span>
+        <h2>Five Candy Pastels</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--pink)"></div>
+          <div class="meta">
+            <div class="name">Pink</div>
+            <div class="hex">#FE90E8</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--blue)"></div>
+          <div class="meta">
+            <div class="name">Blue</div>
+            <div class="hex">#C0F7FE</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--green)"></div>
+          <div class="meta">
+            <div class="name">Green</div>
+            <div class="hex">#99E885</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--yellow)"></div>
+          <div class="meta">
+            <div class="name">Yellow</div>
+            <div class="hex">#F7CB46 · CTA</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream)"></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#FFDC8B</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--offwhite); border-bottom: 4px solid var(--black)"
+          ></div>
+          <div class="meta">
+            <div class="name">Off-White</div>
+            <div class="hex">#FFFDF5 · canvas</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--white); border-bottom: 4px solid var(--black)"
+          ></div>
+          <div class="meta">
+            <div class="name">White</div>
+            <div class="hex">#FFFFFF · cards</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--black)"></div>
+          <div class="meta">
+            <div class="name">Black</div>
+            <div class="hex">#000000 · all borders</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--pink)">Type</span>
+        <h2>Inter × Space Grotesk</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">heading-xl</div>
+          <div class="m">Inter 900 · uppercase · −0.03em</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 80px">Maximal.</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">heading-lg</div>
+          <div class="m">Inter 800 · uppercase · −0.02em</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-weight: 800; font-size: 50px">Bordered & Bold</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">stat-number</div>
+          <div class="m">Inter 900 · line 1</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-size: 64px; letter-spacing: -0.02em">240</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Inter 500 · sentence case · line 1.6</div>
+        </div>
+        <div class="spec">
+          <p style="font-weight: 500; font-size: 18px; line-height: 1.6; max-width: 640px">
+            Body runs Inter at weight 500, sentence case — the calm against the heavy uppercase
+            display.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">Space Grotesk 600 · uppercase · 0.08em</div>
+        </div>
+        <div class="spec"><span class="pill">Section Eyebrow</span></div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--blue)">Components</span>
+        <h2>Borders & Hard Shadows</h2>
+        <span class="sp"></span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s4">
+          <div class="cnote">Feature card + notch + icon</div>
+          <div class="fcard">
+            <div class="notch"></div>
+            <div class="ic" style="background: var(--pink)">A</div>
+            <div class="t">Bordered Block</div>
+            <div class="bd">4px ink border + 8px hard offset shadow, square corners.</div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Stat cards (tilted) + deco dot</div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
+            <div class="statcard" style="transform: rotate(-2deg)">
+              <div class="dot" style="background: var(--pink)"></div>
+              <div class="n">240</div>
+              <div class="l">Output</div>
+            </div>
+            <div class="statcard" style="transform: rotate(2deg)">
+              <div class="dot" style="background: var(--blue)"></div>
+              <div class="n">3.4×</div>
+              <div class="l">Faster</div>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">CTA · list number · stripe</div>
+          <span class="btn">Click Here →</span>
+          <div style="display: flex; align-items: center; gap: 14px; margin-top: 24px">
+            <span class="listnum">01</span
+            ><span style="font-family: var(--disp); font-weight: 500; font-size: 15px"
+              >Numbered list bullet</span
+            >
+          </div>
+          <div class="stripe" style="margin-top: 24px"></div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s6">
+          <div class="cnote">Label pills — pastel variants</div>
+          <div style="display: flex; gap: 16px; flex-wrap: wrap">
+            <span class="pill" style="background: var(--pink)">Pink</span
+            ><span class="pill" style="background: var(--blue)">Blue</span
+            ><span class="pill" style="background: var(--green)">Green</span
+            ><span class="pill" style="background: var(--yellow)">Yellow</span
+            ><span class="pill" style="background: var(--cream)">Cream</span>
+          </div>
+        </div>
+        <div class="s6">
+          <div class="cnote">Icon squares + star burst</div>
+          <div style="display: flex; align-items: center; gap: 20px">
+            <span
+              style="
+                width: 64px;
+                height: 64px;
+                border: 3px solid var(--black);
+                background: var(--green);
+                display: grid;
+                place-items: center;
+                font-family: var(--disp);
+                font-weight: 700;
+                font-size: 26px;
+              "
+              >B</span
+            >
+            <span
+              style="
+                width: 64px;
+                height: 64px;
+                border: 3px solid var(--black);
+                background: var(--yellow);
+                display: grid;
+                place-items: center;
+                font-family: var(--disp);
+                font-weight: 700;
+                font-size: 26px;
+              "
+              >C</span
+            >
+            <span
+              style="
+                width: 64px;
+                height: 64px;
+                background: var(--pink);
+                border: 3px solid var(--black);
+                clip-path: polygon(
+                  50% 0%,
+                  61% 35%,
+                  98% 35%,
+                  68% 57%,
+                  79% 91%,
+                  50% 70%,
+                  21% 91%,
+                  32% 57%,
+                  2% 35%,
+                  39% 35%
+                );
+              "
+            ></span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--yellow)">Frames</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · cream · decorations · left</span></div>
+          <div class="frame bf1">
+            <div class="dg"></div>
+            <div class="star"></div>
+            <div class="rect"></div>
+            <div class="body">
+              <span class="pill">Frame System</span>
+              <h3>Loud, bordered, crooked.</h3>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Feature Cards</b><span>· catalog · blue ground · 3-up</span></div>
+          <div class="frame bf2">
+            <div class="body">
+              <span class="pill">Three Laws</span>
+              <h3>Cards on Grounds</h3>
+              <div class="row">
+                <div class="c">
+                  <div class="ic" style="background: var(--pink)">A</div>
+                  <div class="t">Border</div>
+                  <div class="bd">4px ink on all.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--green)">B</div>
+                  <div class="t">Shadow</div>
+                  <div class="bd">8px hard offset.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--yellow)">C</div>
+                  <div class="t">Tilt</div>
+                  <div class="bd">A little crooked.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Stat Grid</b><span>· data · green ground · tilted · the dense frame</span>
+          </div>
+          <div class="frame bf3">
+            <div class="body">
+              <span class="pill">By The Numbers</span>
+              <h3>The Tally</h3>
+              <div class="row">
+                <div class="sc">
+                  <div class="dot" style="background: var(--pink)"></div>
+                  <div class="n">240</div>
+                  <div class="l">Output</div>
+                </div>
+                <div class="sc">
+                  <div class="dot" style="background: var(--blue)"></div>
+                  <div class="n">3.4×</div>
+                  <div class="l">Faster</div>
+                </div>
+                <div class="sc">
+                  <div class="dot" style="background: var(--yellow)"></div>
+                  <div class="n">12K</div>
+                  <div class="l">Shipped</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Closing Plate</b><span>· closer · black ground · yellow shadow</span>
+          </div>
+          <div class="frame bf4">
+            <div class="body">
+              <div class="cardf">
+                <div class="star"></div>
+                <span class="pill">The End</span>
+                <h3>Stay loud.</h3>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section style="border-bottom: none">
+      <div class="sec-head">
+        <span class="pill" style="background: var(--green)">Rules</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>4px borders + 8px shadows on primary cards; 3px + 4px on chrome.</li>
+            <li>Cycle pastel grounds across frames; keep the rhythm.</li>
+            <li>Inter 800–900 uppercase, negative tracking, for all display.</li>
+            <li>Open every region with a label-pill eyebrow.</li>
+            <li>Tilt decorations ±2°–12°; add one to every frame.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>No rounded corners (save the stat-deco dot); no blurred shadows.</li>
+            <li>No colored borders (black only, save the close-frame white).</li>
+            <li>No sentence-case Inter display; no sixth pastel.</li>
+            <li>No label rendered as plain text — pill or nothing.</li>
+            <li>Don't blow a headline edge-to-edge — fit to measure.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--black);
+        --cap-canvas: var(--white);
+        --cap-accent: var(--yellow);
+        --cap-accent-2: var(--cream);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 0.4cqw solid var(--cap-ink);
+        border-radius: 0;
+        box-shadow: 0.8cqw 0.8cqw 0 var(--cap-ink);
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.12em 0.32em;
+        font-family: var(--disp);
+        font-weight: 900;
+        text-transform: uppercase;
+        font-size: 3.2cqw;
+        line-height: 1.12;
+        letter-spacing: -0.02em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.1em;
+        color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.08em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 0.15cqw dashed rgba(0, 0, 0, 0.4);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 0.9cqw;
+        letter-spacing: 0.08em;
+        color: var(--black);
+        opacity: 0.55;
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="pill" style="background: var(--yellow)">Captions</span>
+        <h2>Lower-Third Karaoke</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo" style="background: var(--cream)">
+            <div
+              class="dg"
+              style="
+                position: absolute;
+                inset: 0;
+                opacity: 0.3;
+                background-image: radial-gradient(
+                  circle,
+                  var(--black) 0.15cqw,
+                  transparent 0.15cqw
+                );
+                background-size: 3cqw 3cqw;
+                z-index: 1;
+              "
+            ></div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · stamp cleared</span></div>
+          <div class="frame capdemo" style="background: var(--blue)">
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">BlockFrame</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#FFFDF5" />
+        <rect x="16" y="34" width="46" height="32" fill="#FE90E8" stroke="#000" stroke-width="4" />
+        <rect x="22" y="40" width="46" height="32" fill="#C0F7FE" stroke="#000" stroke-width="4" />
+        <path
+          d="M74 16l4 11h12l-9 7 3 11-10-6-10 6 3-11-9-7h12z"
+          fill="#F7CB46"
+          stroke="#000"
+          stroke-width="2"
+        />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/blue-professional/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/blue-professional/FRAME.md
new file mode 100644
index 0000000..e821dee
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/blue-professional/FRAME.md
@@ -0,0 +1,307 @@
+---
+version: alpha
+name: Blue Professional — Frame (video / frame layer)
+description: >
+  Video-first companion to Blue Professional's design.md. The unit is the frame (1920×1080). Atoms
+  are identical and sacred — the warm cream canvas, a single saturated cobalt (#1e2bfa) as the only
+  accent, the three-step gray text ladder, Space Grotesk (display/numerals/chrome) + Inter (body),
+  soft cobalt-tinted cards (4% fill / 20% border / 10–14px radius) with NO shadows, pill chrome, and
+  the cobalt progress bar. 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:
+  bg: "#fdfae7"
+  primary: "#1e2bfa"
+  text: "#111111"
+  text-muted: "#6b6b6b"
+  text-light: "#9a9a9a"
+  accent-light: "rgba(30,43,250,0.08)"
+  accent-medium: "rgba(30,43,250,0.15)"
+  border: "rgba(30,43,250,0.2)"
+  card-bg: "rgba(30,43,250,0.04)"
+  positive: "#059669"
+  negative: "#dc2626"
+
+radii:
+  pill: "100px"
+  card-lg: "14px"
+  card-md: "12px"
+  card-sm: "10px"
+  bar: "6px"
+  circle: "50%"
+
+typography:
+  # — reading ramp (Inter body + Space Grotesk chrome) —
+  body:    { fontFamily: "Inter", cqw: 0.85, weight: 400, lineHeight: 1.6, color: "text-muted" }
+  h4-eyebrow:{ fontFamily: "Space Grotesk", cqw: 0.8, weight: 600, tracking: "0.08em", upper: true, color: "primary" }
+  tag:     { fontFamily: "Space Grotesk", px: 12, weight: 500, color: "primary" }
+  counter: { fontFamily: "Space Grotesk", px: 13, weight: 500, tracking: "0.05em", color: "text-muted" }
+  # — display / numerical ramp (Space Grotesk, near-black headings / cobalt numerals) —
+  h3:      { fontFamily: "Space Grotesk", cqw: 1.25, weight: 500, lineHeight: 1.3, tracking: "-0.02em", color: "text" }
+  stat-num:{ fontFamily: "Space Grotesk", cqw: 1.9, weight: 700, lineHeight: 1.0, color: "primary" }
+  blockquote:{ fontFamily: "Space Grotesk", cqw: 2.4, weight: 500, lineHeight: 1.35, color: "text" }
+  h2:      { fontFamily: "Space Grotesk", cqw: 2.6, weight: 600, lineHeight: 1.1, tracking: "-0.02em", color: "text" }
+  metric-value:{ fontFamily: "Space Grotesk", cqw: 3.0, weight: 700, lineHeight: 1.0, color: "primary" }
+  h1:      { fontFamily: "Space Grotesk", cqw: 4.2, weight: 700, lineHeight: 1.08, tracking: "-0.02em", color: "text" }
+  quote-mark:{ fontFamily: "Space Grotesk", cqw: 8.0, weight: 700, lineHeight: 0.5, color: "primary", opacity: 0.15 }
+
+spacing:
+  pad-x: "5cqw"
+  pad-y-top: "5cqw"
+  gap-cards: "1.4cqw"
+  accent-line: "60px × 4px"
+
+components:
+  card-tinted:
+    backgroundColor: "{colors.card-bg}"
+    border: "1.5px solid {colors.border}"
+    rounded: "{radii.card-lg}"
+    shadow: "none"
+    description: "Universal content card. Never solid-colored, never opaque-bordered, NO shadow."
+  metric-card:
+    backgroundColor: "{colors.card-bg}"
+    border: "1.5px solid {colors.border}"
+    rounded: "{radii.card-lg}"
+    typography: "{typography.metric-value} ({colors.primary}) + {typography.metric-label} + {typography.metric-desc}"
+    description: "+ optional inline ↑/↓ change chip ({colors.positive}/{colors.negative} text, no fill)."
+  tag-pill:
+    backgroundColor: "{colors.accent-light}"
+    textColor: "{colors.primary}"
+    rounded: "{radii.pill}"
+    typography: "{typography.tag}"
+    description: "Top-right of the slide-header."
+  cta-button:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.bg}"
+    rounded: "{radii.pill}"
+    typography: "Space Grotesk 600"
+    shadow: "soft cobalt on hover only — the system's only shadow"
+    description: "The one solid element."
+  accent-line:
+    backgroundColor: "{colors.primary}"
+    size: "60×4, 2px radius"
+    description: "Above cover titles / eyebrow separators."
+  bar-track:
+    backgroundColor: "{colors.accent-light}"
+    fill: "{colors.primary} (display:block so width resolves)"
+    rounded: "{radii.bar}"
+    description: "28px track; fill carries the value."
+  step-circle:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.bg}"
+    rounded: "50%"
+    size: "56px"
+    description: "Sequential steps fade opacity 1.0→0.85→0.7→0.55."
+  split-highlight:
+    backgroundColor: "{colors.accent-light}"
+    borderLeft: "4px solid {colors.primary}"
+    rounded: "{radii.card-md}"
+    description: "Inline pull-quote callout."
+  slide-header:
+    typography: "{typography.h4-eyebrow} (cobalt) left, tag-pill right; {typography.h2} below"
+    description: "Top band of every content frame."
+  atmosphere:
+    elements: "clipped diagonal cobalt-tint panel, 3×3 cobalt dot grid, concentric closing rings"
+    description: "Cover/closing only. Never on content frames."
+  progress-bar:
+    backgroundColor: "{colors.primary}"
+    size: "3px tall, bottom edge, width grows with index"
+    description: "Persistent progress strip."
+---
+
+# Blue Professional — Frame (video / frame layer)
+
+## Overview
+
+Blue Professional at frame scale is a **consulting-grade system: restraint with one strong
+commitment.** A warm cream canvas and a single saturated cobalt that carries every accent —
+eyebrow, metric, CTA, chart fill, progress bar. No secondary brand color, no pastels, just cream,
+cobalt, and a tight ladder of grays. The register is investment-research / McKinsey briefing:
+measured, data-dense without crowding, executive-readable at distance.
+
+The voice is two faces in fixed roles: **Space Grotesk** (display, every numeral, all chrome —
+eyebrows uppercase 0.08em) and **Inter** (body, muted gray, line 1.6). Headlines are near-black;
+cobalt is reserved for accent moments. Depth is **soft and tinted** — 4% cobalt card fills with 20%
+cobalt borders and 10–14px radii — never shadowed. The lack of harsh shadows is the premium signal.
+
+**Key characteristics at frame scale:**
+
+- **Warm cream ground** on every frame; **single cobalt** as the only accent.
+- **Space Grotesk** (display/numerals/chrome) + **Inter** (body) — near-black headlines, cobalt numerals.
+- **Tinted cards** — cobalt 4% fill, cobalt 20% 1.5px border, 10–14px radius, **no shadow**.
+- **Pill chrome** (100px) — tag pills + the one solid cobalt CTA; cobalt **progress bar**.
+- **Soft rounded corners everywhere** (no square corners save the progress bar).
+- **Atmosphere** (diagonal panel, dot grid, concentric rings) on cover/closing only.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one **near-black headline or cobalt numeral** dominates at 3–6× its neighbor.
+- **Silence** — content frames read **balanced, not crowded**; the **dashboard is the one dense exception**.
+- **Restraint** — a **single cobalt accent** carries everything; headlines stay near-black (never cobalt); no shadows (tinted cards do the lift); positive/negative inline-text only.
+- **Reference** — aim at an **investment-research / McKinsey quarterly briefing**; failure looks like a **heavy-outlined, multi-color dashboard**.
+
+- **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:** `pad-x` 5cqw; bottom reserves room for the counter + progress bar.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Card radii stay px (10–14px); the
+pill radius stays 100px; borders stay 1–1.5px.
+
+## Colors
+
+Tokens identical to the source. `{colors.bg}` cream is the universal ground; `{colors.primary}`
+cobalt is the **only** accent — every eyebrow, numeral, CTA, chart fill, progress bar, and the 4px
+highlight left-rule. Headlines are `{colors.text}` near-black (never cobalt); body is
+`{colors.text-muted}`; tertiary is `{colors.text-light}`. Cards fill `{colors.card-bg}` (4%) with
+`{colors.border}` (20%) borders. `{colors.positive}`/`{colors.negative}` appear **only inline** on
+directional change chips — never as fills. **No second accent color.**
+
+## Typography
+
+Two ramps. The **reading ramp** (Inter body 0.85cqw muted; Space Grotesk eyebrow uppercase 0.08em
+cobalt) carries copy + chrome; the **display/numerical ramp** (Space Grotesk `h3` 1.25cqw → `h1`
+4.2cqw near-black; numerals `stat-num`/`metric-value` in cobalt) carries headings and figures.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; px chrome (tag/counter) is colophon only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `h1`; 4–6 → `h2`; 7+ → `h3`. Cobalt numerals scale `metric-value`→`stat-num` by card size.
+- **Headlines near-black, −0.02em**; **eyebrows cobalt, uppercase, 0.08em**; **numerals cobalt 600–700**; **body Inter 400 muted, line 1.6**. No italic, no uppercase body, no cobalt headline.
+
+## Depth & Surface
+
+Soft and tinted — never offset. Depth from:
+
+- **Tinted cards** — 4% cobalt fill + 20% cobalt 1.5px border + 10–14px radius reads as lifted without offset.
+- **Border-left accent** — the 4px cobalt rule on split-highlight blocks pulls a callout forward.
+- **Rounded corners** — the 10–14px radius is part of the softness; square corners break it.
+
+**Ceiling:** zero box-shadow on content (the only shadow is a soft cobalt CTA _hover_); no opaque cobalt borders; no harsh outlines.
+
+## Shapes
+
+- **100px** — tag pills, CTA, nav buttons (pill chrome).
+- **14/12/10px** — cards by size (large metric / standard stat / detail + mini).
+- **6px** — bar tracks + fills. **50%** — step circles, nav circles, dots, closing rings.
+- **0** — only the progress bar. No square-cornered content.
+
+## Components
+
+- **card-tinted / metric-card** — the universal soft-tint content cards (no shadow).
+- **tag-pill / cta-button / accent-line** — the cobalt pill chrome + the one solid CTA + the 60×4 rule.
+- **bar-track / step-circle / split-highlight** — cobalt data + sequence + callout patterns.
+- **slide-header** (eyebrow + tag pill) — the structural rhythm; **atmosphere** (diagonal/dots/rings) on cover/closing only; **progress-bar** on every frame.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> Atmosphere only on cover/closing; content frames carry the slide-header rhythm.
+
+### 1 · Cover (identity · move: diagonal accent · left)
+
+**Ground** cream + the clipped diagonal cobalt-tint panel (right ~36%) + a 3×3 cobalt dot grid.
+**Composes** accent-line, meta, h1, body sub. **Focal** a 2-line Space Grotesk `h1` near-black, left,
+under a cobalt accent-line + meta. **Chrome** counter + progress bar. **Accent** the cobalt line +
+diagonal panel. **Silence** the diagonal panel holds the right third. **Fixed** near-black h1, cobalt
+accents, atmosphere here only. **Free** title, meta. **Density** low.
+
+### 2 · Dashboard (data · move: 3-up metric grid · the dense frame)
+
+**Ground** cream, `pad-x`. **Composes** slide-header (eyebrow + tag-pill), h2, 3× metric/tinted card.
+**Focal** a row of tinted cards — cobalt `metric-value` + Inter label + muted desc + optional
+green/red change chip. **Chrome** eyebrow left, tag-pill right; progress bar. **Accent** the cobalt
+numerals. **Silence** tight — the density exception. **Fixed** 4% tint cards, 20% borders, no shadow,
+cobalt numerals. **Free** figures (from script), labels. **Density** dense-exception.
+
+### 3 · Bar Ranking (data · move: cobalt bars · left)
+
+**Ground** cream, `pad-x`. **Composes** eyebrow, h2, bar-track rows. **Focal** 3–5 labeled
+cobalt-fill bars on cobalt-8% tracks with cobalt percentages. **Chrome** eyebrow; progress bar.
+**Accent** the cobalt fills + figures. **Silence** moderate. **Fixed** 6px tracks, cobalt fills.
+**Free** rows, values (from script). **Density** standard.
+
+### 4 · Pull Quote (quote · move: concentric rings · centered)
+
+**Ground** cream, centered, with faint concentric closing-rings behind. **Composes** quote-mark,
+blockquote, cite. **Focal** a Space Grotesk `blockquote` near-black under a 15%-opacity cobalt
+quote-mark; an uppercase cobalt-muted cite beneath. **Accent** the faint rings + quote-mark. **Silence**
+~55%. **Fixed** near-black quote, soft rings. **Free** quote, cite. **Density** low.
+
+### 5 · Split + Highlight (content · move: asymmetric split · left)
+
+**Ground** cream, two columns. **Composes** eyebrow, h2, body, split-highlight block. **Focal** an
+Inter body column beside a cobalt-8% highlight block (4px cobalt left rule) carrying an inline pull
+quote. **Accent** the highlight's left rule. **Silence** generous gutter. **Fixed** tinted highlight,
+4px cobalt rule. **Free** body, callout. **Density** standard.
+
+### 6 · Closing / CTA (closer · move: centered rings + CTA)
+
+**Ground** cream + concentric closing-rings. **Composes** accent-line, h1, body, cta-button. **Focal**
+a Space Grotesk `h1` near-black, centered, with the one solid cobalt `cta-button` pill below. **Accent**
+the CTA + rings. **Silence** ~60%. **Fixed** one CTA, near-black h1, soft rings. **Free** sign-off, CTA
+label. **Density** low.
+
+## Composition Rules
+
+### Do
+
+- Start every frame on **warm cream**; let **cobalt carry every accent** (eyebrow, numeral, CTA, bar, progress).
+- Set headlines **near-black, −0.02em**; eyebrows **cobalt uppercase 0.08em**; numerals **cobalt 600–700**.
+- Use **tinted cards** (4% fill, 20% border, 10–14px radius, no shadow); body Inter 400 muted, line 1.6.
+- Keep all chrome **pill-shaped (100px)**; one solid cobalt CTA per closing frame.
+- Reserve **atmosphere** (diagonal panel, dots, rings) for cover/closing; content frames keep the slide-header rhythm.
+- Lean left on cover/dashboard/split, centered on quote/closer.
+
+### Don't
+
+- No second accent color; no cobalt headlines.
+- No drop shadows on content (only the soft cobalt CTA hover); no opaque cobalt borders.
+- No square corners (save the progress bar); no font substitutes; no uppercase body.
+- Don't use the green/red change chips as general accents — directional comparisons only.
+- Don't fill space with heavier borders — add substance; don't blow a headline edge-to-edge.
+
+## Aspect-Ratio Behavior
+
+| Treatment         | 16:9                       | 9:16                           | 1:1                      |
+| ----------------- | -------------------------- | ------------------------------ | ------------------------ |
+| Cover             | title left, diagonal right | title top, diagonal band below | title upper, dots corner |
+| Dashboard         | 3 cards across             | 3 stacked                      | 2×2                      |
+| Bar Ranking       | 3–5 bars                   | 3–5 bars (tighter)             | 3 bars                   |
+| Pull Quote        | centered, rings behind     | centered, taller               | centered                 |
+| Split + Highlight | side-by-side               | stacked                        | stacked                  |
+| Closing / CTA     | centered + CTA             | centered + CTA                 | centered + CTA           |
+
+`pad-x` holds on the short edge; re-step display above the 1.4cqw floor. The diagonal cover panel
+becomes a top/bottom band on 9:16. Numerals stay Latin Arabic digits in CJK builds.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Figures, metrics, and quotes are content; the system supplies cream + cobalt + grays.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, financials, percentages, or dates at frame scale. Render slots as `— figure —`,
+`{metric}`, `+NN%`, `↑ —`. Metric cards, bar values, and stat cells especially carry placeholders
+until the script supplies them. Directional chips require a real comparison from the script.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one near-black headline or cobalt numeral dominates per frame.
+- **Silence** — content frames balanced, not crowded; only the dashboard runs dense.
+- **Single accent** — cobalt only; headlines near-black; positive/negative inline only.
+- **Type** — Space Grotesk headings −0.02em near-black, cobalt eyebrows 0.08em + numerals; Inter body muted line 1.6; ≥1.4cqw floor.
+- **Depth** — tinted cards (no shadow), soft rounded corners, 20% cobalt borders; no square content corners.
+- **Anchor** — left on cover/dashboard/split, centered on quote/closer; atmosphere on cover/closing only.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the source's 500ms translateX transitions + bar-fill animations are deck mechanics.
+- **Space Grotesk + Inter via Google Fonts.** CJK pairing (Noto Sans SC 700 display / Noto Serif SC 400 body) carries over; the eyebrow's uppercase+tracking signal weakens in CJK — pair it with the accent-line.
+- **9:16 / 1:1 are guidance**; verify the floor and that the diagonal panel reflows to a band.
+- Diagonal panel (clip-path), dot grid, concentric rings, and bars are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/blue-professional/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/blue-professional/caption-skin.html
new file mode 100644
index 0000000..c760133
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/blue-professional/caption-skin.html
@@ -0,0 +1,222 @@
+<!--
+  Blue Professional — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a blue-professional
+  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 soft cobalt-tinted card on warm cream — a 4% cobalt fill inside a 1.5px
+  20%-cobalt border, soft 14px rounded corners, NO shadow (the system's premium signal
+  is the absence of cast depth; the tinted card does the lift). Space Grotesk, sentence
+  case, near-black glyphs. Upcoming words sit in muted gray; the current word becomes a
+  solid cobalt chip — the brand's signature single-accent gesture, a pill-rounded fill
+  with cream reading on top; spoken words settle to near-black ink, chip cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 tinted card — 4% cobalt fill, 1.5px 20%-cobalt border, soft 14px corners,
+     NO shadow (the tinted card does the lift; cast depth is forbidden) */
+  .caption-pill {
+    max-width: 78%;
+    padding: 20px 44px 24px;
+    background: color-mix(in srgb, var(--cap-accent, #1e2bfa) 4%, var(--cap-canvas, #fdfae7));
+    border: 1.5px solid color-mix(in srgb, var(--cap-accent, #1e2bfa) 20%, transparent);
+    border-radius: 14px;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.1em 0.34em;
+    font-family: var(--font-display, "Space Grotesk"), system-ui, sans-serif;
+    font-weight: 600;
+    font-size: clamp(40px, 4.4vw, 58px);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+  }
+
+  /* upcoming — muted gray, no chip */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.18em;
+    border-radius: 0.32em;
+    color: color-mix(in srgb, var(--cap-ink, #111111) 52%, var(--cap-canvas, #fdfae7));
+  }
+  /* current word — THE solid cobalt chip (the single-accent gesture; pill-rounded
+     fill, NO shadow), cream reading on top */
+  .caption-word.is-active {
+    color: var(--cap-canvas, #fdfae7);
+    background: var(--cap-accent, #1e2bfa);
+    box-shadow: none;
+  }
+  /* already spoken — solid near-black ink, chip cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #111111);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — cobalt, the system's one accent on a key word */
+  .caption-word.cap-brand {
+    color: var(--cap-accent, #1e2bfa);
+  }
+  /* numerals / data — cobalt 700, the figure voice */
+  .caption-word.cap-num {
+    font-family: var(--font-display, "Space Grotesk"), system-ui, sans-serif;
+    font-weight: 700;
+    color: var(--cap-accent, #1e2bfa);
+  }
+  /* emphasis — a directional-red hairline underline (inline only, never a fill) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--cap-accent-2, #dc2626);
+    text-underline-offset: 0.1em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.985 }, { scale: 1, duration: 0.18, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/blue-professional/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/blue-professional/frame-showcase.html
new file mode 100644
index 0000000..ff00e7b
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/blue-professional/frame-showcase.html
@@ -0,0 +1,1372 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Blue Professional</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --bg: #fdfae7;
+        --primary: #1e2bfa;
+        --text: #111111;
+        --muted: #6b6b6b;
+        --light: #9a9a9a;
+        --accent-light: rgba(30, 43, 250, 0.08);
+        --accent-medium: rgba(30, 43, 250, 0.15);
+        --border: rgba(30, 43, 250, 0.2);
+        --card-bg: rgba(30, 43, 250, 0.04);
+        --positive: #059669;
+        --negative: #dc2626;
+        --disp: "Space Grotesk", sans-serif;
+        --body: "Inter", sans-serif;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0b0b16;
+      }
+      body {
+        background: var(--bg);
+        color: var(--muted);
+        font-family: var(--body);
+        -webkit-font-smoothing: antialiased;
+      }
+      .disp {
+        font-family: var(--disp);
+      }
+      .eyebrow {
+        font-family: var(--disp);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 14px;
+        color: var(--primary);
+      }
+
+      section {
+        padding: 108px 76px;
+        position: relative;
+      }
+      .sec-head {
+        display: flex;
+        align-items: flex-start;
+        gap: 20px;
+        margin-bottom: 60px;
+      }
+      .sec-head .ey {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+      }
+      .sec-head .aline {
+        width: 60px;
+        height: 4px;
+        background: var(--primary);
+        border-radius: 2px;
+      }
+      .sec-head h2 {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 42px;
+        line-height: 1.1;
+        letter-spacing: -0.02em;
+        color: var(--text);
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+      .sec-head .tagpill {
+        background: var(--accent-light);
+        color: var(--primary);
+        padding: 0.4rem 1rem;
+        border-radius: 100px;
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 12px;
+        align-self: center;
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 0 7vw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .deco {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 36%;
+        background: var(--accent-light);
+        clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
+      }
+      .cover .dots {
+        position: absolute;
+        top: 14%;
+        right: 10%;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 12px;
+        opacity: 0.25;
+        z-index: 2;
+      }
+      .cover .dots i {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--primary);
+      }
+      .cover .inner {
+        position: relative;
+        z-index: 3;
+        max-width: 64%;
+      }
+      .cover .aline {
+        width: 60px;
+        height: 4px;
+        background: var(--primary);
+        border-radius: 2px;
+        margin-bottom: 28px;
+      }
+      .cover .meta {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 13px;
+        letter-spacing: 0.05em;
+        color: var(--light);
+        margin-bottom: 20px;
+      }
+      .cover h1 {
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: clamp(46px, 5.4vw, 76px);
+        line-height: 1.08;
+        letter-spacing: -0.02em;
+        color: var(--text);
+      }
+      .cover .sub {
+        font-family: var(--body);
+        font-weight: 400;
+        font-size: clamp(16px, 1.4vw, 20px);
+        line-height: 1.6;
+        color: var(--muted);
+        margin-top: 26px;
+        max-width: 560px;
+      }
+      .cover .pbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 16%;
+        background: var(--primary);
+      }
+      .cover .counter {
+        position: absolute;
+        bottom: 24px;
+        left: 7vw;
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: 0.05em;
+        color: var(--muted);
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 20px;
+      }
+      .sw {
+        background: var(--card-bg);
+        border: 1.5px solid var(--border);
+        border-radius: 14px;
+        overflow: hidden;
+      }
+      .sw .chip {
+        height: 92px;
+        border-radius: 10px;
+        margin: 14px 14px 0;
+      }
+      .sw .meta {
+        padding: 14px 18px 18px;
+      }
+      .sw .name {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 17px;
+        color: var(--text);
+        letter-spacing: -0.01em;
+      }
+      .sw .hex {
+        font-family: var(--disp);
+        font-size: 12px;
+        color: var(--muted);
+        margin-top: 4px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 24px 0;
+        border-bottom: 1px solid var(--border);
+      }
+      .type-row .tok {
+        font-family: var(--disp);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 12px;
+        color: var(--primary);
+      }
+      .type-row .m {
+        font-size: 12px;
+        color: var(--muted);
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--disp);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 12px;
+        color: var(--primary);
+        margin-bottom: 20px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 1.2rem;
+        margin-bottom: 48px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .card {
+        background: var(--card-bg);
+        border: 1.5px solid var(--border);
+        border-radius: 14px;
+        padding: 1.5rem 1.6rem;
+        height: 100%;
+      }
+      .card .mv {
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 46px;
+        line-height: 1;
+        color: var(--primary);
+      }
+      .card .ml {
+        font-family: var(--body);
+        font-weight: 600;
+        font-size: 16px;
+        color: var(--text);
+        margin-top: 10px;
+      }
+      .card .md {
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--muted);
+        margin-top: 8px;
+      }
+      .card .chg {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 12.5px;
+        margin-top: 10px;
+      }
+      .card .chg.pos {
+        color: var(--positive);
+      }
+      .card .chg.neg {
+        color: var(--negative);
+      }
+      .statcell {
+        background: var(--card-bg);
+        border: 1px solid var(--border);
+        border-radius: 12px;
+        padding: 1.4rem 1.5rem;
+      }
+      .statcell .n {
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 32px;
+        color: var(--primary);
+        line-height: 1;
+      }
+      .statcell .nm {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 14px;
+        color: var(--text);
+        margin-top: 8px;
+      }
+      .statcell .ctx {
+        font-size: 12px;
+        color: var(--light);
+        margin-top: 8px;
+        padding-top: 8px;
+        border-top: 1px solid var(--border);
+      }
+      .bars .row {
+        display: flex;
+        align-items: center;
+        gap: 14px;
+        margin-bottom: 14px;
+      }
+      .bars .bl {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 14px;
+        color: var(--text);
+        width: 90px;
+      }
+      .bars .track {
+        flex: 1;
+        height: 28px;
+        background: var(--accent-light);
+        border-radius: 6px;
+        overflow: hidden;
+      }
+      .bars .fill {
+        height: 100%;
+        display: block;
+        background: var(--primary);
+        border-radius: 6px;
+      }
+      .bars .pct {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 15px;
+        color: var(--primary);
+        width: 48px;
+        text-align: right;
+      }
+      .steps {
+        display: flex;
+        gap: 20px;
+      }
+      .step {
+        flex: 1;
+      }
+      .step .circ {
+        width: 56px;
+        height: 56px;
+        border-radius: 50%;
+        background: var(--primary);
+        color: var(--bg);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 21px;
+      }
+      .step .t {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 17px;
+        color: var(--text);
+        margin-top: 14px;
+      }
+      .step .d {
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--muted);
+        margin-top: 6px;
+      }
+      .hilite {
+        background: var(--accent-light);
+        border-left: 4px solid var(--primary);
+        border-radius: 12px;
+        padding: 1.3rem 1.5rem;
+      }
+      .hilite .q {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 22px;
+        line-height: 1.4;
+        color: var(--text);
+      }
+      .hilite .c {
+        font-family: var(--disp);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        font-size: 12px;
+        color: var(--muted);
+        margin-top: 14px;
+      }
+      .cta {
+        display: inline-block;
+        background: var(--primary);
+        color: var(--bg);
+        padding: 0.9rem 2.2rem;
+        border-radius: 100px;
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 15px;
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--disp);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 12px;
+        color: var(--muted);
+      }
+      .fw .flabel b {
+        color: var(--text);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--bg);
+        border: 1px solid var(--border);
+        border-radius: 10px;
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+      .frame .pbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0.3cqw;
+        background: var(--primary);
+        z-index: 5;
+      }
+
+      /* f1 cover */
+      .gf1 .deco {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 36%;
+        background: var(--accent-light);
+        clip-path: polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
+        z-index: 1;
+      }
+      .gf1 .dots {
+        position: absolute;
+        top: 14%;
+        right: 9%;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1cqw;
+        opacity: 0.25;
+        z-index: 2;
+      }
+      .gf1 .dots i {
+        width: 0.7cqw;
+        height: 0.7cqw;
+        border-radius: 50%;
+        background: var(--primary);
+      }
+      .gf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .gf1 .aline {
+        width: 5cqw;
+        height: 0.3cqw;
+        background: var(--primary);
+        border-radius: 0.2cqw;
+        margin-bottom: 2cqw;
+      }
+      .gf1 .ey {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 1cqw;
+        letter-spacing: 0.05em;
+        color: var(--light);
+        margin-bottom: 1.4cqw;
+      }
+      .gf1 h3 {
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 5.6cqw;
+        line-height: 1.06;
+        letter-spacing: -0.02em;
+        color: var(--text);
+        max-width: 58cqw;
+      }
+      .gf1 .sub {
+        font-size: 1.4cqw;
+        line-height: 1.5;
+        color: var(--muted);
+        margin-top: 1.8cqw;
+        max-width: 48cqw;
+      }
+
+      /* f2 dashboard */
+      .gf2 .body {
+        padding: 5.5cqw 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .gf2 .hdr {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 2.4cqw;
+      }
+      .gf2 .ey {
+        font-family: var(--disp);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.95cqw;
+        color: var(--primary);
+      }
+      .gf2 h3 {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 3.2cqw;
+        letter-spacing: -0.02em;
+        color: var(--text);
+        margin-top: 0.6cqw;
+      }
+      .gf2 .tp {
+        background: var(--accent-light);
+        color: var(--primary);
+        padding: 0.4cqw 1cqw;
+        border-radius: 100px;
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 0.9cqw;
+      }
+      .gf2 .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1.4cqw;
+        flex: 1;
+      }
+      .gf2 .c {
+        background: var(--card-bg);
+        border: 0.1cqw solid var(--border);
+        border-radius: 1cqw;
+        padding: 1.6cqw;
+      }
+      .gf2 .c .n {
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 3.4cqw;
+        color: var(--primary);
+        line-height: 1;
+      }
+      .gf2 .c .nm {
+        font-family: var(--body);
+        font-weight: 600;
+        font-size: 1.1cqw;
+        color: var(--text);
+        margin-top: 0.6cqw;
+      }
+      .gf2 .c .d {
+        font-size: 0.92cqw;
+        line-height: 1.45;
+        color: var(--muted);
+        margin-top: 0.5cqw;
+      }
+
+      /* f3 bars */
+      .gf3 .body {
+        padding: 5.5cqw 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .gf3 .ey {
+        font-family: var(--disp);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 0.95cqw;
+        color: var(--primary);
+        margin-bottom: 0.6cqw;
+      }
+      .gf3 h3 {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 3cqw;
+        letter-spacing: -0.02em;
+        color: var(--text);
+        margin-bottom: 2.4cqw;
+      }
+      .gf3 .row {
+        display: flex;
+        align-items: center;
+        gap: 1.4cqw;
+        margin-bottom: 1.4cqw;
+      }
+      .gf3 .bl {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 1.2cqw;
+        color: var(--text);
+        width: 14cqw;
+      }
+      .gf3 .track {
+        flex: 1;
+        height: 2.6cqw;
+        background: var(--accent-light);
+        border-radius: 0.6cqw;
+        overflow: hidden;
+      }
+      .gf3 .fill {
+        height: 100%;
+        display: block;
+        background: var(--primary);
+        border-radius: 0.6cqw;
+      }
+      .gf3 .pct {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 1.4cqw;
+        color: var(--primary);
+        width: 5cqw;
+        text-align: right;
+      }
+
+      /* f4 quote/closing */
+      .gf4 {
+        position: relative;
+      }
+      .gf4 .rings {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 34cqw;
+        height: 34cqw;
+        border: 0.1cqw solid var(--border);
+        border-radius: 50%;
+        opacity: 0.4;
+        z-index: 1;
+      }
+      .gf4 .rings::before {
+        content: "";
+        position: absolute;
+        inset: 20%;
+        border: 0.1cqw solid var(--border);
+        border-radius: 50%;
+      }
+      .gf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 0 9cqw;
+      }
+      .gf4 .qm {
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 9cqw;
+        line-height: 0.5;
+        color: var(--primary);
+        opacity: 0.15;
+        height: 4cqw;
+      }
+      .gf4 .q {
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 3.4cqw;
+        line-height: 1.35;
+        color: var(--text);
+        margin-top: 1cqw;
+      }
+      .gf4 .c {
+        font-family: var(--disp);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        font-size: 1cqw;
+        color: var(--muted);
+        margin-top: 2cqw;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 24px;
+      }
+      .do-card {
+        background: var(--card-bg);
+        border: 1.5px solid var(--border);
+        border-radius: 14px;
+        padding: 36px;
+      }
+      .do-card h4 {
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 24px;
+        color: var(--text);
+        margin-bottom: 8px;
+        letter-spacing: -0.01em;
+      }
+      .do-card .aline {
+        width: 48px;
+        height: 4px;
+        background: var(--primary);
+        border-radius: 2px;
+        margin-bottom: 22px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-size: 14px;
+        line-height: 1.6;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 13px;
+        color: var(--muted);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--disp);
+        font-weight: 700;
+        color: var(--primary);
+      }
+      .do-card.do li::before {
+        content: "+";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--light);
+      }
+
+      .foot {
+        padding: 52px 76px;
+        border-top: 1px solid var(--border);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--disp);
+        font-weight: 700;
+        font-size: 26px;
+        color: var(--text);
+        letter-spacing: -0.02em;
+      }
+      .foot .r {
+        font-family: var(--disp);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 11px;
+        color: var(--muted);
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #fdfae7 !important;
+        --secondary: #111111 !important;
+        --tertiary: #6b6b6b !important;
+        --accent: #1e2bfa !important;
+        --f-disp: "Space Grotesk", sans-serif !important;
+        --f-body: "Inter", sans-serif !important;
+        --bg: #fdfae7 !important;
+        --primary: #1e2bfa !important;
+        --text: #111111 !important;
+        --muted: #6b6b6b !important;
+        --disp: "Space Grotesk", sans-serif !important;
+        --body: "Inter", sans-serif !important;
+        --light: #9a9a9a !important;
+        --positive: #059669 !important;
+        --negative: #dc2626 !important;
+        --accent-light: rgba(30, 43, 250, 0.08) !important;
+        --accent-medium: rgba(30, 43, 250, 0.15) !important;
+        --border: rgba(30, 43, 250, 0.2) !important;
+        --card-bg: rgba(30, 43, 250, 0.04) !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="deco"></div>
+      <div class="dots"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+      <div class="inner">
+        <div class="aline"></div>
+        <div class="meta">FRAME SYSTEM · VOL. 01 · CONFIDENTIAL</div>
+        <h1>Restraint, with one strong commitment.</h1>
+        <div class="sub">
+          A consulting-grade frame system — warm cream, a single saturated cobalt carrying every
+          accent, and soft tinted cards that never shout.
+        </div>
+      </div>
+      <div class="counter">01 / 06</div>
+      <div class="pbar"></div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <div class="ey">
+          <div class="aline"></div>
+          <h2>Palette</h2>
+        </div>
+        <span class="sp"></span><span class="tagpill">One Accent, Three Grays</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--bg); box-shadow: inset 0 0 0 1px var(--border)"
+          ></div>
+          <div class="meta">
+            <div class="name">Canvas</div>
+            <div class="hex">#fdfae7</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--primary)"></div>
+          <div class="meta">
+            <div class="name">Cobalt</div>
+            <div class="hex">#1e2bfa · the only accent</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--text)"></div>
+          <div class="meta">
+            <div class="name">Text</div>
+            <div class="hex">#111111</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--muted)"></div>
+          <div class="meta">
+            <div class="name">Muted</div>
+            <div class="hex">#6b6b6b · body</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--card-bg)"></div>
+          <div class="meta">
+            <div class="name">Card Tint</div>
+            <div class="hex">cobalt · 4%</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--border)"></div>
+          <div class="meta">
+            <div class="name">Border</div>
+            <div class="hex">cobalt · 20%</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--positive)"></div>
+          <div class="meta">
+            <div class="name">Positive</div>
+            <div class="hex">#059669 · inline only</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--negative)"></div>
+          <div class="meta">
+            <div class="name">Negative</div>
+            <div class="hex">#dc2626 · inline only</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <div class="ey">
+          <div class="aline"></div>
+          <h2>Typography</h2>
+        </div>
+        <span class="sp"></span><span class="tagpill">Space Grotesk + Inter</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">h1</div>
+          <div class="m">Space Grotesk 700 · −0.02em · near-black</div>
+        </div>
+        <div class="spec">
+          <span
+            class="disp"
+            style="font-weight: 700; font-size: 66px; letter-spacing: -0.02em; color: var(--text)"
+            >Measured.</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">h4-eyebrow</div>
+          <div class="m">Space Grotesk 600 · uppercase · 0.08em · cobalt</div>
+        </div>
+        <div class="spec"><span class="eyebrow">Executive Summary</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">metric-value</div>
+          <div class="m">Space Grotesk 700 · cobalt</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-weight: 700; font-size: 54px; color: var(--primary)"
+            >$24.3M</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Inter 400 · line 1.6 · muted gray</div>
+        </div>
+        <div class="spec">
+          <p style="font-size: 17px; line-height: 1.6; max-width: 660px">
+            Inter carries every paragraph in muted gray — readable, premium, never competing with
+            the cobalt accent or the near-black headline.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">cta</div>
+          <div class="m">Space Grotesk 600 · cobalt pill · cream text</div>
+        </div>
+        <div class="spec"><span class="cta">Book a Briefing</span></div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <div class="ey">
+          <div class="aline"></div>
+          <h2>Components</h2>
+        </div>
+        <span class="sp"></span><span class="tagpill">Soft Tints, No Shadows</span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s4">
+          <div class="cnote">Metric card</div>
+          <div class="card">
+            <div class="mv">$24.3M</div>
+            <div class="ml">Annual Revenue</div>
+            <div class="md">Recurring, across every region.</div>
+            <div class="chg pos">↑ +18% YoY</div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Stat cells</div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem">
+            <div class="statcell">
+              <div class="n">94%</div>
+              <div class="nm">Retention</div>
+              <div class="ctx">Net revenue</div>
+            </div>
+            <div class="statcell">
+              <div class="n">3.4×</div>
+              <div class="nm">Multiple</div>
+              <div class="ctx">On capital</div>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Bar ranking</div>
+          <div class="bars">
+            <div class="row">
+              <span class="bl">Cobalt</span
+              ><span class="track"><span class="fill" style="width: 88%"></span></span
+              ><span class="pct">88</span>
+            </div>
+            <div class="row">
+              <span class="bl">Restraint</span
+              ><span class="track"><span class="fill" style="width: 64%"></span></span
+              ><span class="pct">64</span>
+            </div>
+            <div class="row">
+              <span class="bl">Density</span
+              ><span class="track"><span class="fill" style="width: 46%"></span></span
+              ><span class="pct">46</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s8">
+          <div class="cnote">Step timeline — fade into future</div>
+          <div class="steps">
+            <div class="step">
+              <div class="circ" style="opacity: 1">1</div>
+              <div class="t">Survey</div>
+              <div class="d">Establish the cream baseline.</div>
+            </div>
+            <div class="step">
+              <div class="circ" style="opacity: 0.85">2</div>
+              <div class="t">Tint</div>
+              <div class="d">Lift cards with 4% cobalt.</div>
+            </div>
+            <div class="step">
+              <div class="circ" style="opacity: 0.7">3</div>
+              <div class="t">Accent</div>
+              <div class="d">One cobalt carries emphasis.</div>
+            </div>
+            <div class="step">
+              <div class="circ" style="opacity: 0.55">4</div>
+              <div class="t">Deliver</div>
+              <div class="d">Executive-ready briefing.</div>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Highlight callout</div>
+          <div class="hilite">
+            <div class="q">One accent does all the emphasis work.</div>
+            <div class="c">— The System Principle</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <div class="ey">
+          <div class="aline"></div>
+          <h2>Frame Compositions</h2>
+        </div>
+        <span class="sp"></span><span class="tagpill">True 16:9 · cqw</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · diagonal accent · left</span></div>
+          <div class="frame gf1">
+            <div class="deco"></div>
+            <div class="dots"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>
+            <div class="body">
+              <div class="aline"></div>
+              <div class="ey">FRAME SYSTEM · VOL. 01</div>
+              <h3>Restraint, with one commitment.</h3>
+              <div class="sub">Cream, cobalt, and soft tinted cards.</div>
+            </div>
+            <div class="pbar" style="width: 16%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Dashboard</b><span>· data · 3-up metrics · the dense frame</span>
+          </div>
+          <div class="frame gf2">
+            <div class="body">
+              <div class="hdr">
+                <div>
+                  <div class="ey">Performance</div>
+                  <h3>Q3 At a Glance</h3>
+                </div>
+                <span class="tp">FY2026</span>
+              </div>
+              <div class="grid">
+                <div class="c">
+                  <div class="n">$24M</div>
+                  <div class="nm">Revenue</div>
+                  <div class="d">Up across every region.</div>
+                </div>
+                <div class="c">
+                  <div class="n">94%</div>
+                  <div class="nm">Retention</div>
+                  <div class="d">Net revenue, trailing 12mo.</div>
+                </div>
+                <div class="c">
+                  <div class="n">+18%</div>
+                  <div class="nm">Growth</div>
+                  <div class="d">Year over year, compounding.</div>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 34%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Bar Ranking</b><span>· data · cobalt fills · left</span></div>
+          <div class="frame gf3">
+            <div class="body">
+              <div class="ey">Drivers</div>
+              <h3>What Moves the Number</h3>
+              <div class="row">
+                <span class="bl">Expansion</span
+                ><span class="track"><span class="fill" style="width: 88%"></span></span
+                ><span class="pct">88</span>
+              </div>
+              <div class="row">
+                <span class="bl">New Logos</span
+                ><span class="track"><span class="fill" style="width: 62%"></span></span
+                ><span class="pct">62</span>
+              </div>
+              <div class="row">
+                <span class="bl">Pricing</span
+                ><span class="track"><span class="fill" style="width: 41%"></span></span
+                ><span class="pct">41</span>
+              </div>
+            </div>
+            <div class="pbar" style="width: 58%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Pull Quote</b><span>· quote · concentric rings · centered</span>
+          </div>
+          <div class="frame gf4">
+            <div class="rings"></div>
+            <div class="body">
+              <div class="qm">&ldquo;</div>
+              <div class="q">Quiet is the most expensive thing on the page.</div>
+              <div class="c">— Managing Partner</div>
+            </div>
+            <div class="pbar" style="width: 82%"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <div class="ey">
+          <div class="aline"></div>
+          <h2>Frame Rules</h2>
+        </div>
+        <span class="sp"></span><span class="tagpill">Single Accent</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <div class="aline"></div>
+          <ul>
+            <li>Start every frame on warm cream; cobalt carries every accent.</li>
+            <li>
+              Set headlines near-black with −0.02em tracking; eyebrows cobalt, uppercase, 0.08em.
+            </li>
+            <li>Render every numeral in cobalt Space Grotesk 600–700.</li>
+            <li>Use tinted cards — 4% fill, 20% border, 10–14px radius; soft, never outlined.</li>
+            <li>Pill chrome at 100px; body in Inter 400, muted gray, line 1.6.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <div class="aline"></div>
+          <ul>
+            <li>No second accent color; no cobalt headlines.</li>
+            <li>No drop shadows (save the one soft cobalt CTA hover).</li>
+            <li>No square corners; no opaque cobalt borders.</li>
+            <li>No font substitutes; no uppercase body.</li>
+            <li>Don't fill space with heavier borders — add substance, not noise.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--text);
+        --cap-canvas: var(--bg);
+        --cap-accent: var(--primary);
+        --cap-accent-2: var(--negative);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: color-mix(in srgb, var(--cap-accent) 4%, var(--cap-canvas));
+        border: 0.16cqw solid color-mix(in srgb, var(--cap-accent) 20%, transparent);
+        border-radius: 1cqw;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 3.4cqw;
+        line-height: 1.16;
+        letter-spacing: -0.02em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.18em;
+        border-radius: 0.32em;
+        color: color-mix(in srgb, var(--cap-ink) 52%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-canvas);
+        background: var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed var(--border);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--disp);
+        font-weight: 500;
+        font-size: 0.95cqw;
+        letter-spacing: 0.04em;
+        color: var(--muted);
+        opacity: 0.7;
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <div class="ey">
+          <div class="aline"></div>
+          <h2>Captions</h2>
+        </div>
+        <span class="sp"></span><span class="tagpill">Lower-third · Karaoke</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="deco"></div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 50%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · chip cleared</span></div>
+          <div class="frame capdemo">
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 100%"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Blue Professional</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#fdfae7" />
+        <rect x="58" y="0" width="42" height="100" fill="#1e2bfa" opacity="0.08" />
+        <rect x="14" y="40" width="6" height="20" fill="#1e2bfa" />
+        <rect x="26" y="44" width="44" height="6" rx="3" fill="#111111" />
+        <rect x="26" y="56" width="30" height="4" rx="2" fill="#1e2bfa" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/bold-poster/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/bold-poster/FRAME.md
new file mode 100644
index 0000000..c9f3125
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/bold-poster/FRAME.md
@@ -0,0 +1,275 @@
+---
+version: alpha
+name: Bold Poster — Frame (video / frame layer)
+description: >
+  Video-first companion to Bold Poster's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — the four-color palette (white / brown-black ink / tomato red / off-white),
+  the three-face stack (Shrikhand display tilted at poster scale, Libre Baskerville serif body,
+  Space Grotesk mono chrome), the stacked text-shadow on red display, the 3px+1.5px double-border
+  grid, red leftbar cards, red em-dash bullets, and the red progress bar. 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:
+  bg: "#FFFFFF"
+  dark: "#1C1410"
+  red: "#D8000F"
+  light: "#F5F2EF"
+
+typography:
+  # — reading + chrome ramp —
+  body:    { fontFamily: "Libre Baskerville", cqw: 0.85, weight: 400, lineHeight: 1.75, color: "dark" }
+  body-cell:{ fontFamily: "Libre Baskerville", cqw: 0.7, weight: 400, lineHeight: 1.55 }
+  label:   { fontFamily: "Space Grotesk", px: 10, weight: 600, tracking: "2px", upper: true, color: "red" }
+  bullet-body:{ fontFamily: "Space Grotesk", cqw: 0.62, weight: 400, lineHeight: 1.45 }
+  # — display / hero ramp (Shrikhand 400, tilted) —
+  card-title:{ fontFamily: "Shrikhand", cqw: 1.9, weight: 400, lineHeight: 1.1, color: "dark" }
+  cell-number:{ fontFamily: "Shrikhand", cqw: 2.7, weight: 400, lineHeight: 1.0, color: "red" }
+  section-header:{ fontFamily: "Shrikhand", cqw: 3.3, weight: 400, lineHeight: 1.0, color: "dark" }
+  red-quote:{ fontFamily: "Shrikhand", cqw: 4.7, weight: 400, lineHeight: 1.15, color: "bg", shadow: "stacked" }
+  hero-title-bottom:{ fontFamily: "Shrikhand", cqw: 10.4, weight: 400, lineHeight: 0.9, color: "dark", rotate: "2deg" }
+  hero-title:{ fontFamily: "Shrikhand", cqw: 11.5, weight: 400, lineHeight: 0.88, color: "dark" }
+  hero-title-red:{ fontFamily: "Shrikhand", cqw: 13.5, weight: 400, lineHeight: 0.85, color: "red", rotate: "-4deg" }
+  close-big:{ fontFamily: "Shrikhand", cqw: 13.5, weight: 400, lineHeight: 0.88, color: "red", rotate: "-5deg" }
+  stat-big:{ fontFamily: "Shrikhand", cqw: 22.0, weight: 400, lineHeight: 0.82, color: "red", rotate: "-6deg" }
+
+spacing:
+  pad-slide: "3cqw 3.6cqw"
+  gap-grid: "1.5cqw 2cqw"
+
+components:
+  progress-bar:
+    backgroundColor: "{colors.red}"
+    size: "0.5cqw tall, bottom edge, width grows with index"
+    description: "The most prominent chrome."
+  hero-title-stack:
+    typography: "{typography.hero-title} + {typography.hero-title-red} + {typography.hero-title-bottom}"
+    transform: "≥4 tilt (−4°/+2°), ≥1 line in {colors.red}"
+    description: "A 3-line Shrikhand composition — the signature opener."
+  stat-big:
+    typography: "{typography.stat-big}"
+    color: "{colors.red} (or {colors.bg} on red with stacked shadow)"
+    transform: "rotate(-6deg)"
+    description: "Hero numeral at poster scale."
+  fin-grid:
+    border: "0.3cqw solid {colors.dark} outer"
+    rule: "0.15cqw solid {colors.dark} inner (touching at intersections)"
+    rounded: "0"
+    typography: "{typography.cell-number} ({colors.red}) + {typography.label} + {typography.body-cell}"
+    description: "The double-border tabular signature."
+  red-leftbar-card:
+    borderLeft: "4px solid {colors.red}"
+    padding: "0 0 0 ~1cqw"
+    rounded: "0"
+    shadow: "none"
+    typography: "{typography.card-title} + {typography.body} + red em-dash bullets"
+    description: "Editorial card cantilevered off a red left rule — no outline."
+  red-panel:
+    backgroundColor: "{colors.red}"
+    textColor: "{colors.bg}"
+    description: "Full-bleed statement surface; display carries the stacked text-shadow."
+  dark-panel:
+    backgroundColor: "{colors.dark}"
+    textColor: "{colors.bg}"
+    description: "Full-bleed dark statement surface; red accents."
+  stacked-text-shadow:
+    shadow: "2px 2px 0 rgba(28,20,16,.25), 4px 4px 0 rgba(28,20,16,.2), 6px 6px 0 rgba(28,20,16,.15)"
+    appliesTo: "red display text on red panels only"
+    description: "The ONLY shadow in the system — text-shadow, not box-shadow."
+  bullet:
+    marker: "red em-dash (—) or round (•) glyph at absolute-left"
+    color: "{colors.red}"
+    description: "No default disc bullets; capped at three."
+---
+
+# Bold Poster — Frame (video / frame layer)
+
+## Overview
+
+Bold Poster at frame scale is a **populist editorial poster** — vintage Italian sports-magazine
+display, classical serif body, one saturated tomato red, grids ruled in ink. Every frame should
+feel _printed_: heavy display type at poster scale, locked to one red accent, on a white/off-white
+sheet (or a full red/dark statement panel), with decoration kept to a strict minimum.
+
+The voice is a three-face stack: **Shrikhand** (heavy slab-script, weight 400 only, routinely
+tilted −6°..+2°) carries every hero title, section header, stat, and card title; **Libre
+Baskerville** (literary serif) carries every body paragraph — it's what makes the system feel
+printed; **Space Grotesk** (uppercase, 2–3px tracked) is chrome only — labels, eyebrows, counters,
+bullet bodies. The plane is flat; the _only_ shadow is the stacked text-shadow on red display.
+
+**Key characteristics at frame scale:**
+
+- **Four colors only** — white / brown-black ink / tomato red / off-white. Red is the lone accent.
+- **Shrikhand display, tilted** (−6° stat, −5° close, −4° hero-red, +2° hero-bottom) — the signature movement.
+- **Libre Baskerville serif body** (line 1.75); **Space Grotesk** chrome (uppercase tracked).
+- **Double-border grids** (3px outer + 1.5px inner ink); **red leftbar cards**; **red em-dash bullets** (max 3).
+- **Stacked text-shadow** on red display — the only shadow; flat plane otherwise; square corners.
+- **Red progress bar** at the bottom edge of every frame.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — **one display moment dominates** at 3–6× everything else (the hero stack, `stat-big`, or `close-big`); nothing competes.
+- **Silence** — statement frames reserve **~50–60% negative space**; the **financial grid is the one dense exception**.
+- **Restraint** — **four colors only**, red the lone accent; one display moment per frame; the stacked text-shadow on red is the only shadow; bullets capped at three.
+- **Reference** — aim at a **vintage Italian sports-magazine cover / mid-century European annual report**; failure looks like a **rounded, soft-shadowed multi-accent slide**.
+
+- **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:** `pad-slide` ~3cqw — deliberately tight so the poster type crowds the frame.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Borders stay px; rotation transforms hold.
+
+## Colors
+
+Tokens identical to the source. `{colors.bg}` white is the default ground; `{colors.dark}` is body,
+borders, headers; `{colors.red}` is the only accent — every numeral, section rule, eyebrow,
+leftbar, bullet, progress bar, and the full statement-panel ground. `{colors.light}` off-white
+stripes alternating panels. **No fifth color** (no green/blue/yellow); categorical difference comes
+from position, label, and tilt. Red is never body text, never a tint, never an untexted fill.
+
+## Typography
+
+Two ramps. The **reading/chrome ramp** (Baskerville body 0.85cqw, Space Grotesk labels in px)
+carries copy + chrome; the **display ramp** (Shrikhand `section-header` 3.3cqw → `stat-big` 22cqw)
+carries every statement and numeral.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤2 words → `stat-big`/`hero-title-red`; 3–4 → `hero-title`; 5+ → `section-header`. The hero is a stacked 3-line composition.
+- **Shrikhand is weight 400, tilted on statement/hero elements, red on numerals**; **Baskerville body at line ≥1.5**; **Space Grotesk chrome uppercase, 2–3px**. Inline `<strong>` switches face to Space Grotesk 600. No italic display, no untilted red hero.
+
+## Depth & Surface
+
+Flat plane. Depth from:
+
+- **Heavy borders** — 3px+1.5px double-border grids, 2px global-card outline, 4px red leftbar rules.
+- **Surface inversion** — full-bleed red or dark statement panels.
+- **Tilt** — rotated Shrikhand breaks the baseline for perceived dimension.
+- **The single shadow** — stacked text-shadow on red display only (text-shadow, three steps).
+
+**Ceiling:** no box-shadow, no rounded surface (square corners; only the hint pill is 4px), no gradient.
+
+## Shapes
+
+- **0 radius everywhere** except the hint pill (4px). Cards, cells, panels, callouts — sharp rectangles.
+
+## Components
+
+- **hero-title-stack** — the 3-line tilted opener. **stat-big** — the poster numeral.
+- **fin-grid** — the double-border tabular signature. **red-leftbar-card** — the cantilevered editorial card.
+- **red-panel / dark-panel** — statement surfaces. **stacked-text-shadow** — the one shadow.
+- **bullet** — red em-dash (max 3). **progress-bar** — the red bottom strip.
+
+## Frame Treatments
+
+> Recipe: ground · register · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> One display moment per frame; statement frames reserve massive negative space.
+
+### 1 · Hero Stack (identity · move: 3-line tilted stack · left)
+
+**Ground** white. **Composes** hero-title-stack, label, body tagline, progress-bar. **Focal** a
+3-line Shrikhand stack (e.g. ink / red-tilted / paper) — one red line, one+ tilted. **Chrome** mono
+eyebrow + Baskerville tagline; bottom progress bar + counter. **Accent** the red line. **Silence**
+right half open. **Fixed** Shrikhand 400, ≥1 tilt + ≥1 red, square. **Free** the words, line sizes.
+**Density** low.
+
+### 2 · Hero Stat (statement · move: poster numeral · red panel · centered)
+
+**Ground** full `{colors.red}`. **Composes** stat-big, label, body sub. **Focal** a `stat-big`
+numeral rotated −6° in white with the stacked shadow, centered, with a mono label above + Baskerville
+sub below. **Accent** the ink stacked-shadow on white. **Silence** ~60%. **Fixed** white-on-red +
+stacked shadow, −6° tilt. **Free** the figure (from script), label. **Density** low.
+
+### 3 · Financial Grid (data · move: double-border matrix · the dense frame)
+
+**Ground** white, `pad-slide`. **Composes** label, section-header, fin-grid. **Focal** a 3px-outer/
+1.5px-inner ink grid of cells (red Shrikhand numeral + mono label + Baskerville body). **Chrome** mono
+eyebrow; progress bar. **Accent** the red numerals. **Silence** tight — the density exception.
+**Fixed** double-border, red numerals, serif body. **Free** figures (from script), labels. **Density** dense-exception.
+
+### 4 · Pull Quote (quote · move: tilted/stacked display · red panel · left)
+
+**Ground** full `{colors.red}`. **Composes** red-quote, Baskerville cite. **Focal** a 2-line Shrikhand
+quote in white with the stacked shadow; a Baskerville cite beneath. **Accent** the stacked shadow.
+**Silence** ~50%. **Fixed** white-on-red + stacked shadow. **Free** quote, cite. **Density** low.
+
+### 5 · Editorial Cards (content · move: red leftbar cards · left)
+
+**Ground** white (or alternating off-white stripes). **Composes** label, section-header, 2–3×
+red-leftbar-card. **Focal** cards cantilevered off 4px red rules — Shrikhand title + Baskerville body
+
+- red em-dash bullets (max 3). **Accent** the red left rules + bullets. **Silence** moderate. **Fixed**
+  4px red leftbar, em-dash bullets, no outline. **Free** card content. **Density** standard.
+
+### 6 · Closing Statement (closer · move: tilted close-big · centered/left)
+
+**Ground** white or `{colors.dark}`. **Composes** close-big, label, body sub, progress-bar. **Focal**
+a Shrikhand `close-big` (rotated −5°, red) sign-off; mono eyebrow + Baskerville contact line. **Accent**
+the red tilted title. **Silence** ~60%. **Fixed** −5° tilt, red close-big. **Free** sign-off, contact.
+**Density** low.
+
+## Composition Rules
+
+### Do
+
+- Stack hero titles in 3 Shrikhand lines — at least one tilted, at least one red.
+- Make every numeral **red Shrikhand**; tilt statement display **−5° to −6°**.
+- Set eyebrows in **Space Grotesk 600 uppercase, 2–3px**, red; body in **Baskerville, line 1.75**.
+- Build data grids with the **3px outer + 1.5px inner double border**; use red leftbar cards elsewhere.
+- Use **red em-dash bullets, capped at three**; apply the stacked text-shadow on red display.
+- One display moment per frame; reserve negative space on statement frames.
+
+### Don't
+
+- No second accent color; no rounded corners (square only, save the hint pill).
+- No drop shadow — the stacked text-shadow on red is the only one.
+- No font substitutes; no Shrikhand body, no Baskerville labels, no Space Grotesk headlines.
+- No default disc bullets; no untilted red statement display.
+- Don't crowd a statement frame; don't blow a long line edge-to-edge (step down).
+
+## Aspect-Ratio Behavior
+
+| Treatment       | 16:9                      | 9:16                     | 1:1                  |
+| --------------- | ------------------------- | ------------------------ | -------------------- |
+| Hero Stack      | stack left, tagline below | stack centered, taller   | stack, tagline below |
+| Hero Stat       | numeral centered          | numeral centered, taller | centered             |
+| Financial Grid  | 3 cells across            | 2 across / stacked       | 2×2                  |
+| Pull Quote      | quote left                | quote stacked            | centered             |
+| Editorial Cards | 2–3 across                | stacked                  | stacked              |
+| Closing         | close-big centered        | close-big stacked        | centered             |
+
+`pad-slide` stays tight on the short edge; re-step display so the line stays ≤78cqw above the floor.
+Tilts hold; the progress bar spans the bottom on every ratio.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. The system supplies type, one red, and ink rules, not brands.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, financials, percentages, or dates at frame scale. Render slots as `— figure —`,
+`{metric}`, `+NN%`. Fin-grid cells and stat-big especially carry placeholders until the script
+supplies them. Catalogue numbers / progress are decorative.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one display moment dominates; nothing competes.
+- **Silence** — statement frames reserve ~50–60% negative space; only the fin-grid runs dense.
+- **Color** — four colors only; red is the lone accent; no red body text.
+- **Type** — Shrikhand 400 tilted on statements, red numerals, fit-to-measure; Baskerville body line 1.75; mono chrome uppercase 2–3px; ≥1.4cqw floor.
+- **Depth** — flat; the stacked text-shadow on red display is the only shadow; square corners.
+- **Bullets** — red em-dash, capped at three.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the source's 550ms slide transitions are deck mechanics.
+- **Shrikhand + Libre Baskerville + Space Grotesk via Google Fonts.** CJK: Noto Serif SC 900/400 + Noto Sans SC; Shrikhand's slab-script has no Hanzi equal — keep tilts + red + double-borders to carry the identity.
+- **9:16 / 1:1 are guidance**; verify the one big line ≤78cqw per ratio and that tilts don't clip.
+- Grids, leftbar cards, and the stacked shadow are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/bold-poster/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/bold-poster/caption-skin.html
new file mode 100644
index 0000000..858dc91
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/bold-poster/caption-skin.html
@@ -0,0 +1,229 @@
+<!--
+  Bold Poster — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a bold-poster
+  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 fresh-paper card with bold poster framing — a heavy 1.5px brown-black ink
+  rule plus a 4px tomato-red leftbar (the brand's cantilevered-card signature), SQUARE
+  corners, NO drop shadow (the system's only shadow is the stacked text-shadow on red
+  display). Serif body face, ink glyphs. Upcoming words sit in faint ink; the current
+  word slams into a tomato-red panel (the brand's signature surface inversion, a hard
+  square block on paper-white reading, no blur) with the stacked text-shadow on it;
+  spoken words settle to solid ink, panel cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 paper card — heavy 1.5px brown-black ink rule + a 4px tomato-red leftbar
+     (bold poster's cantilevered red-leftbar-card signature), square corners, NO
+     drop shadow (the only shadow in the system is the stacked text-shadow on red) */
+  .caption-pill {
+    max-width: 78%;
+    padding: 20px 44px 24px;
+    background: var(--cap-canvas, #ffffff);
+    border: 1.5px solid var(--cap-ink, #1c1410);
+    border-left: 4px solid var(--cap-accent, #d8000f);
+    border-radius: 0;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.1em 0.34em;
+    font-family: var(--font-display, "Shrikhand"), Georgia, serif;
+    font-weight: 400;
+    font-size: clamp(40px, 4.4vw, 58px);
+    line-height: 1.16;
+    letter-spacing: -0.01em;
+  }
+
+  /* upcoming — faint brown-black ink, no panel */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.06em;
+    color: color-mix(in srgb, var(--cap-ink, #1c1410) 42%, var(--cap-canvas, #ffffff));
+  }
+  /* current word — THE tomato-red panel (box-shadow spread = a hard square block
+     w/o layout shift; no blur), paper-white reading on top carrying the stacked
+     text-shadow — bold poster's surface-inversion + only-shadow signatures */
+  .caption-word.is-active {
+    color: var(--cap-canvas, #ffffff);
+    background: var(--cap-accent, #d8000f);
+    box-shadow: 0 0 0 0.06em var(--cap-accent, #d8000f);
+    text-shadow:
+      0.03em 0.03em 0 rgba(28, 20, 16, 0.25),
+      0.06em 0.06em 0 rgba(28, 20, 16, 0.2),
+      0.09em 0.09em 0 rgba(28, 20, 16, 0.15);
+  }
+  /* already spoken — solid brown-black ink, panel cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #1c1410);
+    background: transparent;
+    box-shadow: none;
+    text-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — Shrikhand display, bold poster's display face inflection */
+  .caption-word.cap-brand {
+    font-family: var(--font-display, "Shrikhand"), Georgia, serif;
+  }
+  /* numerals / data — the mono chrome voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Libre Baskerville"), ui-monospace, monospace;
+    color: color-mix(in srgb, var(--cap-ink, #1c1410) 72%, var(--cap-canvas, #ffffff));
+  }
+  /* emphasis — a tomato-red em-dash-weight underline (the lone accent) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--cap-accent-2, #f5f2ef);
+    text-underline-offset: 0.1em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.9 }, { scale: 1, duration: 0.16, ease: "back.out(2.2)" }, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/bold-poster/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/bold-poster/frame-showcase.html
new file mode 100644
index 0000000..a8f9189
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/bold-poster/frame-showcase.html
@@ -0,0 +1,1140 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Bold Poster</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Space+Grotesk:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --bg: #ffffff;
+        --dark: #1c1410;
+        --red: #d8000f;
+        --light: #f5f2ef;
+        --disp: "Shrikhand", cursive;
+        --body: "Libre Baskerville", serif;
+        --mono: "Space Grotesk", sans-serif;
+        --stack-shadow:
+          2px 2px 0 rgba(28, 20, 16, 0.25), 4px 4px 0 rgba(28, 20, 16, 0.2),
+          6px 6px 0 rgba(28, 20, 16, 0.15);
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0c0a08;
+      }
+      body {
+        background: var(--bg);
+        color: var(--dark);
+        font-family: var(--body);
+        -webkit-font-smoothing: antialiased;
+      }
+      .disp {
+        font-family: var(--disp);
+        font-weight: 400;
+        color: var(--dark);
+      }
+      .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--red);
+      }
+
+      section {
+        padding: 100px 64px;
+        position: relative;
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 20px;
+        margin-bottom: 52px;
+        border-bottom: 3px solid var(--dark);
+        padding-bottom: 18px;
+      }
+      .sec-head .k {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 12px;
+        color: var(--red);
+      }
+      .sec-head h2 {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 52px;
+        line-height: 1;
+        color: var(--dark);
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+      .sec-head .n {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 7vh 64px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+      }
+      .cover .meta {
+        font-family: var(--body);
+        font-size: 14px;
+        color: var(--dark);
+        margin-bottom: 24px;
+      }
+      .cover .meta .label {
+        display: inline-block;
+        margin-bottom: 8px;
+      }
+      .cover .stack h1 {
+        font-family: var(--disp);
+        font-weight: 400;
+        line-height: 0.84;
+      }
+      .cover .l1 {
+        font-size: clamp(60px, 12vw, 150px);
+        color: var(--dark);
+      }
+      .cover .l2 {
+        font-size: clamp(72px, 14vw, 180px);
+        color: var(--red);
+        transform: rotate(-4deg);
+        transform-origin: left;
+        display: inline-block;
+        margin: 4px 0;
+      }
+      .cover .l3 {
+        font-size: clamp(56px, 11vw, 140px);
+        color: var(--dark);
+        transform: rotate(2deg);
+        transform-origin: left;
+        display: inline-block;
+      }
+      .cover .tagline {
+        font-family: var(--body);
+        font-size: clamp(15px, 1.5vw, 19px);
+        line-height: 1.6;
+        color: var(--dark);
+        max-width: 560px;
+        margin-top: 36px;
+      }
+      .cover .pbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 5px;
+        width: 16%;
+        background: var(--red);
+      }
+      .cover .counter {
+        position: absolute;
+        bottom: 20px;
+        right: 32px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+        opacity: 0.5;
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0;
+        border: 3px solid var(--dark);
+      }
+      .sw {
+        border-right: 1.5px solid var(--dark);
+      }
+      .sw:last-child {
+        border-right: 0;
+      }
+      .sw .chip {
+        height: 150px;
+        border-bottom: 1.5px solid var(--dark);
+      }
+      .sw .meta {
+        padding: 18px 20px;
+      }
+      .sw .name {
+        font-family: var(--disp);
+        font-size: 24px;
+        color: var(--dark);
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 11px;
+        letter-spacing: 0.06em;
+        color: var(--dark);
+        opacity: 0.6;
+        margin-top: 8px;
+      }
+      .sw .role {
+        font-family: var(--body);
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--dark);
+        margin-top: 10px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 1.5px solid var(--dark);
+      }
+      .type-row .tok {
+        font-family: var(--mono);
+        font-weight: 600;
+        font-size: 11px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--red);
+      }
+      .type-row .m {
+        font-family: var(--body);
+        font-size: 12px;
+        color: var(--dark);
+        opacity: 0.65;
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--red);
+        margin-bottom: 20px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 36px;
+        margin-bottom: 48px;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .fingrid {
+        border: 3px solid var(--dark);
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+      }
+      .fingrid .cell {
+        border: 1.5px solid var(--dark);
+        padding: 22px 20px;
+      }
+      .fingrid .cell .num {
+        font-family: var(--disp);
+        font-size: 44px;
+        color: var(--red);
+        line-height: 1;
+      }
+      .fingrid .cell .lab {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 10px;
+        color: var(--dark);
+        margin-top: 10px;
+      }
+      .fingrid .cell .bd {
+        font-family: var(--body);
+        font-size: 12px;
+        line-height: 1.55;
+        color: var(--dark);
+        margin-top: 8px;
+      }
+      .leftcard {
+        border-left: 4px solid var(--red);
+        padding-left: 18px;
+      }
+      .leftcard .t {
+        font-family: var(--disp);
+        font-size: 30px;
+        color: var(--dark);
+        line-height: 1.1;
+      }
+      .leftcard .bd {
+        font-family: var(--body);
+        font-size: 14px;
+        line-height: 1.6;
+        color: var(--dark);
+        margin-top: 10px;
+      }
+      .leftcard ul {
+        list-style: none;
+        margin-top: 14px;
+      }
+      .leftcard li {
+        font-family: var(--mono);
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--dark);
+        padding-left: 16px;
+        position: relative;
+        margin-bottom: 6px;
+      }
+      .leftcard li::before {
+        content: "—";
+        position: absolute;
+        left: 0;
+        color: var(--red);
+        font-weight: 700;
+      }
+      .redpanel {
+        background: var(--red);
+        color: var(--bg);
+        padding: 48px;
+      }
+      .redpanel .q {
+        font-family: var(--disp);
+        font-size: 48px;
+        line-height: 1.15;
+        color: var(--bg);
+        text-shadow: var(--stack-shadow);
+      }
+      .redpanel .cite {
+        font-family: var(--body);
+        font-size: 14px;
+        color: var(--bg);
+        margin-top: 24px;
+        opacity: 0.85;
+      }
+      .tag {
+        display: inline-block;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 11px;
+        color: var(--red);
+        border: 0;
+        padding: 0;
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+        opacity: 0.55;
+      }
+      .fw .flabel b {
+        color: var(--dark);
+        opacity: 1;
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--bg);
+        border: 1.5px solid var(--dark);
+      }
+      .frame.red {
+        background: var(--red);
+      }
+      .frame.dark {
+        background: var(--dark);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+      }
+      .frame .pbar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0.5cqw;
+        background: var(--red);
+        z-index: 5;
+      }
+
+      /* f1 hero stack */
+      .pf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .pf1 .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 1cqw;
+        color: var(--red);
+        margin-bottom: 1.6cqw;
+      }
+      .pf1 h3 {
+        font-family: var(--disp);
+        font-weight: 400;
+        line-height: 0.84;
+      }
+      .pf1 .a {
+        font-size: 11cqw;
+        color: var(--dark);
+      }
+      .pf1 .b {
+        font-size: 13cqw;
+        color: var(--red);
+        transform: rotate(-4deg);
+        transform-origin: left;
+        display: inline-block;
+        margin: 0.3cqw 0;
+      }
+      .pf1 .c {
+        font-size: 10cqw;
+        color: var(--dark);
+        transform: rotate(2deg);
+        transform-origin: left;
+        display: inline-block;
+      }
+
+      /* f2 stat-big red panel */
+      .pf2 {
+        background: var(--red);
+      }
+      .pf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        color: var(--bg);
+      }
+      .pf2 .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1.1cqw;
+        color: var(--bg);
+        opacity: 0.8;
+        margin-bottom: 1cqw;
+      }
+      .pf2 .big {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 30cqw;
+        line-height: 0.82;
+        color: var(--bg);
+        transform: rotate(-6deg);
+        text-shadow:
+          0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
+          0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
+          0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
+      }
+      .pf2 .sub {
+        font-family: var(--body);
+        font-size: 1.6cqw;
+        color: var(--bg);
+        margin-top: 2cqw;
+        opacity: 0.9;
+      }
+
+      /* f3 financial grid */
+      .pf3 .body {
+        padding: 6cqw 5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .pf3 .label {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 0.95cqw;
+        color: var(--red);
+        margin-bottom: 0.8cqw;
+      }
+      .pf3 h3 {
+        font-family: var(--disp);
+        font-size: 4.4cqw;
+        color: var(--dark);
+        margin-bottom: 2cqw;
+      }
+      .pf3 .grid {
+        border: 0.3cqw solid var(--dark);
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        flex: 1;
+      }
+      .pf3 .cell {
+        border: 0.15cqw solid var(--dark);
+        padding: 1.6cqw;
+      }
+      .pf3 .cell .num {
+        font-family: var(--disp);
+        font-size: 4cqw;
+        color: var(--red);
+        line-height: 1;
+      }
+      .pf3 .cell .lab {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.15cqw;
+        font-size: 0.8cqw;
+        color: var(--dark);
+        margin-top: 0.8cqw;
+      }
+      .pf3 .cell .bd {
+        font-family: var(--body);
+        font-size: 0.95cqw;
+        line-height: 1.5;
+        color: var(--dark);
+        margin-top: 0.6cqw;
+      }
+
+      /* f4 quote red panel */
+      .pf4 {
+        background: var(--red);
+      }
+      .pf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+        color: var(--bg);
+      }
+      .pf4 .q {
+        font-family: var(--disp);
+        font-weight: 400;
+        font-size: 5.2cqw;
+        line-height: 1.15;
+        color: var(--bg);
+        text-shadow:
+          0.15cqw 0.15cqw 0 rgba(28, 20, 16, 0.25),
+          0.3cqw 0.3cqw 0 rgba(28, 20, 16, 0.2),
+          0.45cqw 0.45cqw 0 rgba(28, 20, 16, 0.15);
+      }
+      .pf4 .cite {
+        font-family: var(--body);
+        font-size: 1.3cqw;
+        color: var(--bg);
+        opacity: 0.85;
+        margin-top: 2.4cqw;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0;
+        border: 3px solid var(--dark);
+      }
+      .do-card {
+        padding: 38px;
+      }
+      .do-card.do {
+        border-right: 1.5px solid var(--dark);
+      }
+      .do-card h4 {
+        font-family: var(--disp);
+        font-size: 34px;
+        color: var(--dark);
+        margin-bottom: 22px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--body);
+        font-size: 14px;
+        line-height: 1.55;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 13px;
+        color: var(--dark);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-weight: 700;
+      }
+      .do-card.do li::before {
+        content: "—";
+        color: var(--red);
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--dark);
+        opacity: 0.4;
+      }
+
+      .foot {
+        padding: 48px 64px;
+        border-top: 3px solid var(--dark);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--disp);
+        font-size: 30px;
+        color: var(--dark);
+      }
+      .foot .r {
+        font-family: var(--mono);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--dark);
+        opacity: 0.55;
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Shrikhand&display=swap" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #ffffff !important;
+        --secondary: #1c1410 !important;
+        --tertiary: #f5f2ef !important;
+        --accent: #d8000f !important;
+        --f-disp: "Shrikhand", sans-serif !important;
+        --f-body: "Libre Baskerville", sans-serif !important;
+        --bg: #ffffff !important;
+        --dark: #1c1410 !important;
+        --red: #d8000f !important;
+        --light: #f5f2ef !important;
+        --disp: "Shrikhand", sans-serif !important;
+        --body: "Libre Baskerville", sans-serif !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="meta">
+        <span class="label">Frame System · Vol. 01</span><br />A populist editorial poster system —
+        printed, loud, unmistakable.
+      </div>
+      <div class="stack">
+        <h1 class="l1">ink,</h1>
+        <br />
+        <h1 class="l2">red &amp;</h1>
+        <br />
+        <h1 class="l3">paper.</h1>
+      </div>
+      <div class="tagline">
+        Vintage Italian sports-magazine display, classical serif body, one saturated tomato red, and
+        grids ruled in ink.
+      </div>
+      <div class="pbar"></div>
+      <div class="counter">01 / 06</div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="k">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="n">Four Colors, No More</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--bg); border-bottom: 1.5px solid var(--dark)"
+          ></div>
+          <div class="meta">
+            <div class="name">Paper</div>
+            <div class="hex">#FFFFFF</div>
+            <div class="role">Fresh newsprint canvas.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--dark)"></div>
+          <div class="meta">
+            <div class="name">Ink</div>
+            <div class="hex">#1C1410</div>
+            <div class="role">Warm brown-black — text + rules.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--red)"></div>
+          <div class="meta">
+            <div class="name">Red</div>
+            <div class="hex">#D8000F</div>
+            <div class="role">The only accent — numerals, rules, panels.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--light)"></div>
+          <div class="meta">
+            <div class="name">Off-White</div>
+            <div class="hex">#F5F2EF</div>
+            <div class="role">Alternating striped panels.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section style="background: var(--light)">
+      <div class="sec-head">
+        <span class="k">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="n">Shrikhand · Baskerville · Grotesk</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">stat-big</div>
+          <div class="m">Shrikhand 400 · rotated −6° · always red</div>
+        </div>
+        <div class="spec">
+          <span
+            class="disp"
+            style="
+              font-size: 110px;
+              color: var(--red);
+              display: inline-block;
+              transform: rotate(-6deg);
+            "
+            >94</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">section-header</div>
+          <div class="m">Shrikhand 400 · ink</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 60px">The Printed Page</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Libre Baskerville 400 · line 1.75 · ink</div>
+        </div>
+        <div class="spec">
+          <p style="font-family: var(--body); font-size: 16px; line-height: 1.75; max-width: 640px">
+            Libre Baskerville carries every paragraph — the literary serif is what makes the system
+            feel printed, not digital.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">Space Grotesk 600 · uppercase · 2–3px</div>
+        </div>
+        <div class="spec">
+          <span class="label" style="font-size: 13px; letter-spacing: 3px"
+            >Section Eyebrow / Metadata</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="k">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="n">Heavy Rules · One Shadow</span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s7">
+          <div class="cnote">Financial grid — 3px outer + 1.5px inner double border</div>
+          <div class="fingrid">
+            <div class="cell">
+              <div class="num">$24M</div>
+              <div class="lab">Revenue</div>
+              <div class="bd">Up across every region this year.</div>
+            </div>
+            <div class="cell">
+              <div class="num">+18%</div>
+              <div class="lab">Growth</div>
+              <div class="bd">Year over year, compounding.</div>
+            </div>
+            <div class="cell">
+              <div class="num">3.4×</div>
+              <div class="lab">Multiple</div>
+              <div class="bd">On invested capital to date.</div>
+            </div>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">Red leftbar card</div>
+          <div class="leftcard">
+            <div class="t">Editorial Block</div>
+            <div class="bd">
+              Cantilevered off a 4px red rule — the card reads without an enclosing outline.
+            </div>
+            <ul>
+              <li>red em-dash bullets</li>
+              <li>capped at three</li>
+              <li>serif body, mono markers</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s7">
+          <div class="cnote">Red panel — the one stacked text-shadow</div>
+          <div class="redpanel">
+            <div class="q">printed and pressed.</div>
+            <div class="cite">— White Shrikhand on red, stamped three times off-register.</div>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">Tilted statement + tags</div>
+          <div style="display: flex; flex-direction: column; gap: 24px">
+            <span
+              class="disp"
+              style="
+                font-size: 80px;
+                color: var(--red);
+                transform: rotate(-5deg);
+                transform-origin: left;
+                display: inline-block;
+              "
+              >loud.</span
+            >
+            <div style="display: flex; gap: 18px">
+              <span class="tag">Sports Annual</span><span class="tag">Wine Catalogue</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section style="background: var(--light)">
+      <div class="sec-head">
+        <span class="k">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="n">True 16:9 · cqw</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Hero Stack</b><span>· identity · 3-line tilted · left</span></div>
+          <div class="frame pf1">
+            <div class="body">
+              <div class="label">Frame System · Vol. 01</div>
+              <h3>
+                <span class="a">ink,</span><br /><span class="b">red &amp;</span><br /><span
+                  class="c"
+                  >paper.</span
+                >
+              </h3>
+            </div>
+            <div class="pbar" style="width: 16%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Hero Stat</b><span>· statement · red panel · centered</span></div>
+          <div class="frame red pf2">
+            <div class="body">
+              <div class="label">Readership</div>
+              <div class="big">94</div>
+              <div class="sub">percent recall, unaided.</div>
+            </div>
+            <div class="pbar" style="width: 48%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Financial Grid</b><span>· data · double border · the dense frame</span>
+          </div>
+          <div class="frame pf3">
+            <div class="body">
+              <div class="label">By The Numbers</div>
+              <h3>The Annual</h3>
+              <div class="grid">
+                <div class="cell">
+                  <div class="num">$24M</div>
+                  <div class="lab">Revenue</div>
+                  <div class="bd">Up across every region.</div>
+                </div>
+                <div class="cell">
+                  <div class="num">+18%</div>
+                  <div class="lab">Growth</div>
+                  <div class="bd">Year over year.</div>
+                </div>
+                <div class="cell">
+                  <div class="num">3.4×</div>
+                  <div class="lab">Multiple</div>
+                  <div class="bd">On capital to date.</div>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 64%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Pull Quote</b><span>· quote · red panel · stacked shadow</span>
+          </div>
+          <div class="frame red pf4">
+            <div class="body">
+              <div class="q">type that<br />shouts.</div>
+              <div class="cite">— The system voice, printed and pressed.</div>
+            </div>
+            <div class="pbar" style="width: 82%"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="k">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="n">One Red · Square Corners</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>Stack hero titles in 3 Shrikhand lines — at least one tilted, one red.</li>
+            <li>Make every numeral red Shrikhand; tilt statement display −5° to −6°.</li>
+            <li>Set eyebrows in Space Grotesk 600 uppercase, 2–3px tracked, red.</li>
+            <li>Build data grids with 3px outer + 1.5px inner double borders.</li>
+            <li>Use red em-dash bullets, capped at three; serif body at line 1.75.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>No second accent color; no rounded corners (square only).</li>
+            <li>No drop shadows — the stacked text-shadow on red is the only one.</li>
+            <li>No font substitutes; no Shrikhand body, no Baskerville labels.</li>
+            <li>No default disc bullets; no untilted red statement display.</li>
+            <li>Don't crowd a statement frame — reserve the negative space.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--dark);
+        --cap-canvas: var(--bg);
+        --cap-accent: var(--red);
+        --cap-accent-2: var(--light);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 1.5px solid var(--cap-ink);
+        border-left: 0.35cqw solid var(--cap-accent);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--body);
+        font-weight: 400;
+        font-size: 3.2cqw;
+        line-height: 1.16;
+        letter-spacing: -0.01em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.06em;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-canvas);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.06em var(--cap-accent);
+        text-shadow:
+          0.03em 0.03em 0 rgba(28, 20, 16, 0.25),
+          0.06em 0.06em 0 rgba(28, 20, 16, 0.2),
+          0.09em 0.09em 0 rgba(28, 20, 16, 0.15);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed rgba(28, 20, 16, 0.3);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-size: 0.95cqw;
+        letter-spacing: 0.04em;
+        color: var(--dark);
+        opacity: 0.5;
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="k">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="n">Lower-third · Karaoke</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 88%"></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · red panel cleared</span></div>
+          <div class="frame capdemo">
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pbar" style="width: 100%"></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Bold Poster</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#FFFFFF" />
+        <text x="12" y="42" font-family="Georgia" font-weight="700" font-size="26" fill="#1C1410">
+          ink
+        </text>
+        <text
+          x="14"
+          y="70"
+          font-family="Georgia"
+          font-weight="700"
+          font-size="30"
+          fill="#D8000F"
+          transform="rotate(-5 14 70)"
+        >
+          red.
+        </text>
+        <rect x="0" y="96" width="58" height="4" fill="#D8000F" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/broadside/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/broadside/FRAME.md
new file mode 100644
index 0000000..4dff52d
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/broadside/FRAME.md
@@ -0,0 +1,284 @@
+---
+version: alpha
+name: Broadside — Frame (video / frame layer)
+description: >
+  Video-first companion to Broadside's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — the two-register surface system (dark ink-black / fire-orange), massive
+  Barlow in lowercase weight 900 treated as graphic primitive, IBM Plex Mono chrome (uppercase,
+  0.14em), the single fire-orange accent, the flat plane, and 1px hairline dividers. Composition +
+  frame scale rewritten for the frame. 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-black: "#111111"
+  ink-black-alt: "#1A1A18"
+  fire-orange: "#E85D26"
+  cream: "#F0ECE5"
+  cream-muted: "#888880"
+  cream-hint: "#505048"
+  border-dark: "#282826"
+  ink-on-orange-muted: "rgba(17,17,17,0.75)"
+  ink-on-orange-hint: "rgba(17,17,17,0.55)"
+  ink-on-orange-faint: "rgba(17,17,17,0.40)"
+  ink-on-orange-border: "rgba(17,17,17,0.20)"
+
+typography:
+  # — reading ramp —
+  body:    { fontFamily: "Barlow", cqw: 1.2, weight: 400, lineHeight: 1.6 }
+  lead:    { fontFamily: "Barlow", cqw: 1.6, weight: 400, lineHeight: 1.5 }
+  caption: { fontFamily: "Barlow", cqw: 0.9, weight: 400, lineHeight: 1.5 }
+  label:   { fontFamily: "IBM Plex Mono", cqw: 0.72, weight: 500, tracking: "0.14em", upper: true }
+  # — display / hero ramp (Barlow, lowercase, negative tracking) —
+  h3:      { fontFamily: "Barlow", cqw: 2.8, weight: 600, lineHeight: 1.2, lower: true }
+  quote-text:{ fontFamily: "Barlow", cqw: 3.8, weight: 700, lineHeight: 1.15, tracking: "-0.02em", lower: true }
+  h2:      { fontFamily: "Barlow", cqw: 4.5, weight: 700, lineHeight: 1.1, tracking: "-0.02em", lower: true }
+  stat-value:{ fontFamily: "Barlow", cqw: 5.5, weight: 900, lineHeight: 1.0, tracking: "-0.04em" }
+  h1:      { fontFamily: "Barlow", cqw: 7.5, weight: 800, lineHeight: 0.9, tracking: "-0.03em", lower: true }
+  fadelist-item:{ fontFamily: "Barlow", cqw: 7.5, weight: 900, lineHeight: 1.0, tracking: "-0.03em", lower: true }
+  quote-mark:{ fontFamily: "Barlow", cqw: 10.0, weight: 900, lineHeight: 0.6 }
+  fadelist-title:{ fontFamily: "Barlow", cqw: 10.5, weight: 900, lineHeight: 0.9, tracking: "-0.04em", lower: true }
+  display: { fontFamily: "Barlow", cqw: 13.0, weight: 900, lineHeight: 0.88, tracking: "-0.04em", lower: true }
+
+spacing:
+  pad-x: "5.5cqw"
+  pad-y: "5.5cqw"
+  gap-lg: "3.5cqw"
+  gap-md: "2cqw"
+  gap-sm: "1cqw"
+
+components:
+  registers:
+    dark: "ground {colors.ink-black}, text {colors.cream}, accent {colors.fire-orange}"
+    orange: "ground {colors.fire-orange}, text {colors.ink-black}"
+    description: "Two surfaces only — no cream/paper register. One register per frame."
+  slide-chrome:
+    rule: "1px solid {colors.border-dark} (dark) / 20% ink (orange)"
+    placement: "top + bottom bars (label left, number right)"
+    description: "SUPPRESSED on cover/chapter/statement/quote/end — declarative frames let type fill the field."
+  kicker:
+    typography: "{typography.label}"
+    color: "{colors.fire-orange} (dark) / 55% ink (orange)"
+    description: "Uppercase mono eyebrow."
+  rule:
+    backgroundColor: "{colors.fire-orange} (dark) / {colors.ink-black} (orange)"
+    size: "36×2px"
+    description: "Stub accent bar — the system's only ornament."
+  broadside-num:
+    typography: "{typography.label}"
+    placement: "top-left of orange cover/chapter, low opacity"
+    description: "Mono catalogue numeral."
+  stat-card:
+    borderTop: "1px solid {colors.border-dark}"
+    typography: "{typography.stat-value} (orange on dark / ink on orange) + {typography.body} + {typography.label}"
+    description: "Top-border-only block, no other borders."
+  bullet:
+    marker: "orange `/` mono via ::before"
+    typography: "{typography.lead}"
+    description: "Capped at THREE items."
+  bar-track:
+    borderLeft: "1px solid {colors.border-dark}"
+    bars: "{colors.cream-hint}, one .accent {colors.fire-orange}"
+    typography: "{typography.label} axis"
+    description: "Vertical bar chart, left axis only."
+  compare-panel:
+    layout: "two equal panels split by a 1px vertical rule"
+    payoff: "right panel may fill {colors.fire-orange}"
+    description: "Before/after."
+  fadelist:
+    typography: "{typography.fadelist-item} ×3 at opacity 1.0/0.5/0.22 + {typography.fadelist-title}"
+    description: "Three stacked words + one oversized title opposite."
+---
+
+# Broadside — Frame (video / frame layer)
+
+## Overview
+
+Broadside at frame scale is a **protest-poster system where type is so large it stops reading as
+text and becomes graphic primitive.** Barlow `display` at 13cqw puts a single lowercase word
+nearly across the frame. The system runs in **two registers**: a dark ink-black ground with cream
+text for documentation, and a fire-orange ground with dark ink for declaration. Fire-orange is the
+_only_ color — accent on dark, environment on orange. The plane is flat; hierarchy is weight, size,
+and 1px hairlines.
+
+**Barlow** carries every text role from display to body — expressive range from weight (400–900)
+and size, not face contrast. **IBM Plex Mono** is chrome only (numbers, kickers, tags, axis labels,
+the `/` bullet marker), always uppercase and tracked. Display is **lowercase** — the system's most
+distinctive single decision, a deliberate inversion of the brutalist norm.
+
+**Key characteristics at frame scale:**
+
+- **Two registers** — dark (cream text) / orange (ink text). No cream/paper register.
+- **Massive lowercase Barlow 900**, negative-tracked, as graphic primitive (display 13cqw).
+- **Fire-orange is the only color** — accent on dark, full environment on orange.
+- **IBM Plex Mono chrome** — uppercase, 0.14em; the `/` bullet marker; mono catalogue numbers.
+- **Flat plane** — no shadow, no radius (save nav dots), no gradient; 1px hairlines carry structure.
+- **Low density** — one statement per frame, bullets capped at three, chrome suppressed on declarative frames.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — exactly **one display moment dominates** at 3–6× everything else; nothing competes.
+- **Silence** — declarative frames read **45–55% empty**; the **stat grid is the one dense exception**.
+- **Restraint** — **one register per frame**; **fire-orange is the only color** (accent on dark, environment on orange); one display moment; bullets capped at three.
+- **Reference** — aim at **broadside printing / a SPACE10 report / a Wim Crouwel grid with one loud color**; failure looks like a **multi-accent corporate slide deck**.
+
+- **Primary:** 1920×1080 (16:9). Type authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`; or carry the source's `vw` 1:1).
+- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
+- **Safe area:** `pad-x`/`pad-y` 5.5cqw — deliberately tight so the massive type crowds the frame edge.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw` (a `vw`-sized frame inflates when not
+full-screen). 1px hairlines stay 1px.
+
+## Colors
+
+Tokens identical to the source, in two registers. **Dark:** `{colors.ink-black}` ground,
+`{colors.cream}` text, `{colors.fire-orange}` accent (kickers, accent stat, bullet `/`, lead bar,
+quote mark, rule stub). **Orange:** `{colors.fire-orange}` ground, `{colors.ink-black}` headlines +
+body, with the dark-ink overlays (75/55/40/20%) as the muted tones. Choose one register per frame
+and commit. **No second accent color** — on orange, emphasis is weight/opacity on the ink, never a
+new hue. Cream text on orange does not exist (ink-on-fire is absolute).
+
+## Typography
+
+Two ramps. The **reading ramp** (Barlow body 1.2cqw, mono label 0.72cqw) carries copy + chrome; the
+**display ramp** (Barlow `h2` 4.5cqw → `display` 13cqw, weight 700–900) carries every statement.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤2 words → `display`; 3–4 → `h1`; 5+ → `h2`. Broadside packs only ONE display moment per frame.
+- **Barlow display is lowercase, weight 700–900, negative-tracked** (−0.04em largest, −0.02em h2). **Mono chrome is uppercase, 0.1em+.** No italic, no underline, no uppercase display.
+
+## Depth & Surface
+
+Flat plane, the only technique. Hierarchy from:
+
+- **Weight + size contrast** — the dominant signal (900 lowercase display).
+- **1px hairlines** — chrome bars, stat-card top, compare divider, bar-track left, chart baseline.
+- **Color shift** — orange on ink, ink on cream, cream-muted on cream.
+- **Negative space** — generous, intentional empty regions.
+
+**Ceiling:** no box-shadow, no elevation, no rounded surface (save nav dots), no gradient ground.
+
+## Shapes
+
+- **0 radius everywhere** except nav dots (50%). Cards, panels, tags, stat blocks, bars — sharp rectangles.
+
+## Components
+
+- **registers** — the two-surface system. **slide-chrome** — optional hairline bars, suppressed on declarative frames.
+- **kicker** (mono eyebrow) / **rule** (36×2 stub) / **broadside-num** (catalogue mark) — the chrome ornament set.
+- **stat-card** (top-border only) / **bullet** (orange `/`, max 3) / **bar-track** (one accent bar) / **compare-panel** (orange payoff) / **fadelist** (1.0/0.5/0.22 stack).
+
+## Frame Treatments
+
+> Recipe: ground · register · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> One statement per frame; chrome suppressed on declarative frames.
+
+### 1 · Cover (identity · move: massive type · ORANGE register · left)
+
+**Ground** fire-orange. **Composes** broadside-num, rule, kicker, display, lead. **Focal** a 1–2 word
+Barlow `display` (13cqw) lowercase in ink, left-anchored, over a small ink rule stub + mono kicker; a
+Barlow lead line beneath in 75% ink. **Chrome** mono catalogue number top-left, mono meta top-right
+(no chrome bars). **Accent** the ink itself is the pop on orange. **Silence** ~45%. **Fixed** ink-on-fire,
+lowercase 900, flat. **Free** the word, kicker, lead. **Density** low.
+
+### 2 · Statement (declarative · move: type IS composition · DARK register · left)
+
+**Ground** ink-black. **Composes** kicker, display. **Focal** a 2–4 word Barlow `display`/`h1`
+lowercase in cream, with ONE clause inked `{colors.fire-orange}`. **Chrome** mono kicker; no bars.
+**Accent** the orange clause. **Silence** ~55%. **Fixed** lowercase 900, one orange clause, flat.
+**Free** the statement, which clause is orange. **Density** low.
+
+### 3 · Stat Grid (data · move: top-border cards · DARK · the dense frame)
+
+**Ground** ink-black, chrome bars present. **Composes** slide-chrome, kicker, 3× stat-card. **Focal** a
+row of three top-border-only stat-cards — big Barlow-900 numeral in `{colors.fire-orange}`, Barlow
+label, mono note. **Chrome** top + bottom hairline bars (label + number). **Accent** the orange
+numerals. **Silence** moderate — the density exception. **Fixed** top-border-only cards, orange
+numerals, 1px hairlines. **Free** figures (from script), labels. **Density** dense-exception.
+
+### 4 · Fadelist (narrative · move: opacity stack · DARK)
+
+**Ground** ink-black. **Composes** fadelist (3 stacked Barlow-900 words at 1.0/0.5/0.22), fadelist-title.
+**Focal** the three-stage word stack opposite an oversized display title in `{colors.fire-orange}`
+(before/during/after). **Accent** the orange title. **Silence** moderate. **Fixed** the opacity
+ladder, lowercase 900. **Free** the three words, the title. **Density** low-moderate.
+
+### 5 · Pull Quote (quote · move: oversized mark · DARK · left)
+
+**Ground** ink-black, chrome suppressed. **Composes** quote-mark, quote-text, attribution. **Focal** a
+Barlow `quote-text` (700, lowercase) at ≤78cqw under an oversized fire-orange `quote-mark` (10cqw,
+line-height 0.6). **Chrome** mono attribution (name + role). **Accent** the orange quote mark. **Silence**
+~50%. **Fixed** orange mark, lowercase quote. **Free** quote, attribution. **Density** low.
+
+### 6 · Compare (argument · move: split + orange payoff · DARK→ORANGE)
+
+**Ground** ink-black left panel + fire-orange right (payoff) panel, 1px divider. **Composes**
+compare-panel pair, kicker, h3. **Focal** two panels — left documents (cream on dark), right declares
+(ink on orange). **Chrome** mono panel labels. **Accent** the orange payoff panel. **Silence** moderate.
+**Fixed** ink-on-fire right panel, 1px divider, flat. **Free** the before/after content. **Density** standard.
+
+## Composition Rules
+
+### Do
+
+- Set every Barlow display in **lowercase weight 900**, negative-tracked — the system's signature.
+- Use **fire-orange as full environment** on declarative frames, the **lone accent** on dark.
+- Keep chrome in **IBM Plex Mono uppercase, 0.14em**; use the `/` mono bullet marker.
+- **Cap bullets at three; one statement per frame**; build hierarchy from weight, size, 1px hairlines.
+- Suppress chrome bars on cover/chapter/statement/quote/end; let type fill the field.
+- Lean left on most frames; the type IS the composition.
+
+### Don't
+
+- Never uppercase Barlow display; never add a second accent color.
+- Never put cream text on orange (ink-on-fire is absolute); never a cream/paper register.
+- No drop shadow, no rounded surface (save nav dots), no gradient ground.
+- No serif companion; chrome is never Barlow.
+- Don't pack two display moments into one frame; don't blow a long line edge-to-edge — step down.
+
+## Aspect-Ratio Behavior
+
+| Treatment  | 16:9                       | 9:16                       | 1:1              |
+| ---------- | -------------------------- | -------------------------- | ---------------- |
+| Cover      | word left, lead below      | word top, lead below       | centered word    |
+| Statement  | display left               | display stacked taller     | display centered |
+| Stat Grid  | 3 across                   | 3 stacked                  | 2+1              |
+| Fadelist   | stack + title side-by-side | stack over title           | stack over title |
+| Pull Quote | mark + quote left          | mark top, quote below      | centered         |
+| Compare    | side-by-side panels        | stacked (dark over orange) | stacked          |
+
+`pad-x` holds tight on the short edge; re-step display so the one big line stays ≤78cqw and above the
+1.4cqw floor. Mono chrome stays Latin/digit-only.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder (the dashed `img-placeholder` at 55cqh). The system supplies type and one color, not brands.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, percentages, dates, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `NN%`. Stat-card numerals and bar heights carry placeholders until the script supplies
+them. Catalogue numbers (No. 01) are decorative chrome and may be sequential.
+
+## Pre-Render Self-Audit
+
+- **Squint** — exactly one display moment dominates; nothing competes.
+- **Silence** — declarative frames ~45–55% empty; only the stat grid runs dense.
+- **Register** — one register per frame; ink-on-fire on orange, cream on dark; no second hue.
+- **Type** — Barlow lowercase 900 negative-tracked, fit-to-measure; mono chrome uppercase 0.14em; ≥1.4cqw floor.
+- **Depth** — 0 shadow, 0 radius (save nav dots); 1px hairlines only.
+- **Bullets** — capped at three, orange `/` marker.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the source's 0.8s deck slide + per-element entry animations are deck mechanics.
+- **Barlow + IBM Plex Mono via Google Fonts**; Noto Sans SC is the CJK fallback (the lowercase-display signal has no CJK equivalent — the two-register color system carries the identity, per the source).
+- **9:16 / 1:1 are guidance**; verify the one big line stays ≤78cqw and above the floor per ratio.
+- Bars, compare panels, and the dashed image placeholder are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/broadside/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/broadside/caption-skin.html
new file mode 100644
index 0000000..5e90ac4
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/broadside/caption-skin.html
@@ -0,0 +1,224 @@
+<!--
+  Broadside — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a broadside 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 protest-poster lower third — an ink-black plate on a single 1px fire-orange
+  hairline, SHARP corners, NO shadow (broadside's plane is flat, never cast). Massive
+  lowercase Barlow 900 as graphic primitive, cream glyphs on ink. Upcoming words sit in
+  faint cream; the current word flips register — a hard flat fire-orange block with ink
+  reading on top (broadside's signature two-register flip, no blur), the brand's lone
+  accent; spoken words settle to solid cream, the orange block cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 ink-black plate — single 1px fire-orange hairline (broadside's lone accent),
+     SHARP corners (0 radius), NO shadow (the plane is flat) */
+  .caption-pill {
+    max-width: 80%;
+    padding: 18px 44px 22px;
+    background: var(--cap-ink, #111111);
+    border: 1px solid var(--cap-accent, #e85d26);
+    border-radius: 0;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.04em 0.3em;
+    font-family: var(--font-display, "Barlow"), system-ui, sans-serif;
+    font-weight: 900;
+    font-size: clamp(38px, 4.2vw, 56px);
+    line-height: 1.02;
+    letter-spacing: -0.03em;
+    text-transform: lowercase;
+  }
+
+  /* upcoming — faint cream, no block (massive lowercase Barlow 900 as graphic primitive) */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.08em;
+    color: color-mix(in srgb, var(--cap-canvas, #f0ece5) 42%, var(--cap-ink, #111111));
+  }
+  /* current word — THE register flip: a hard flat fire-orange block (box-shadow spread =
+     a sharp rectangle w/o layout shift; no blur), ink reading on top — the lone accent */
+  .caption-word.is-active {
+    color: var(--cap-ink, #111111);
+    background: var(--cap-accent, #e85d26);
+    box-shadow: 0 0 0 0.06em var(--cap-accent, #e85d26);
+  }
+  /* already spoken — solid cream, the orange block cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-canvas, #f0ece5);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — fire-orange ink, the cream-on-ink register's only inflection */
+  .caption-word.cap-brand {
+    color: var(--cap-accent, #e85d26);
+  }
+  /* numerals / data — the IBM Plex Mono chrome voice, uppercase + tracked, recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "IBM Plex Mono"), ui-monospace, monospace;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: color-mix(in srgb, var(--cap-canvas, #f0ece5) 72%, var(--cap-ink, #111111));
+  }
+  /* emphasis — a fire-orange hairline underline (no second hue; the lone accent again) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--cap-accent-2, #e85d26);
+    text-underline-offset: 0.1em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(32px, 5.2vw, 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>
+  // the scene-aware word groups + real duration go 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.92 }, { scale: 1, duration: 0.1, ease: "power3.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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/broadside/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/broadside/frame-showcase.html
new file mode 100644
index 0000000..0d2a6cd
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/broadside/frame-showcase.html
@@ -0,0 +1,1166 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Broadside</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700;800;900&family=IBM+Plex+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --ink: #111111;
+        --ink-alt: #1a1a18;
+        --orange: #e85d26;
+        --cream: #f0ece5;
+        --cream-muted: #888880;
+        --cream-hint: #505048;
+        --border-dark: #282826;
+        --on-orange-muted: rgba(17, 17, 17, 0.75);
+        --on-orange-hint: rgba(17, 17, 17, 0.55);
+        --on-orange-faint: rgba(17, 17, 17, 0.4);
+        --on-orange-border: rgba(17, 17, 17, 0.2);
+        --sans: "Barlow", sans-serif;
+        --mono: "IBM Plex Mono", monospace;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #000;
+      }
+      body {
+        background: var(--ink);
+        color: var(--cream);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .mono {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+      }
+      .disp {
+        font-family: var(--sans);
+        font-weight: 900;
+        letter-spacing: -0.04em;
+        line-height: 0.9;
+      }
+
+      section {
+        padding: 110px 88px;
+        position: relative;
+      }
+      .sec-head {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        border-bottom: 1px solid var(--border-dark);
+        padding-bottom: 18px;
+        margin-bottom: 56px;
+      }
+      .sec-head .k {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 13px;
+        color: var(--orange);
+      }
+      .sec-head h2 {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 52px;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        text-transform: lowercase;
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+      .sec-head .num {
+        font-family: var(--mono);
+        font-size: 13px;
+        color: var(--cream-hint);
+        letter-spacing: 0.1em;
+      }
+
+      /* COVER (orange register) */
+      .cover {
+        min-height: 100vh;
+        background: var(--orange);
+        color: var(--ink);
+        padding: 80px 88px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+      }
+      .cover .topnum {
+        position: absolute;
+        top: 64px;
+        left: 88px;
+        font-family: var(--mono);
+        font-size: 14px;
+        letter-spacing: 0.1em;
+        color: rgba(17, 17, 17, 0.45);
+      }
+      .cover .topmeta {
+        position: absolute;
+        top: 64px;
+        right: 88px;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 13px;
+        color: var(--on-orange-hint);
+      }
+      .cover .rule {
+        width: 48px;
+        height: 3px;
+        background: var(--ink);
+        margin-bottom: 28px;
+      }
+      .cover .kick {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 14px;
+        color: var(--on-orange-hint);
+        margin-bottom: 20px;
+      }
+      .cover h1 {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: clamp(80px, 13vw, 210px);
+        line-height: 0.86;
+        letter-spacing: -0.04em;
+        text-transform: lowercase;
+      }
+      .cover .lead {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: clamp(18px, 1.6vw, 26px);
+        line-height: 1.45;
+        color: var(--on-orange-muted);
+        margin-top: 32px;
+        max-width: 60%;
+      }
+      .cover .foot {
+        position: absolute;
+        bottom: 64px;
+        left: 88px;
+        right: 88px;
+        display: flex;
+        justify-content: space-between;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 13px;
+        color: var(--on-orange-hint);
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0;
+        border: 1px solid var(--border-dark);
+      }
+      .sw {
+        border-right: 1px solid var(--border-dark);
+        border-bottom: 1px solid var(--border-dark);
+        padding: 0;
+      }
+      .sw:nth-child(4n) {
+        border-right: 0;
+      }
+      .sw:nth-child(n + 5) {
+        border-bottom: 0;
+      }
+      .sw .chip {
+        height: 120px;
+        border-bottom: 1px solid var(--border-dark);
+      }
+      .sw .meta {
+        padding: 16px 20px;
+      }
+      .sw .name {
+        font-family: var(--sans);
+        font-weight: 700;
+        font-size: 19px;
+        text-transform: lowercase;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 11px;
+        letter-spacing: 0.06em;
+        color: var(--cream-hint);
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--cream-muted);
+        margin-top: 10px;
+        font-family: var(--sans);
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        align-items: baseline;
+        padding: 24px 0;
+        border-bottom: 1px solid var(--border-dark);
+      }
+      .type-row .tok {
+        font-family: var(--mono);
+        font-size: 12px;
+        letter-spacing: 0.08em;
+        color: var(--orange);
+        text-transform: uppercase;
+      }
+      .type-row .m {
+        font-family: var(--mono);
+        font-size: 11px;
+        color: var(--cream-hint);
+        margin-top: 8px;
+        line-height: 1.6;
+        letter-spacing: 0.04em;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+        color: var(--orange);
+        margin-bottom: 20px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 40px;
+        margin-bottom: 52px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .statcard {
+        border-top: 1px solid var(--border-dark);
+        padding: 20px 20px 20px 0;
+      }
+      .statcard .v {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 64px;
+        line-height: 1;
+        letter-spacing: -0.04em;
+        color: var(--orange);
+      }
+      .statcard .l {
+        font-family: var(--sans);
+        font-size: 16px;
+        color: var(--cream);
+        margin-top: 8px;
+      }
+      .statcard .n {
+        font-family: var(--mono);
+        font-size: 11px;
+        letter-spacing: 0.1em;
+        color: var(--cream-hint);
+        margin-top: 6px;
+        text-transform: uppercase;
+      }
+      .blist {
+        list-style: none;
+      }
+      .blist li {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 22px;
+        color: var(--cream);
+        padding: 10px 0 10px 36px;
+        position: relative;
+      }
+      .blist li::before {
+        content: "/";
+        position: absolute;
+        left: 0;
+        font-family: var(--mono);
+        font-weight: 700;
+        color: var(--orange);
+      }
+      .tag {
+        display: inline-block;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+        color: var(--orange);
+        border: 1px solid var(--orange);
+        padding: 0.3em 0.8em;
+      }
+      .barchart {
+        display: flex;
+        align-items: flex-end;
+        gap: 18px;
+        height: 200px;
+        border-left: 1px solid var(--border-dark);
+        padding-left: 18px;
+      }
+      .barchart .bar {
+        flex: 1;
+        background: var(--cream-hint);
+      }
+      .barchart .bar.accent {
+        background: var(--orange);
+      }
+      .barlabels {
+        display: flex;
+        gap: 18px;
+        padding-left: 18px;
+        margin-top: 10px;
+      }
+      .barlabels span {
+        flex: 1;
+        text-align: center;
+        font-family: var(--mono);
+        font-size: 11px;
+        letter-spacing: 0.08em;
+        color: var(--cream-hint);
+      }
+      .compare {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        border: 1px solid var(--border-dark);
+      }
+      .compare .l {
+        padding: 32px;
+        border-right: 1px solid var(--border-dark);
+      }
+      .compare .r {
+        padding: 32px;
+        background: var(--orange);
+        color: var(--ink);
+      }
+      .compare .ch {
+        font-family: var(--sans);
+        font-weight: 700;
+        font-size: 24px;
+        text-transform: lowercase;
+      }
+      .compare .cl {
+        font-family: var(--mono);
+        font-size: 11px;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        margin-bottom: 14px;
+      }
+      .compare .l .cl {
+        color: var(--orange);
+      }
+      .compare .r .cl {
+        color: var(--on-orange-hint);
+      }
+      .compare .cx {
+        font-size: 14px;
+        line-height: 1.5;
+        margin-top: 10px;
+      }
+      .compare .l .cx {
+        color: var(--cream-muted);
+      }
+      .compare .r .cx {
+        color: var(--on-orange-muted);
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 12px;
+        color: var(--cream-hint);
+      }
+      .fw .flabel b {
+        color: var(--cream);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--ink);
+        border: 1px solid var(--border-dark);
+      }
+      .frame.orange {
+        background: var(--orange);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+      }
+
+      /* f1 cover orange */
+      .bf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5.5cqw;
+        color: var(--ink);
+      }
+      .bf1 .topnum {
+        position: absolute;
+        top: 4cqw;
+        left: 5.5cqw;
+        font-family: var(--mono);
+        font-size: 1cqw;
+        letter-spacing: 0.1em;
+        color: rgba(17, 17, 17, 0.45);
+        z-index: 3;
+      }
+      .bf1 .rule {
+        width: 3.4cqw;
+        height: 0.22cqw;
+        background: var(--ink);
+        margin-bottom: 1.6cqw;
+      }
+      .bf1 .kick {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 1cqw;
+        color: var(--on-orange-hint);
+        margin-bottom: 1.4cqw;
+      }
+      .bf1 h3 {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 13cqw;
+        line-height: 0.84;
+        letter-spacing: -0.04em;
+        text-transform: lowercase;
+      }
+
+      /* f2 statement dark */
+      .bf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5.5cqw;
+      }
+      .bf2 .kick {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 1cqw;
+        color: var(--orange);
+        margin-bottom: 1.6cqw;
+      }
+      .bf2 h3 {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 10cqw;
+        line-height: 0.86;
+        letter-spacing: -0.04em;
+        text-transform: lowercase;
+        color: var(--cream);
+      }
+      .bf2 h3 em {
+        font-style: normal;
+        color: var(--orange);
+      }
+
+      /* f3 stats dark */
+      .bf3 .body {
+        padding: 6cqw 5.5cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .bf3 .top {
+        display: flex;
+        justify-content: space-between;
+        border-bottom: 1px solid var(--border-dark);
+        padding-bottom: 1.2cqw;
+        margin-bottom: 3cqw;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 1cqw;
+        color: var(--cream-hint);
+      }
+      .bf3 .top .k {
+        color: var(--orange);
+      }
+      .bf3 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 3cqw;
+      }
+      .bf3 .sc {
+        border-top: 1px solid var(--border-dark);
+        padding-top: 1.4cqw;
+      }
+      .bf3 .sc .v {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 6cqw;
+        line-height: 1;
+        letter-spacing: -0.04em;
+        color: var(--orange);
+      }
+      .bf3 .sc .l {
+        font-family: var(--sans);
+        font-size: 1.3cqw;
+        color: var(--cream);
+        margin-top: 0.6cqw;
+      }
+      .bf3 .sc .n {
+        font-family: var(--mono);
+        font-size: 0.85cqw;
+        letter-spacing: 0.1em;
+        color: var(--cream-hint);
+        margin-top: 0.5cqw;
+        text-transform: uppercase;
+      }
+      .bf3 .foot {
+        margin-top: auto;
+        display: flex;
+        justify-content: space-between;
+        border-top: 1px solid var(--border-dark);
+        padding-top: 1.2cqw;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 0.9cqw;
+        color: var(--cream-hint);
+      }
+
+      /* f4 fadelist */
+      .bf4 {
+        background: var(--ink);
+      }
+      .bf4 .body {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        align-items: center;
+        padding: 0 5.5cqw;
+        gap: 3cqw;
+      }
+      .bf4 .stack div {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 7cqw;
+        line-height: 1;
+        letter-spacing: -0.03em;
+        text-transform: lowercase;
+        color: var(--cream);
+      }
+      .bf4 .stack div:nth-child(2) {
+        opacity: 0.5;
+      }
+      .bf4 .stack div:nth-child(3) {
+        opacity: 0.22;
+      }
+      .bf4 .title {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 9cqw;
+        line-height: 0.9;
+        letter-spacing: -0.04em;
+        text-transform: lowercase;
+        color: var(--orange);
+        text-align: right;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0;
+        border: 1px solid var(--border-dark);
+      }
+      .do-card {
+        padding: 40px;
+      }
+      .do-card.do {
+        border-right: 1px solid var(--border-dark);
+      }
+      .do-card h4 {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 34px;
+        text-transform: lowercase;
+        margin-bottom: 24px;
+      }
+      .do-card.do h4 {
+        color: var(--orange);
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--sans);
+        font-size: 15px;
+        line-height: 1.55;
+        padding-left: 28px;
+        position: relative;
+        margin-bottom: 14px;
+        color: var(--cream-muted);
+      }
+      .do-card li::before {
+        content: "/";
+        position: absolute;
+        left: 0;
+        font-family: var(--mono);
+        font-weight: 700;
+        color: var(--orange);
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--cream-hint);
+      }
+
+      .foot {
+        padding: 56px 88px;
+        border-top: 1px solid var(--border-dark);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 30px;
+        text-transform: lowercase;
+      }
+      .foot .r {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 11px;
+        color: var(--cream-hint);
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #f0ece5 !important;
+        --secondary: #111111 !important;
+        --tertiary: #282826 !important;
+        --accent: #e85d26 !important;
+        --f-disp: "Barlow", sans-serif !important;
+        --f-body: "IBM Plex Mono", sans-serif !important;
+        --ink: #111111 !important;
+        --orange: #e85d26 !important;
+        --cream: #f0ece5 !important;
+        --border-dark: #282826 !important;
+        --sans: "Barlow", sans-serif !important;
+        --mono: "IBM Plex Mono", sans-serif !important;
+        --ink-alt: #1a1a18 !important;
+        --cream-muted: #888880 !important;
+        --cream-hint: #505048 !important;
+        --on-orange-muted: rgba(17, 17, 17, 0.75) !important;
+        --on-orange-hint: rgba(17, 17, 17, 0.55) !important;
+        --on-orange-faint: rgba(17, 17, 17, 0.4) !important;
+        --on-orange-border: rgba(17, 17, 17, 0.2) !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="topnum">No. 01 / 06</div>
+      <div class="topmeta">Broadside — Frame System</div>
+      <div class="rule"></div>
+      <div class="kick">Protest-Poster Editorial</div>
+      <h1>ink on fire.</h1>
+      <div class="lead">
+        Massive Barlow type as graphic primitive, one fire-orange environment, and a flat plane
+        built from negative space — dark to document, orange to declare.
+      </div>
+      <div class="foot"><span>Barlow 900 · IBM Plex Mono</span><span>1920 × 1080</span></div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="k">01</span>
+        <h2>palette</h2>
+        <span class="sp"></span><span class="num">TWO REGISTERS</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="meta">
+            <div class="name">ink black</div>
+            <div class="hex">#111111</div>
+            <div class="role">Dark canvas + ink on orange.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--orange)"></div>
+          <div class="meta">
+            <div class="name">fire orange</div>
+            <div class="hex">#E85D26</div>
+            <div class="role">The accent and the environment.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream)"></div>
+          <div class="meta">
+            <div class="name">cream</div>
+            <div class="hex">#F0ECE5</div>
+            <div class="role">Text on dark — never pure white.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream-muted)"></div>
+          <div class="meta">
+            <div class="name">cream muted</div>
+            <div class="hex">#888880</div>
+            <div class="role">Secondary text on dark.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream-hint)"></div>
+          <div class="meta">
+            <div class="name">cream hint</div>
+            <div class="hex">#505048</div>
+            <div class="role">Tertiary / axis labels.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink-alt)"></div>
+          <div class="meta">
+            <div class="name">ink alt</div>
+            <div class="hex">#1A1A18</div>
+            <div class="role">Slightly raised dark surface.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--border-dark)"></div>
+          <div class="meta">
+            <div class="name">border dark</div>
+            <div class="hex">#282826</div>
+            <div class="role">The 1px hairline on dark.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--orange); opacity: 0.2"></div>
+          <div class="meta">
+            <div class="name">ink-on-orange</div>
+            <div class="hex">17,17,17 · .75–.20</div>
+            <div class="role">Muted ink tones on orange.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="k">02</span>
+        <h2>typography</h2>
+        <span class="sp"></span><span class="num">BARLOW · PLEX MONO</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">Barlow 900 · 13vw · lowercase · −.04em</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 104px">shout.</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">h2</div>
+          <div class="m">Barlow 700 · primary headline</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-weight: 700; font-size: 58px; letter-spacing: -0.02em"
+            >type as graphic primitive</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">stat-value</div>
+          <div class="m">Barlow 900 · orange on dark</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-size: 80px; color: var(--orange)">94%</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Barlow 400 · cream · line 1.6</div>
+        </div>
+        <div class="spec">
+          <p style="font-size: 18px; line-height: 1.6; max-width: 660px; color: var(--cream)">
+            Barlow carries every text role — the expressive range comes from weight and size, not a
+            second face.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">IBM Plex Mono 500 · uppercase · 0.14em</div>
+        </div>
+        <div class="spec">
+          <span class="mono" style="font-size: 14px; color: var(--orange)"
+            >Kicker / Catalogue Mark</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="k">03</span>
+        <h2>components</h2>
+        <span class="sp"></span><span class="num">FLAT · ONE ACCENT</span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s5">
+          <div class="cnote">Stat cards — top border only</div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px">
+            <div class="statcard">
+              <div class="v">187px</div>
+              <div class="l">Display at 13vw</div>
+              <div class="n">Graphic primitive</div>
+            </div>
+            <div class="statcard">
+              <div class="v">2</div>
+              <div class="l">Color registers</div>
+              <div class="n">Dark / orange</div>
+            </div>
+          </div>
+          <div class="cnote" style="margin-top: 36px">Bullet list — capped at three</div>
+          <ul class="blist">
+            <li>one statement per slide</li>
+            <li>one accent color</li>
+            <li>breathing room</li>
+          </ul>
+        </div>
+        <div class="s3">
+          <div class="cnote">Vertical bars — one accent</div>
+          <div class="barchart">
+            <div class="bar" style="height: 52%"></div>
+            <div class="bar" style="height: 70%"></div>
+            <div class="bar accent" style="height: 100%"></div>
+            <div class="bar" style="height: 44%"></div>
+          </div>
+          <div class="barlabels"><span>q1</span><span>q2</span><span>q3</span><span>q4</span></div>
+          <div class="cnote" style="margin-top: 32px">Mono tag</div>
+          <span class="tag">Section / 03</span>
+        </div>
+        <div class="s4">
+          <div class="cnote">Compare panels — orange payoff</div>
+          <div class="compare">
+            <div class="l">
+              <div class="cl">Before</div>
+              <div class="ch">document</div>
+              <div class="cx">Dark register carries the evidence.</div>
+            </div>
+            <div class="r">
+              <div class="cl">After</div>
+              <div class="ch">declare</div>
+              <div class="cx">Orange register makes the call.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="k">04</span>
+        <h2>frame compositions</h2>
+        <span class="sp"></span><span class="num">TRUE 16:9 · CQW</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · orange register · left</span></div>
+          <div class="frame orange bf1">
+            <div class="topnum">No. 01 / 06</div>
+            <div class="body">
+              <div class="rule"></div>
+              <div class="kick">Protest-Poster Editorial</div>
+              <h3>ink on fire.</h3>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Statement</b><span>· declarative · dark register · left</span>
+          </div>
+          <div class="frame bf2">
+            <div class="body">
+              <div class="kick">The Thesis</div>
+              <h3>type is the <em>composition.</em></h3>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Stat Grid</b><span>· data · dark · the dense frame</span></div>
+          <div class="frame bf3">
+            <div class="body">
+              <div class="top"><span class="k">By The Numbers</span><span>FIG.03</span></div>
+              <div class="row">
+                <div class="sc">
+                  <div class="v">13vw</div>
+                  <div class="l">Display scale</div>
+                  <div class="n">≈187px @1440</div>
+                </div>
+                <div class="sc">
+                  <div class="v">3</div>
+                  <div class="l">Bullets max</div>
+                  <div class="n">Impact over info</div>
+                </div>
+                <div class="sc">
+                  <div class="v">1</div>
+                  <div class="l">Accent color</div>
+                  <div class="n">Fire orange only</div>
+                </div>
+              </div>
+              <div class="foot"><span>Broadside</span><span>03 / 06</span></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Fadelist</b><span>· narrative · before/during/after</span></div>
+          <div class="frame bf4">
+            <div class="body">
+              <div class="stack">
+                <div>past.</div>
+                <div>present.</div>
+                <div>future.</div>
+              </div>
+              <div class="title">the<br />arc.</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="k">05</span>
+        <h2>frame rules</h2>
+        <span class="sp"></span><span class="num">INK ON FIRE</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>do</h4>
+          <ul>
+            <li>Set every Barlow display in lowercase weight 900, negative-tracked.</li>
+            <li>
+              Make orange the full environment on declarative frames, the lone accent on dark.
+            </li>
+            <li>Keep chrome in IBM Plex Mono uppercase, 0.14em tracked.</li>
+            <li>Cap bullet lists at three; one statement per frame.</li>
+            <li>Build hierarchy from weight, size, and 1px hairlines only.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>don't</h4>
+          <ul>
+            <li>Never uppercase Barlow display — lowercase is the identity.</li>
+            <li>No second accent color; no cream text on orange (ink on fire).</li>
+            <li>No drop shadows, rounded surfaces, or gradient grounds.</li>
+            <li>No serif companion; chrome is never set in Barlow.</li>
+            <li>Don't pack two display moments into one frame.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--cream);
+        --cap-accent: var(--orange);
+        --cap-accent-2: var(--orange);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 82cqw;
+        padding: 1.2cqw 3cqw 1.5cqw;
+        background: var(--cap-ink);
+        border: 1px solid var(--cap-accent);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.04em 0.3em;
+        font-family: var(--sans);
+        font-weight: 900;
+        font-size: 3.2cqw;
+        line-height: 1.02;
+        letter-spacing: -0.03em;
+        text-transform: lowercase;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.08em;
+        color: color-mix(in srgb, var(--cap-canvas) 42%, var(--cap-ink));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-canvas);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.06em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed var(--border-dark);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        text-transform: uppercase;
+        font-size: 0.9cqw;
+        letter-spacing: 0.1em;
+        color: var(--cream-hint);
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="k">06</span>
+        <h2>captions</h2>
+        <span class="sp"></span><span class="num">LOWER-THIRD · KARAOKE</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Settled line</b><span>· all spoken · orange block cleared</span>
+          </div>
+          <div class="frame capdemo">
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">broadside</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#E85D26" />
+        <rect x="14" y="40" width="26" height="4" fill="#111111" />
+        <text x="14" y="68" font-family="Arial" font-weight="900" font-size="22" fill="#111111">
+          ink.
+        </text>
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/capsule/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/capsule/FRAME.md
new file mode 100644
index 0000000..a37f828
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/capsule/FRAME.md
@@ -0,0 +1,284 @@
+---
+version: alpha
+name: Capsule — Frame (video / frame layer)
+description: >
+  Video-first companion to Capsule's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — the pill geometry (9999px small / 2rem cards) with a 2px ink outline on
+  everything, the sun-bleached cream canvas, the nine-color candy palette, Bodoni Moda + Space
+  Grotesk, soft hard-offset shadows (4/6/8/12px in 8% ink), floating decorative-pill wallpaper,
+  radial accent glows, and the grain overlay. 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:
+  cream: "#F5F5F0"
+  ink: "#1A1A1A"
+  outline: "#1E1E1E"
+  white: "#FFFFFF"
+  coral: "#E85D4E"
+  lime: "#C4D94E"
+  lavender: "#C5B5E0"
+  sky: "#8BB4F7"
+  violet: "#A06CE8"
+  yellow: "#F2D160"
+  peach: "#F5B895"
+  mint: "#A8E6CF"
+  shadow: "rgba(26,26,26,0.08)"
+
+typography:
+  # — reading ramp (Space Grotesk) —
+  body:      { fontFamily: "Space Grotesk", cqw: 0.85, weight: 400, lineHeight: 1.6 }
+  subtitle:  { fontFamily: "Space Grotesk", cqw: 0.95, weight: 400, tracking: "0.18em", upper: true }
+  pill-text: { fontFamily: "Space Grotesk", cqw: 0.75, weight: 600, tracking: "0.12em", upper: true }
+  label:     { fontFamily: "Space Grotesk", px: 14, weight: 500, tracking: "0.1em", upper: true }
+  # — display / hero ramp (Bodoni Moda, ink, sentence case) —
+  card-headline:{ fontFamily: "Bodoni Moda", cqw: 1.9, weight: 700, lineHeight: 1.1 }
+  orbit-numeral:{ fontFamily: "Bodoni Moda", cqw: 2.6, weight: 700, lineHeight: 1.0 }
+  quote-display:{ fontFamily: "Bodoni Moda", cqw: 4.2, weight: 600, lineHeight: 1.3, tracking: "-0.01em" }
+  stat-number: { fontFamily: "Bodoni Moda", cqw: 3.6, weight: 800, lineHeight: 1.0, tracking: "-0.03em" }
+  section-headline:{ fontFamily: "Bodoni Moda", cqw: 4.0, weight: 700, lineHeight: 1.05, tracking: "-0.01em" }
+  headline:    { fontFamily: "Bodoni Moda", cqw: 5.0, weight: 700, lineHeight: 1.05, tracking: "-0.02em" }
+  closing-display:{ fontFamily: "Bodoni Moda", cqw: 8.5, weight: 800, lineHeight: 0.95, tracking: "-0.03em" }
+  display:     { fontFamily: "Bodoni Moda", cqw: 12.0, weight: 800, lineHeight: 0.88, tracking: "-0.03em" }
+
+spacing:
+  pad: "5cqw"
+  gap-md: "2cqw"
+  card-pad: "2cqw 1.6cqw"
+
+components:
+  pill:
+    rounded: "9999px (small) / 2rem (cards)"
+    border: "0.2cqw solid {colors.outline}"
+    backgroundColor: "any candy or {colors.white}"
+    description: "The universal container — every chip/button/label/stat tile/node/bar. No unstroked pill exists."
+  pill-card:
+    backgroundColor: "{colors.white}"
+    border: "0.2cqw solid {colors.outline}"
+    rounded: "2rem"
+    shadow: "0.4cqw 0.4cqw 0 {colors.shadow}"
+    typography: "{typography.card-headline} + {typography.body}"
+    description: "Holds a circular card-icon, Bodoni headline, Space Grotesk body."
+  stat-pill:
+    backgroundColor: "{colors.white}"
+    border: "0.2cqw solid {colors.outline}"
+    rounded: "2rem"
+    shadow: "0.3cqw 0.3cqw 0 {colors.shadow}"
+    typography: "{typography.stat-number} (COLORED) + {typography.pill-text}"
+    description: "The one place color touches a numeral; + a 40px accent bar."
+  title-pill:
+    backgroundColor: "{colors.yellow}"
+    border: "0.2cqw solid {colors.outline}"
+    rounded: "9999px"
+    shadow: "0.3cqw 0.3cqw 0 {colors.shadow}"
+    typography: "{typography.pill-text}"
+    description: "Sits above the display headline on cover/closing."
+  card-icon:
+    backgroundColor: "any candy"
+    border: "0.2cqw solid {colors.outline}"
+    rounded: "50%"
+    size: "60px"
+    typography: "Bodoni numeral/letter in {colors.ink}"
+    description: "Card mark."
+  floating-pill:
+    backgroundColor: "any candy"
+    border: "0.2cqw solid {colors.outline}"
+    rounded: "9999px / 50%"
+    transform: "rotate(−20°..+25°)"
+    shadow: "none"
+    typography: "{typography.pill-text}"
+    description: "Decorative wallpaper confetti, 5–8 per declarative frame. Flat — no shadow."
+  quote-highlight:
+    backgroundColor: "{colors.lime} / {colors.sky}"
+    border: "0.2cqw solid {colors.outline}"
+    rounded: "9999px"
+    description: "Inline candy pill wrapping a phrase inside a Bodoni quote — the emphasis mechanism, replacing bold/italic."
+  bar-track:
+    backgroundColor: "{colors.cream}"
+    border: "0.2cqw solid {colors.outline}"
+    rounded: "9999px"
+    fill: "child candy pill, value at right edge"
+    description: "36px pill chart track."
+  accent-line:
+    backgroundColor: "{colors.coral}"
+    rounded: "9999px"
+    size: "60×4 (80×4 closing)"
+    description: "Coral pill rule."
+  atmosphere:
+    background: "1–3 radial candy glows (6–15% opacity) over {colors.cream} + 4% grain overlay"
+    description: "Baseline canvas layers on every frame. Never absent."
+---
+
+# Capsule — Frame (video / frame layer)
+
+## Overview
+
+Capsule at frame scale is a **playful editorial system where every container is a pill.** The
+`border-radius: 9999px` (small) / `2rem` (cards) rule plus a 2px ink outline wraps every chip,
+card, icon, bar, and node — inflated, friendly, graphically distinct. The canvas is sun-bleached
+cream warmed by soft radial candy glows and a permanent 4% grain overlay.
+
+The voice is a two-face conversation: **Bodoni Moda** (didone serif, weight 700–800, always ink,
+always sentence case) carries every headline, stat, and quote; **Space Grotesk** carries body and
+all uppercase tracked pill/label text. Nine candy accents fill pills interchangeably with no
+semantic meaning. Depth is a **soft hard-offset shadow** (4/6/8/12px in 8% ink) — lifted, not
+stamped — reserved for content-bearing containers; decorative floating pills are flat.
+
+**Key characteristics at frame scale:**
+
+- **Pill geometry everywhere** — 9999px small, 2rem cards — each wrapped in a 2px `{colors.outline}` stroke.
+- **Bodoni Moda** display (ink, sentence case) + **Space Grotesk** body/pills (uppercase, tracked).
+- **Nine candy accents**, interchangeable; color touches stat numerals + pill fills, never headlines.
+- **Soft offset shadows** (4/6/8/12px, 8% ink) on content containers only; floating pills are flat.
+- **Floating decorative-pill wallpaper** (5–8, tilted) + radial glows + 4% grain on declarative frames.
+- **Cream canvas** warmed by atmosphere — bare corners read as broken.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one Bodoni headline or stat dominates at **3–6× its nearest neighbor**.
+- **Silence** — declarative frames carry **atmosphere, not clutter** (pills as wallpaper, not content); the **pillar-cards and stat grid are the dense exception**.
+- **Restraint** — every pill carries the 2px outline; color touches **fills + stat numerals only** (never a headline); soft shadow on content-bearing pills only (floating pills are flat); no tenth accent.
+- **Reference** — aim at a **Memphis / ice-cream-parlor editorial spread**; failure looks like a **flat, sticker-less SaaS card grid**.
+
+- **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:** `pad` (5cqw); floating pills may bleed off edges as wallpaper.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size` AND carries
+the radial-glow + grain atmosphere; ALL frame-relative units are `cqw`/`cqh` against it — never
+`vw`. Pill radii stay `9999px`/`2rem` (shape, not scale); shadow offsets scale in `cqw`.
+
+## Colors
+
+Tokens identical to the source. `{colors.cream}` is the ground; `{colors.ink}`/`{colors.outline}`
+is type + the universal 2px stroke; the nine candy accents fill pills with **no semantic mapping**
+— pair a warm (coral/yellow/peach) with a cool (sky/lavender/violet/mint) with a neutral-bright
+(lime); never two same-family adjacent. Color appears on **stat numerals and pill fills only** —
+never on a Bodoni headline. Shadow is always `{colors.shadow}` (8% ink). No tenth color.
+
+## Typography
+
+Two ramps. The **reading ramp** (Space Grotesk body 0.85cqw, uppercase tracked pill/label text)
+carries copy + chips; the **display ramp** (Bodoni `card-headline` 1.9cqw → `display` 12cqw, all
+700–800) carries every headline, stat, and quote.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; px labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display`/`closing-display`; 4–6 → `headline`; 7+ → `section-headline`.
+- **Bodoni 700+ in ink, sentence case** (italic via `<em>` only, color allowed on the italic key word as a candy hue); **Space Grotesk pills/labels uppercase, 0.08em+ tracked**; negative-track Bodoni display.
+
+## Depth & Surface
+
+Soft hard-offset shadow is the only depth, in `{colors.shadow}` (8% ink), bottom-right:
+
+- **0.2cqw (4px)** small nodes; **0.3cqw (6px)** stat-pills, orbit pills, diagram nodes; **0.4cqw (8px)** pillar-cards; **0.6cqw (12px)** the visual frame.
+- The **2px outline** does most of the lift against cream; the shadow adds the float.
+- **Decorative floating pills cast no shadow** — this separates content from atmosphere at a glance.
+
+**Ceiling:** no blurred shadow, no re-colored shadow, no gradient depth.
+
+## Shapes
+
+- **9999px** — all small pills (chips, buttons, bars, nodes, floating pills, quote highlights, accent lines).
+- **2rem** — larger cards (pillar-card, stat-pill, chart container, visual frame).
+- **50%** — circular pills (card-icon 60px, step-node 56px, orbit-center 160px, nav dots).
+- **0** — only the grain overlay and the gradient region inside a visual frame. No sharp-cornered text container exists.
+
+## Components
+
+- **pill** — the universal 2px-outlined container. **pill-card / stat-pill / title-pill** — the white/yellow content pills with soft shadows.
+- **card-icon** — circular candy mark; **floating-pill** — flat tilted wallpaper confetti; **quote-highlight** — inline candy emphasis pill.
+- **bar-track** — pill-shaped chart bar; **accent-line** — coral pill rule; **atmosphere** — the baseline glow + grain on every frame.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> Atmosphere (glow + grain) on every frame; declarative frames carry floating-pill wallpaper.
+
+### 1 · Cover (identity · move: title pill + display · centered)
+
+**Ground** cream + atmosphere, floating-pill wallpaper. **Composes** title-pill, display, accent-line, floating-pills (5–8). **Focal** a 1–2 line Bodoni `display` headline in ink (italic key word in a candy hue), centered, under a yellow title-pill; a coral accent-line below. **Chrome** uppercase Space Grotesk sub. **Accent** the italic word + candy floating pills. **Silence** content centered; pills fill the edges. **Fixed** pill outlines, Bodoni ink, flat floating pills. **Free** title, which candy hues, pill words/positions. **Density** medium-atmospheric.
+
+### 2 · Pillar Cards (catalog · move: 3-up grid · left — the dense frame)
+
+**Ground** cream + atmosphere. **Composes** title-pill (lavender), section-headline, 3× pill-card. **Focal** three white 2rem pill-cards (circular candy card-icon, Bodoni card-headline, Space Grotesk body) with 0.4cqw shadows, under a Bodoni section-headline. **Chrome** a lavender header tag-pill. **Accent** the three card-icon fills (coral/sky/lime sequence). **Silence** tight — the density exception (no floating pills here). **Fixed** 2px outlines, soft shadows, ink headlines. **Free** card content, icon hues. **Density** dense-exception.
+
+### 3 · Stat Grid (data · move: stat pills · centered head)
+
+**Ground** cream + atmosphere. **Composes** section-headline, 3–4× stat-pill. **Focal** a row of white stat-pills, each a COLORED Bodoni stat-number + uppercase label + accent bar. **Accent** the colored numerals + bars (the one place color meets type). **Silence** moderate. **Fixed** 2rem pills, colored numerals only, soft shadow. **Free** figures (from script), hues. **Density** standard.
+
+### 4 · Pull Quote (quote · move: highlight pill · left)
+
+**Ground** cream + atmosphere, a few floating pills. **Composes** quote-display, quote-highlight, accent-line. **Focal** a Bodoni quote in ink with one phrase wrapped in a lime/sky `quote-highlight` pill (the emphasis mechanism — never bold). **Chrome** uppercase attribution. **Accent** the highlight pill. **Silence** ~50%. **Fixed** Bodoni 600, highlight-pill emphasis. **Free** quote, highlight color/phrase. **Density** sparse.
+
+### 5 · Orbit (concept · move: gravitational pills · centered)
+
+**Ground** cream + atmosphere. **Composes** orbit-center (160px lime circle, Bodoni ordinal), 4–6 orbit-pill satellites (candy, tilted, soft shadow). **Focal** the lime center anchored by orbiting candy pills. **Accent** the satellite hues. **Silence** moderate. **Fixed** circular center, outlined satellites with shadow. **Free** ordinal, satellite words/positions. **Density** medium.
+
+### 6 · Closing Plate (closer · move: title pill + display · centered)
+
+**Ground** cream + atmosphere, floating-pill wallpaper. **Composes** title-pill (yellow), closing-display, accent-line, floating-pills. **Focal** a Bodoni `closing-display` sign-off in ink (italic word in violet/candy), centered. **Accent** the italic word + pills. **Silence** content centered. **Fixed** Bodoni ink, flat pills. **Free** sign-off, pill words. **Density** medium-atmospheric.
+
+## Composition Rules
+
+### Do
+
+- Make every text container a **pill** (9999px / 2rem) with the **2px ink outline**.
+- Set **Bodoni headlines in ink, sentence case**; color lives on stat numerals + pill fills.
+- Use **soft offset shadows** (4/6/8/12px, 8% ink) on content containers; keep floating pills flat.
+- Float **5–8 candy pills** + radial glows + grain on declarative frames; bare corners read as broken.
+- Wrap inline emphasis in a **candy quote-highlight pill**, never bold/italic-alone.
+- Pair warm+cool+neutral-bright accents; lean centered on cover/closer, left on cards/quote.
+
+### Don't
+
+- No sharp-cornered text container; no unstroked pill.
+- No colored Bodoni headline; no uppercase Bodoni.
+- No blurred or re-colored shadow; no tenth accent color.
+- No shadow on decorative floating pills.
+- Don't blow a headline edge-to-edge — fit to measure.
+
+## Aspect-Ratio Behavior
+
+| Treatment    | 16:9                           | 9:16                        | 1:1                   |
+| ------------ | ------------------------------ | --------------------------- | --------------------- |
+| Cover        | display centered, pills around | display top, pills band     | centered, fewer pills |
+| Pillar Cards | head + 3-up                    | head + 3 stacked            | head + 2+1            |
+| Stat Grid    | 3–4 across                     | 2×2                         | 2×2                   |
+| Pull Quote   | quote left                     | quote top, highlight inline | centered              |
+| Orbit        | center + 4–6 satellites        | center + 3 satellites       | center + 4            |
+| Closing      | centered + pills               | centered, pills band        | centered              |
+
+`pad` holds on the short edge; re-step display above the 1.4cqw floor. Floating-pill count drops
+on tighter ratios so they stay wallpaper, not clutter.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Floating-pill words are neutral atmospheres ("VISION", "FUTURE", "NEXT"), never content-specific.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, stats, or counts at frame scale. Render slots as `— figure —`, `{metric}`,
+`N%`. Stat-pill numbers and bar-track widths carry placeholders until the script supplies values.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one Bodoni element dominates at 3–5× its neighbor.
+- **Silence** — declarative frames carry atmosphere not clutter; only pillar/stat grids run dense.
+- **Pills** — every container is a pill with a 2px outline; no sharp text container.
+- **Color** — candy on fills + stat numerals only; headlines ink; no tenth hue.
+- **Depth** — soft offset shadow on content only; floating pills flat; no blur.
+- **Type** — Bodoni ink sentence-case, fit-to-measure; pills uppercase tracked; ≥1.4cqw floor.
+- **Anchor** — centered on cover/closer/orbit, left on cards/quote; no 3 consecutive alike.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the 0.6s fade in the source is a deck mechanic.
+- **Bodoni Moda + Space Grotesk via Google Fonts.** CJK pairing (ZCOOL XiaoWei / Yozai) carries over from the source.
+- **9:16 / 1:1 are guidance**; verify the floor and that floating-pill count scales down.
+- The grain overlay, radial glows, floating pills, and bar fills are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/capsule/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/capsule/caption-skin.html
new file mode 100644
index 0000000..d15690d
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/capsule/caption-skin.html
@@ -0,0 +1,223 @@
+<!--
+  Capsule — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a capsule 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 cream caption pill — fully-rounded (9999px), wrapped in capsule's universal
+  2px ink outline, lifted on a soft hard-offset shadow (no blur), Bodoni Moda glyphs in
+  ink, sentence case. Upcoming words sit in faint ink; the current word lights up as a
+  rounded candy highlight — a candy fill plus a box-shadow spread halo that follows the
+  pill radius (a soft candy capsule around the word, no blur, NO layout shift) with ink
+  reading on top; spoken words settle to solid ink, the candy highlight cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 caption capsule — cream pill, fully-rounded (9999px), capsule's universal 2px
+     ink outline, lifted on a soft hard-offset shadow (no blur, 8% ink) */
+  .caption-pill {
+    max-width: 80%;
+    padding: 18px 46px 20px;
+    background: var(--cap-canvas, #f5f5f0);
+    border: 2px solid var(--cap-ink, #1a1a1a);
+    border-radius: 9999px;
+    box-shadow: 8px 8px 0 color-mix(in srgb, var(--cap-ink, #1a1a1a) 8%, transparent);
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.12em 0.36em;
+    font-family: var(--font-display, "Bodoni Moda"), Georgia, serif;
+    font-weight: 700;
+    font-size: clamp(38px, 4.2vw, 56px);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+  }
+
+  /* upcoming — faint ink, no highlight */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.1em;
+    border-radius: 9999px;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 42%, var(--cap-canvas, #f5f5f0));
+  }
+  /* current word — THE rounded candy highlight: a candy fill + a box-shadow spread
+     halo that follows the pill radius (a soft candy capsule around the word, no blur,
+     no layout shift), ink reading on top */
+  .caption-word.is-active {
+    color: var(--cap-ink, #1a1a1a);
+    background: var(--cap-accent, #e85d4e);
+    box-shadow: 0 0 0 0.14em var(--cap-accent, #e85d4e);
+  }
+  /* already spoken — solid ink, candy highlight cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #1a1a1a);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — Bodoni Moda italic, capsule's display inflection */
+  .caption-word.cap-brand {
+    font-style: italic;
+  }
+  /* numerals / data — the Space Grotesk voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Space Grotesk"), ui-sans-serif, sans-serif;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 72%, var(--cap-canvas, #f5f5f0));
+  }
+  /* emphasis — a second-candy rounded underline (the counter-accent) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-decoration-color: var(--cap-accent-2, #f2d160);
+    text-underline-offset: 0.12em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.92 }, { scale: 1, duration: 0.18, ease: "back.out(2)" }, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/capsule/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/capsule/frame-showcase.html
new file mode 100644
index 0000000..65b4e19
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/capsule/frame-showcase.html
@@ -0,0 +1,1465 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Capsule</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --cream: #f5f5f0;
+        --ink: #1a1a1a;
+        --outline: #1e1e1e;
+        --white: #ffffff;
+        --coral: #e85d4e;
+        --lime: #c4d94e;
+        --lavender: #c5b5e0;
+        --sky: #8bb4f7;
+        --violet: #a06ce8;
+        --yellow: #f2d160;
+        --peach: #f5b895;
+        --mint: #a8e6cf;
+        --shadow: rgba(26, 26, 26, 0.08);
+        --serif: "Bodoni Moda", serif;
+        --sans: "Space Grotesk", sans-serif;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0e0e0c;
+      }
+      body {
+        background: var(--cream);
+        background-image:
+          radial-gradient(ellipse at 12% 8%, rgba(229, 93, 78, 0.1), transparent 45%),
+          radial-gradient(ellipse at 88% 22%, rgba(139, 180, 247, 0.12), transparent 42%),
+          radial-gradient(ellipse at 70% 95%, rgba(196, 217, 78, 0.1), transparent 45%);
+        color: var(--ink);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        color: var(--ink);
+      }
+      .eyebrow {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 12px;
+      }
+      .pill {
+        border-radius: 9999px;
+        border: 2px solid var(--outline);
+        font-family: var(--sans);
+        font-weight: 600;
+        white-space: nowrap;
+        display: inline-flex;
+        align-items: center;
+      }
+
+      section {
+        padding: 120px 100px;
+        position: relative;
+      }
+      .sec-head {
+        display: flex;
+        align-items: center;
+        gap: 20px;
+        margin-bottom: 64px;
+      }
+      .sec-head .tagpill {
+        background: var(--lavender);
+        padding: 0.5rem 1.4rem;
+        font-size: 13px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-weight: 600;
+      }
+      .sec-head h2 {
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 52px;
+        line-height: 1;
+        letter-spacing: -0.02em;
+      }
+      .sec-head .sp {
+        flex: 1;
+        height: 2px;
+        background: var(--outline);
+        border-radius: 9999px;
+        opacity: 0.15;
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .titlepill {
+        background: var(--yellow);
+        border: 2px solid var(--outline);
+        border-radius: 9999px;
+        padding: 1rem 2.6rem;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 15px;
+        box-shadow: 6px 6px 0 var(--shadow);
+        margin-bottom: 40px;
+        position: relative;
+        z-index: 3;
+        white-space: nowrap;
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 800;
+        font-size: clamp(72px, 13vw, 200px);
+        line-height: 0.88;
+        letter-spacing: -0.03em;
+        position: relative;
+        z-index: 3;
+      }
+      .cover h1 em {
+        font-style: italic;
+        color: var(--coral);
+      }
+      .cover .sub {
+        font-family: var(--sans);
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        font-size: 15px;
+        color: rgba(26, 26, 26, 0.6);
+        margin-top: 32px;
+        position: relative;
+        z-index: 3;
+      }
+      .cover .accent-line {
+        width: 80px;
+        height: 4px;
+        background: var(--coral);
+        border-radius: 9999px;
+        margin: 36px auto 0;
+        position: relative;
+        z-index: 3;
+      }
+      /* floating pills */
+      .fp {
+        position: absolute;
+        border: 2px solid var(--outline);
+        border-radius: 9999px;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 13px;
+        padding: 0.5rem 1.2rem;
+        z-index: 1;
+      }
+      .fp.circ {
+        border-radius: 50%;
+        width: 84px;
+        height: 84px;
+        display: grid;
+        place-items: center;
+        padding: 0;
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 24px;
+      }
+      .sw {
+        background: var(--white);
+        border: 2px solid var(--outline);
+        border-radius: 1.5rem;
+        overflow: hidden;
+        box-shadow: 6px 6px 0 var(--shadow);
+      }
+      .sw .chip {
+        height: 96px;
+        margin: 0;
+      }
+      .sw .meta {
+        padding: 16px 20px;
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 20px;
+      }
+      .sw .hex {
+        font-family: var(--sans);
+        font-size: 12px;
+        letter-spacing: 0.04em;
+        color: rgba(26, 26, 26, 0.55);
+        margin-top: 4px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+        align-items: center;
+        padding: 24px 0;
+        border-bottom: 2px solid rgba(30, 30, 30, 0.1);
+      }
+      .type-row .tok {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 12px;
+      }
+      .type-row .m {
+        font-size: 12px;
+        color: rgba(26, 26, 26, 0.55);
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 12px;
+        color: rgba(26, 26, 26, 0.55);
+        margin-bottom: 22px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 32px;
+        margin-bottom: 56px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .p-card {
+        background: var(--white);
+        border: 2px solid var(--outline);
+        border-radius: 2rem;
+        padding: 2.2rem 1.8rem;
+        box-shadow: 8px 8px 0 var(--shadow);
+        height: 100%;
+      }
+      .p-card .ic {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: 2px solid var(--outline);
+        display: grid;
+        place-items: center;
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 24px;
+        margin-bottom: 22px;
+      }
+      .p-card .t {
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 24px;
+        line-height: 1.1;
+      }
+      .p-card .x {
+        font-size: 14px;
+        line-height: 1.6;
+        color: rgba(26, 26, 26, 0.65);
+        margin-top: 12px;
+      }
+      .stat-pill {
+        background: var(--white);
+        border: 2px solid var(--outline);
+        border-radius: 2rem;
+        padding: 2rem 1.5rem;
+        box-shadow: 6px 6px 0 var(--shadow);
+        text-align: left;
+      }
+      .stat-pill .n {
+        font-family: var(--serif);
+        font-weight: 800;
+        font-size: 48px;
+        line-height: 1;
+        letter-spacing: -0.03em;
+      }
+      .stat-pill .l {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 11px;
+        color: rgba(26, 26, 26, 0.6);
+        margin-top: 12px;
+      }
+      .stat-pill .bar {
+        width: 40px;
+        height: 4px;
+        border-radius: 9999px;
+        margin-top: 16px;
+      }
+      .bartrack {
+        height: 36px;
+        background: var(--cream);
+        border: 2px solid var(--outline);
+        border-radius: 9999px;
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+      .barfill {
+        height: 100%;
+        border-radius: 9999px;
+        border-right: 2px solid var(--outline);
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 14px;
+        font-family: var(--sans);
+        font-weight: 600;
+        font-size: 12px;
+      }
+      .chips {
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      .chip-pill {
+        border: 2px solid var(--outline);
+        border-radius: 9999px;
+        padding: 0.4rem 1.1rem;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+      }
+      .orbit {
+        position: relative;
+        height: 280px;
+        display: grid;
+        place-items: center;
+      }
+      .orbit .center {
+        width: 140px;
+        height: 140px;
+        border-radius: 50%;
+        background: var(--lime);
+        border: 2px solid var(--outline);
+        display: grid;
+        place-items: center;
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 40px;
+      }
+      .orbit .sat {
+        position: absolute;
+        border: 2px solid var(--outline);
+        border-radius: 9999px;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        font-size: 12px;
+        padding: 0.4rem 1rem;
+        box-shadow: 6px 6px 0 var(--shadow);
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 12px;
+        color: rgba(26, 26, 26, 0.55);
+      }
+      .fw .flabel b {
+        color: var(--ink);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--cream);
+        background-image:
+          radial-gradient(ellipse at 15% 12%, rgba(229, 93, 78, 0.1), transparent 46%),
+          radial-gradient(ellipse at 85% 85%, rgba(139, 180, 247, 0.12), transparent 46%);
+        border: 2px solid var(--outline);
+        border-radius: 1.4rem;
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+      .frame .ffp {
+        position: absolute;
+        border: 0.25cqw solid var(--outline);
+        border-radius: 9999px;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05cqw;
+        font-size: 1cqw;
+        padding: 0.4cqw 1.1cqw;
+        z-index: 1;
+      }
+      .frame .ffp.circ {
+        border-radius: 50%;
+        width: 6cqw;
+        height: 6cqw;
+        display: grid;
+        place-items: center;
+        padding: 0;
+      }
+
+      /* f1 cover */
+      .qf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .qf1 .tp {
+        background: var(--yellow);
+        border: 0.25cqw solid var(--outline);
+        border-radius: 9999px;
+        padding: 0.8cqw 2.2cqw;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 1.1cqw;
+        box-shadow: 0.4cqw 0.4cqw 0 var(--shadow);
+        margin-bottom: 3cqw;
+        z-index: 3;
+      }
+      .qf1 h3 {
+        font-family: var(--serif);
+        font-weight: 800;
+        font-size: 12cqw;
+        line-height: 0.88;
+        letter-spacing: -0.3cqw;
+        z-index: 3;
+      }
+      .qf1 h3 em {
+        font-style: italic;
+        color: var(--coral);
+      }
+      .qf1 .al {
+        width: 6cqw;
+        height: 0.3cqw;
+        background: var(--coral);
+        border-radius: 9999px;
+        margin-top: 2.4cqw;
+        z-index: 3;
+      }
+
+      /* f2 pillar cards (catalog) */
+      .qf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .qf2 .tp {
+        align-self: flex-start;
+        background: var(--lavender);
+        border: 0.2cqw solid var(--outline);
+        border-radius: 9999px;
+        padding: 0.5cqw 1.4cqw;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.15cqw;
+        font-size: 0.9cqw;
+        margin-bottom: 1.6cqw;
+      }
+      .qf2 h3 {
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 4cqw;
+        line-height: 1;
+        letter-spacing: -0.05cqw;
+        margin-bottom: 2.4cqw;
+      }
+      .qf2 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2cqw;
+      }
+      .qf2 .c {
+        background: var(--white);
+        border: 0.2cqw solid var(--outline);
+        border-radius: 1.6cqw;
+        padding: 2cqw 1.6cqw;
+        box-shadow: 0.6cqw 0.6cqw 0 var(--shadow);
+      }
+      .qf2 .c .ic {
+        width: 4cqw;
+        height: 4cqw;
+        border-radius: 50%;
+        border: 0.2cqw solid var(--outline);
+        display: grid;
+        place-items: center;
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 1.6cqw;
+        margin-bottom: 1.4cqw;
+      }
+      .qf2 .c .t {
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 1.9cqw;
+        line-height: 1.1;
+      }
+      .qf2 .c .x {
+        font-size: 1cqw;
+        line-height: 1.5;
+        color: rgba(26, 26, 26, 0.65);
+        margin-top: 0.8cqw;
+      }
+
+      /* f3 quote */
+      .qf3 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 8cqw;
+      }
+      .qf3 .q {
+        font-family: var(--serif);
+        font-weight: 600;
+        font-size: 4.2cqw;
+        line-height: 1.3;
+        letter-spacing: -0.03cqw;
+      }
+      .qf3 .q .hl {
+        display: inline-flex;
+        align-items: center;
+        background: var(--lime);
+        border: 0.2cqw solid var(--outline);
+        border-radius: 9999px;
+        padding: 0 1.2cqw;
+        font-family: var(--sans);
+        font-weight: 600;
+        font-size: 3cqw;
+        text-transform: none;
+      }
+      .qf3 .at {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 1cqw;
+        color: rgba(26, 26, 26, 0.6);
+        margin-top: 2.4cqw;
+      }
+
+      /* f4 closing */
+      .qf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .qf4 .tp {
+        background: var(--yellow);
+        border: 0.25cqw solid var(--outline);
+        border-radius: 9999px;
+        padding: 0.7cqw 2cqw;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 1cqw;
+        box-shadow: 0.4cqw 0.4cqw 0 var(--shadow);
+        margin-bottom: 2.6cqw;
+        z-index: 3;
+      }
+      .qf4 h3 {
+        font-family: var(--serif);
+        font-weight: 800;
+        font-size: 8.5cqw;
+        line-height: 0.92;
+        letter-spacing: -0.2cqw;
+        z-index: 3;
+      }
+      .qf4 h3 em {
+        font-style: italic;
+        color: var(--violet);
+      }
+      .qf4 .al {
+        width: 5cqw;
+        height: 0.3cqw;
+        background: var(--coral);
+        border-radius: 9999px;
+        margin-top: 2.4cqw;
+        z-index: 3;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 32px;
+      }
+      .do-card {
+        background: var(--white);
+        border: 2px solid var(--outline);
+        border-radius: 2rem;
+        padding: 36px;
+        box-shadow: 8px 8px 0 var(--shadow);
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 30px;
+        margin-bottom: 22px;
+      }
+      .do-card .hpill {
+        display: inline-block;
+        border-radius: 9999px;
+        border: 2px solid var(--outline);
+        padding: 0.3rem 1rem;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        font-size: 11px;
+        margin-bottom: 20px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-size: 14px;
+        line-height: 1.6;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 13px;
+        color: rgba(26, 26, 26, 0.75);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--serif);
+        font-weight: 700;
+      }
+      .do-card.do li::before {
+        content: "+";
+        color: var(--coral);
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--violet);
+      }
+
+      .foot {
+        padding: 56px 100px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: 2px solid rgba(30, 30, 30, 0.12);
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-weight: 800;
+        font-size: 28px;
+      }
+      .foot .r {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 11px;
+        color: rgba(26, 26, 26, 0.5);
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,700;0,800;1,400&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #f5f5f0 !important;
+        --secondary: #1a1a1a !important;
+        --tertiary: #c4d94e !important;
+        --accent: #e85d4e !important;
+        --f-disp: "Bodoni Moda", sans-serif !important;
+        --f-body: "Space Grotesk", sans-serif !important;
+        --cream: #f5f5f0 !important;
+        --ink: #1a1a1a !important;
+        --coral: #e85d4e !important;
+        --lime: #c4d94e !important;
+        --serif: "Bodoni Moda", sans-serif !important;
+        --sans: "Space Grotesk", sans-serif !important;
+        --outline: #1e1e1e !important;
+        --white: #ffffff !important;
+        --lavender: #c5b5e0 !important;
+        --sky: #8bb4f7 !important;
+        --violet: #a06ce8 !important;
+        --yellow: #f2d160 !important;
+        --peach: #f5b895 !important;
+        --mint: #a8e6cf !important;
+        --shadow: rgba(26, 26, 26, 0.08) !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <span
+        class="fp"
+        style="background: var(--coral); top: 14%; left: 8%; transform: rotate(-12deg)"
+        >Editorial</span
+      >
+      <span class="fp" style="background: var(--sky); top: 24%; right: 10%; transform: rotate(9deg)"
+        >Playful</span
+      >
+      <span
+        class="fp circ"
+        style="background: var(--peach); top: 60%; left: 6%; transform: rotate(-6deg)"
+        >★</span
+      >
+      <span
+        class="fp"
+        style="background: var(--mint); bottom: 16%; right: 8%; transform: rotate(-14deg)"
+        >Memphis</span
+      >
+      <span
+        class="fp"
+        style="background: var(--lavender); bottom: 24%; left: 13%; transform: rotate(7deg)"
+        >Candy</span
+      >
+      <span
+        class="fp circ"
+        style="background: var(--lime); top: 18%; right: 24%; transform: rotate(10deg)"
+        >+</span
+      >
+      <div class="titlepill">Frame System · Vol. 01</div>
+      <h1>Everything's<br />a <em>capsule.</em></h1>
+      <div class="sub">Bodoni Moda · Space Grotesk · Nine Candy Accents</div>
+      <div class="accent-line"></div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="tagpill">Palette</span>
+        <h2>Nine Candy Accents</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--coral)"></div>
+          <div class="meta">
+            <div class="name">Coral</div>
+            <div class="hex">#E85D4E</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--lime)"></div>
+          <div class="meta">
+            <div class="name">Lime</div>
+            <div class="hex">#C4D94E</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--lavender)"></div>
+          <div class="meta">
+            <div class="name">Lavender</div>
+            <div class="hex">#C5B5E0</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--sky)"></div>
+          <div class="meta">
+            <div class="name">Sky</div>
+            <div class="hex">#8BB4F7</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--violet)"></div>
+          <div class="meta">
+            <div class="name">Violet</div>
+            <div class="hex">#A06CE8</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--yellow)"></div>
+          <div class="meta">
+            <div class="name">Yellow</div>
+            <div class="hex">#F2D160</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--peach)"></div>
+          <div class="meta">
+            <div class="name">Peach</div>
+            <div class="hex">#F5B895</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--mint)"></div>
+          <div class="meta">
+            <div class="name">Mint</div>
+            <div class="hex">#A8E6CF</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--cream); border-bottom: 2px solid var(--outline)"
+          ></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#F5F5F0 · canvas</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="meta">
+            <div class="name">Ink / Outline</div>
+            <div class="hex">#1A1A1A · #1E1E1E</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="tagpill" style="background: var(--mint)">Type</span>
+        <h2>Bodoni × Grotesk</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">Bodoni Moda 800 · sentence case · −0.02em</div>
+        </div>
+        <div class="spec">
+          <span
+            class="serif"
+            style="font-weight: 800; font-size: 88px; line-height: 0.9; letter-spacing: -0.02em"
+            >Inflated.</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">headline</div>
+          <div class="m">Bodoni Moda 700 · ink, never colored</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-weight: 700; font-size: 54px">A friendly pill</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">stat-number</div>
+          <div class="m">Bodoni Moda 800 · color allowed here</div>
+        </div>
+        <div class="spec">
+          <span
+            class="serif"
+            style="font-weight: 800; font-size: 64px; color: var(--coral); letter-spacing: -0.03em"
+            >240%</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Space Grotesk 400 · ink 65%</div>
+        </div>
+        <div class="spec">
+          <p
+            style="
+              font-size: 17px;
+              line-height: 1.6;
+              max-width: 680px;
+              color: rgba(26, 26, 26, 0.7);
+            "
+          >
+            Space Grotesk carries every paragraph and label — the clean grotesque against Bodoni's
+            glamour.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">pill-text</div>
+          <div class="m">Space Grotesk 600 · uppercase · 0.12em</div>
+        </div>
+        <div class="spec">
+          <span
+            class="pill"
+            style="
+              background: var(--yellow);
+              padding: 0.5rem 1.4rem;
+              text-transform: uppercase;
+              letter-spacing: 0.12em;
+              font-size: 14px;
+            "
+            >Featured</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="tagpill" style="background: var(--sky)">Components</span>
+        <h2>Pills, All the Way Down</h2>
+        <span class="sp"></span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s4">
+          <div class="cnote">Pillar card</div>
+          <div class="p-card">
+            <div class="ic" style="background: var(--coral)">I</div>
+            <div class="t">Pill Geometry</div>
+            <div class="x">Every container is a pill — 9999px small, 2rem for cards.</div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Stat pills</div>
+          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px">
+            <div class="stat-pill">
+              <div class="n" style="color: var(--coral)">9</div>
+              <div class="l">Accents</div>
+              <div class="bar" style="background: var(--coral)"></div>
+            </div>
+            <div class="stat-pill">
+              <div class="n" style="color: var(--sky)">2px</div>
+              <div class="l">Outline</div>
+              <div class="bar" style="background: var(--sky)"></div>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Bar tracks + chips</div>
+          <div class="bartrack">
+            <div class="barfill" style="width: 78%; background: var(--lime)">78</div>
+          </div>
+          <div class="bartrack">
+            <div class="barfill" style="width: 54%; background: var(--violet); color: var(--white)">
+              54
+            </div>
+          </div>
+          <div class="chips">
+            <span class="chip-pill" style="background: var(--peach)">Soft</span
+            ><span class="chip-pill" style="background: var(--lavender)">Lifted</span
+            ><span class="chip-pill" style="background: var(--mint)">Friendly</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s6">
+          <div class="cnote">Orbit composition</div>
+          <div class="orbit">
+            <div class="center">01</div>
+            <span
+              class="sat"
+              style="background: var(--coral); top: 14%; left: 18%; transform: rotate(-10deg)"
+              >Vision</span
+            >
+            <span
+              class="sat"
+              style="background: var(--sky); top: 20%; right: 16%; transform: rotate(8deg)"
+              >Future</span
+            >
+            <span
+              class="sat"
+              style="background: var(--yellow); bottom: 16%; left: 24%; transform: rotate(6deg)"
+              >Next</span
+            >
+            <span
+              class="sat"
+              style="background: var(--mint); bottom: 20%; right: 20%; transform: rotate(-7deg)"
+              >Now</span
+            >
+          </div>
+        </div>
+        <div class="s6">
+          <div class="cnote">Diagram nodes + connectors</div>
+          <div
+            style="display: flex; align-items: center; gap: 0; margin-top: 40px; flex-wrap: wrap"
+          >
+            <span
+              class="pill"
+              style="
+                background: var(--white);
+                padding: 1rem 2rem;
+                box-shadow: 6px 6px 0 var(--shadow);
+                font-family: var(--serif);
+                font-weight: 700;
+              "
+              >Draft</span
+            >
+            <span
+              style="
+                width: 50px;
+                height: 4px;
+                background: var(--outline);
+                position: relative;
+                display: inline-block;
+              "
+            ></span>
+            <span
+              class="pill"
+              style="
+                background: var(--lavender);
+                padding: 1rem 2rem;
+                box-shadow: 6px 6px 0 var(--shadow);
+                font-family: var(--serif);
+                font-weight: 700;
+              "
+              >Shape</span
+            >
+            <span
+              style="
+                width: 50px;
+                height: 4px;
+                background: var(--outline);
+                position: relative;
+                display: inline-block;
+              "
+            ></span>
+            <span
+              class="pill"
+              style="
+                background: var(--lime);
+                padding: 1rem 2rem;
+                box-shadow: 6px 6px 0 var(--shadow);
+                font-family: var(--serif);
+                font-weight: 700;
+              "
+              >Ship</span
+            >
+          </div>
+          <div style="margin-top: 40px" class="cnote">Card icons</div>
+          <div style="display: flex; gap: 18px">
+            <span
+              style="
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                border: 2px solid var(--outline);
+                background: var(--yellow);
+                display: grid;
+                place-items: center;
+                font-family: var(--serif);
+                font-weight: 700;
+                font-size: 22px;
+              "
+              >II</span
+            >
+            <span
+              style="
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                border: 2px solid var(--outline);
+                background: var(--peach);
+                display: grid;
+                place-items: center;
+                font-family: var(--serif);
+                font-weight: 700;
+                font-size: 22px;
+              "
+              >III</span
+            >
+            <span
+              style="
+                width: 60px;
+                height: 60px;
+                border-radius: 50%;
+                border: 2px solid var(--outline);
+                background: var(--violet);
+                color: var(--white);
+                display: grid;
+                place-items: center;
+                font-family: var(--serif);
+                font-weight: 700;
+                font-size: 22px;
+              "
+              >IV</span
+            >
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="tagpill" style="background: var(--coral)">Frames</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · pill wallpaper · centered</span></div>
+          <div class="frame qf1">
+            <span
+              class="ffp"
+              style="background: var(--coral); top: 12%; left: 8%; transform: rotate(-12deg)"
+              >Editorial</span
+            >
+            <span
+              class="ffp"
+              style="background: var(--sky); top: 18%; right: 10%; transform: rotate(9deg)"
+              >Playful</span
+            >
+            <span
+              class="ffp circ"
+              style="background: var(--lime); bottom: 16%; left: 9%; transform: rotate(-8deg)"
+              >+</span
+            >
+            <span
+              class="ffp"
+              style="background: var(--mint); bottom: 14%; right: 11%; transform: rotate(-12deg)"
+              >Memphis</span
+            >
+            <div class="body">
+              <div class="tp">Frame System</div>
+              <h3>Everything's a <em>capsule.</em></h3>
+              <div class="al"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Pillar Cards</b><span>· catalog · 3-up · left</span></div>
+          <div class="frame qf2">
+            <div class="body">
+              <div class="tp">Three Pillars</div>
+              <h3>The capsule rules.</h3>
+              <div class="row">
+                <div class="c">
+                  <div class="ic" style="background: var(--coral)">I</div>
+                  <div class="t">Pill</div>
+                  <div class="x">Every container is a pill.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--sky)">II</div>
+                  <div class="t">Outline</div>
+                  <div class="x">2px ink stroke on all.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--lime)">III</div>
+                  <div class="t">Lift</div>
+                  <div class="x">Soft offset shadow.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Pull Quote</b><span>· quote · highlight pill · left</span></div>
+          <div class="frame qf3">
+            <span
+              class="ffp"
+              style="background: var(--peach); top: 14%; right: 9%; transform: rotate(8deg)"
+              >Voice</span
+            >
+            <div class="body">
+              <div class="q">
+                Wrap emphasis in a <span class="hl">candy pill</span>, never in bold.
+              </div>
+              <div class="at">— The System Voice</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Closing Plate</b><span>· closer · pill wallpaper · centered</span>
+          </div>
+          <div class="frame qf4">
+            <span
+              class="ffp"
+              style="background: var(--lavender); top: 16%; left: 10%; transform: rotate(-10deg)"
+              >Thanks</span
+            >
+            <span
+              class="ffp circ"
+              style="background: var(--yellow); bottom: 18%; right: 12%; transform: rotate(9deg)"
+              >★</span
+            >
+            <div class="body">
+              <div class="tp">The End</div>
+              <h3>Stay <em>inflated.</em></h3>
+              <div class="al"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="tagpill" style="background: var(--yellow)">Rules</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <span class="hpill" style="background: var(--lime)">Do</span>
+          <ul>
+            <li>Make every text container a pill — 9999px small, 2rem for cards.</li>
+            <li>Wrap every pill, card, and icon in the 2px ink outline.</li>
+            <li>Set Bodoni headlines in ink, sentence case; color lives on stats + pill fills.</li>
+            <li>Use soft offset shadows (4/6/8/12px) in 8% ink — never blur.</li>
+            <li>Float 5–8 candy pills as wallpaper on declarative frames.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <span class="hpill" style="background: var(--coral)">Don't</span>
+          <ul>
+            <li>No sharp-cornered text containers; no unstroked pills.</li>
+            <li>No colored Bodoni headlines; no uppercase Bodoni.</li>
+            <li>No blurred shadows; no tenth accent color.</li>
+            <li>No shadows on decorative floating pills (atmosphere is flat).</li>
+            <li>Don't blow a headline edge-to-edge — fit to measure.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--cream);
+        --cap-accent: var(--coral);
+        --cap-accent-2: var(--yellow);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 82cqw;
+        padding: 1.3cqw 3.4cqw 1.5cqw;
+        background: var(--cap-canvas);
+        border: 0.2cqw solid var(--cap-ink);
+        border-radius: 9999px;
+        box-shadow: 0.6cqw 0.6cqw 0 var(--shadow);
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.12em 0.36em;
+        font-family: var(--serif);
+        font-weight: 700;
+        font-size: 3.2cqw;
+        line-height: 1.16;
+        letter-spacing: -0.02em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.1em;
+        border-radius: 9999px;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.14em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 0.12cqw dashed rgba(30, 30, 30, 0.3);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 0.85cqw;
+        letter-spacing: 0.08em;
+        color: rgba(26, 26, 26, 0.5);
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="tagpill" style="background: var(--peach)">Captions</span>
+        <h2>Captions</h2>
+        <span class="sp"></span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <span
+              class="ffp"
+              style="background: var(--lavender); top: 12%; left: 8%; transform: rotate(-11deg)"
+              >Live</span
+            >
+            <span
+              class="ffp circ"
+              style="background: var(--lime); top: 16%; right: 10%; transform: rotate(8deg)"
+              >+</span
+            >
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · highlight cleared</span></div>
+          <div class="frame capdemo">
+            <span
+              class="ffp"
+              style="
+                background: var(--sky);
+                bottom: auto;
+                top: 14%;
+                right: 11%;
+                transform: rotate(9deg);
+              "
+              >Promo</span
+            >
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Capsule</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#F5F5F0" />
+        <rect
+          x="22"
+          y="38"
+          width="56"
+          height="24"
+          rx="12"
+          fill="#F2D160"
+          stroke="#1E1E1E"
+          stroke-width="2"
+        />
+        <rect
+          x="14"
+          y="20"
+          width="26"
+          height="13"
+          rx="6.5"
+          fill="#E85D4E"
+          stroke="#1E1E1E"
+          stroke-width="2"
+          transform="rotate(-10 27 26)"
+        />
+        <circle cx="76" cy="72" r="8" fill="#C4D94E" stroke="#1E1E1E" stroke-width="2" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/cartesian/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/cartesian/FRAME.md
new file mode 100644
index 0000000..a00c21d
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/cartesian/FRAME.md
@@ -0,0 +1,278 @@
+---
+version: alpha
+name: Cartesian — Frame (video / frame layer)
+description: >
+  Video-first companion to Cartesian's design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — the five-tone warm-stone palette, Playfair Display 400 + Inter, the
+  universal 1px taupe hairline as the only structural device, compass-drafted geometric rings,
+  and zero shadow / zero fill. Composition, frame scale, and aspect-ratio behavior are rewritten
+  for the frame. Restraint is the rule; motion is 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:
+  bg-primary: "#EDE8E0"
+  bg-secondary: "#E2DBD1"
+  text-primary: "#1A1A1A"
+  text-secondary: "#5A5A5A"
+  accent: "#8A8178"
+  line: "#B8B0A4"
+  white-overlay: "rgba(255,255,255,0.3)"
+
+typography:
+  # — reading ramp (Inter) —
+  body:        { fontFamily: "Inter", cqw: 1.0,  weight: 400, lineHeight: 1.6, color: "text-secondary" }
+  body-sm:     { fontFamily: "Inter", cqw: 0.85, weight: 400, lineHeight: 1.6 }
+  subtitle:    { fontFamily: "Inter", cqw: 1.3,  weight: 400, lineHeight: 1.5 }
+  label:       { fontFamily: "Inter", px: 14, weight: 500, tracking: "3px", upper: true, color: "accent" }
+  attribution: { fontFamily: "Inter", px: 15, weight: 400, tracking: "2px", upper: true, color: "accent" }
+  micro:       { fontFamily: "Inter", px: 12, weight: 400, tracking: "2px", upper: true, color: "accent" }
+  # — display / hero ramp (Playfair Display 400, sentence case) —
+  h3:          { fontFamily: "Playfair Display", cqw: 1.8, weight: 400, lineHeight: 1.1 }
+  timeline-headline:{ fontFamily: "Playfair Display", cqw: 1.9, weight: 400, lineHeight: 1.1 }
+  card-headline:{ fontFamily: "Playfair Display", cqw: 2.0, weight: 400, lineHeight: 1.15 }
+  stat-figure: { fontFamily: "Playfair Display", cqw: 3.0, weight: 400, lineHeight: 1.0 }
+  quote-mark:  { fontFamily: "Playfair Display", cqw: 9.0, weight: 400, lineHeight: 0.5, color: "line" }
+  h2:          { fontFamily: "Playfair Display", cqw: 4.0, weight: 400, lineHeight: 1.1 }
+  h1:          { fontFamily: "Playfair Display", cqw: 6.2, weight: 400, lineHeight: 1.06 }
+  display:     { fontFamily: "Playfair Display", cqw: 8.0, weight: 400, lineHeight: 1.04 }
+
+spacing:
+  pad-x: "7cqw"
+  pad-y: "5cqw"
+  gap-xl: "6cqw"
+  gap-lg: "5cqw"
+
+components:
+  hairline:
+    rule: "0.07cqw solid {colors.line}"
+    description: "The universal structural device — every separator (agenda rule, timeline connector, card border, stats top) is this 1px taupe line. No thick borders exist."
+  card:
+    backgroundColor: "{colors.white-overlay}"
+    border: "0.07cqw solid {colors.line}"
+    rounded: "0"
+    shadow: "none"
+    description: "Faint white-overlay fill (canvas bleeds through) is what makes a card distinct from a bare region."
+  card-icon:
+    border: "0.07cqw solid {colors.line}"
+    rounded: "50%"
+    size: "40px circle"
+    textColor: "{colors.accent}"
+    typography: "Playfair numeral/letter"
+    description: "Ringed circle mark."
+  agenda-row:
+    borderBottom: "0.07cqw solid {colors.line}"
+    typography: "{typography.h3} (numeral {colors.accent}, label {colors.text-primary})"
+    description: "Numeral left, label right over a taupe rule."
+  timeline:
+    borderTop: "0.07cqw solid {colors.line}"
+    typography: "{typography.timeline-headline} + {typography.body-sm}"
+    description: "A single taupe top rule across items — no nodes, no dots."
+  stats-cluster:
+    borderTop: "0.07cqw solid {colors.line}"
+    typography: "{typography.stat-figure} + uppercase {colors.accent} labels"
+    description: "Inline modest stat figures (no hero numeral)."
+  geo-ring:
+    border: "1px solid {colors.line} (inner dashed ::before ~70–80%)"
+    rounded: "50%"
+    size: "10–50cqw"
+    opacity: "0.2–0.5"
+    description: "Compass-construction rings behind content. 1–2 per frame, never more."
+  horizontal-accent:
+    backgroundColor: "{colors.text-primary}"
+    size: "~18cqw × 1px"
+    description: "The system's only INK-BLACK rule — a strong terminal accent on cover/closing, sparingly."
+  vertical-line:
+    backgroundColor: "{colors.line}"
+    size: "1px × full height, ~5cqw from edge"
+    opacity: "0.3–0.4"
+    description: "Drafting-paper alignment guide. Optional."
+  image-placeholder:
+    backgroundColor: "{colors.bg-secondary}"
+    mark: "crossed +30°/−30° 1px taupe diagonals (an X)"
+    typography: "small uppercase {typography.micro}"
+    description: "The signature image-not-wired mark."
+  team-photo:
+    backgroundColor: "{colors.bg-secondary}"
+    border: "0.07cqw solid {colors.line}"
+    rounded: "50%"
+    typography: "Playfair initial in {colors.accent}"
+    description: "Circular portrait frame."
+---
+
+# Cartesian — Frame (video / frame layer)
+
+## Overview
+
+Cartesian at frame scale is a **quiet museum-catalog editorial system** — restraint through 1px
+lines. Every structural separator is a single 1px taupe hairline; there are no thick borders, no
+fills (save the faint white-overlay card), no shadows, no rounded rectangles. Hierarchy comes from
+**type contrast and negative space**, and atmosphere from **compass-drafted geometric rings**
+drifting behind content.
+
+The voice is a literary pairing: **Playfair Display** at weight 400 (the thin-stroke didone, never
+bold, always sentence case) carries every headline, numeral, and quote mark in ink; **Inter**
+carries body in warm gray and labels in uppercase taupe with 2–3px tracking. The palette is five
+warm stones plus ink — no populist accent color exists. The correct density is **sparse and
+breathing**: one clear idea, well-framed, on stone paper.
+
+**Key characteristics at frame scale:**
+
+- **1px taupe hairline** as the universal structural device — every separator is this one line.
+- **Playfair Display 400** (ink, sentence case) for display; **Inter** body (gray) + labels (taupe, tracked).
+- **Five warm stones + ink** — no red/blue/green; the only "color" is type contrast.
+- **Compass-drafted geometric rings** (solid + dashed, 20–50% opacity) behind content for mood.
+- **Flat** — zero shadow, zero rounded rectangle (circles only); the lone ink line is the `horizontal-accent`.
+- **Sparse and breathing** — generous negative space; crowding reads as broken.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one Playfair element dominates at **3–6× its nearest neighbor**; the serif/sans + size contrast carries hierarchy, not weight.
+- **Silence** — declarative frames read **55–60% empty**; Cartesian has **no dense frame** — even the agenda/index breathes (the system breaks when crowded).
+- **Restraint** — **at most two geo rings** per frame; the single INK-BLACK `horizontal-accent` rule used sparingly; no populist accent color ever.
+- **Reference** — aim at a **Vignelli editorial / Cooper Hewitt catalogue / pencil-and-tracing-paper plan**; failure looks like a **shadowed, rounded-card SaaS deck**.
+
+- **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:** `pad-x` (7cqw) generous gutters; geometry may bleed off an edge.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. The 1px hairlines and geo rings hold
+their proportion against the frame at any render size.
+
+## Colors
+
+Tokens identical to the source. `{colors.bg-primary}` is the ground; `{colors.text-primary}` ink is
+headlines and the one black accent rule; `{colors.text-secondary}` gray is body; `{colors.accent}`
+taupe is labels, numerals, small text; `{colors.line}` taupe is every 1px structural border.
+`{colors.bg-secondary}` is the only secondary fill (placeholders, photo frames). **No populist
+accent** — when emphasis is needed, grow the type, switch sans→serif, or add a single
+`horizontal-accent` ink line. Headlines are never taupe; small text is never ink.
+
+## Typography
+
+Two ramps. The **reading ramp** (Inter body 1.0cqw gray, labels in px taupe) carries copy + chrome;
+the **display ramp** (Playfair `h3` 1.8cqw → `display` 8.0cqw, all weight 400) carries every headline.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; px labels are chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display`/`h1`; 4–6 → `h2`; 7+ → `h3`. Cartesian has no hero-stat numeral — stats stay modest (`stat-figure` 3cqw).
+- **Playfair at 400, ink, sentence case** — never bold, never uppercase, never taupe. **Inter labels uppercase, 2–3px tracked, taupe.** Italic via Playfair italic for emphasis only.
+
+## Depth & Surface
+
+The flat plane is the only technique. Hierarchy from:
+
+- **Type contrast** — Playfair serif vs Inter sans; the 8cqw→0.7cqw scale.
+- **1px taupe hairlines** — every divider, card outline, timeline rule, photo ring.
+- **Tone** — ink vs gray vs taupe.
+- **Negative space** — generous padding.
+- **Geometric atmosphere** — compass rings that suggest depth without creating it.
+
+**Ceiling:** no box-shadow, no elevated card, no gradient, no rounded rectangle. The single ink line
+(`horizontal-accent`) is the only non-taupe rule.
+
+## Shapes
+
+- **50% (circle)** — card-icon, team-photo, nav-dot, every geo ring.
+- **0** — everything else; soft-rounded corners do not exist.
+
+## Components
+
+- **hairline** — the universal 1px taupe separator (the identity).
+- **card** (1px taupe + white-overlay) / **card-icon** (ringed circle) / **agenda-row** / **timeline** (line, no nodes) / **stats-cluster** — all built on the hairline.
+- **geo-ring** — compass decoration (solid + dashed), 1–2 per frame. **horizontal-accent** — the one ink line, sparingly. **vertical-line** — drafting guide.
+- **image-placeholder** (crossed-X) / **team-photo** (ringed initial) — the stone-fill placeholders.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> Every frame is sparse and breathing; 1–2 geo decorations max.
+
+### 1 · Cover (identity · move: serif + compass ring · left)
+
+**Ground** `{colors.bg-primary}`, `pad-x`. **Composes** geo-ring (right, ~34cqw, solid+dashed), vertical-line (left), label, display/h1. **Focal** a 2–3 line Playfair `display`/`h1` headline in ink (italic on the key word), left-anchored, with a taupe `label` above and an Inter subtitle below. **Chrome** optional bottom meta row (Playfair value + taupe label). **Accent** the geo ring; optionally one `horizontal-accent` ink line (if it clears the meta). **Silence** ~55% empty. **Fixed** Playfair 400 ink sentence-case, ≤2 geo elements, 1px lines. **Free** title, ring placement, meta. **Density** sparse.
+
+### 2 · Agenda / Index (index · move: hairline list · left)
+
+**Ground** `{colors.bg-primary}`, `pad-x`. **Composes** label, h2, agenda-rows. **Focal** a Playfair `h2` over 4–6 agenda rows (Playfair numeral in taupe + Playfair label in ink), each on a 1px taupe rule. **Chrome** taupe `label` eyebrow. **Accent** none — taupe numerals carry it. **Silence** moderate; rows generously spaced. **Fixed** 1px taupe rules, Playfair 400. **Free** items, count. **Density** standard (sparse rows).
+
+### 3 · Pull Quote (quote · move: centered statement · compass ring)
+
+**Ground** `{colors.bg-primary}`, centered. **Composes** geo-ring (centered dashed, ~26cqw), quote-mark, h2/display-quote, attribution. **Focal** a 2-line Playfair quote in ink, centered, under a 50%-taupe Playfair quote-mark; a taupe uppercase attribution beneath. **Accent** the faint centered ring. **Silence** ~60% — deliberately open. **Fixed** Playfair 400, one ring, centered. **Free** quote, attribution. **Density** sparse.
+
+### 4 · Closing Plate (closer · move: centered ring · centered)
+
+**Ground** `{colors.bg-primary}`, centered. **Composes** geo-ring (centered, ~40cqw, solid+dashed), label, h1/display, horizontal-accent. **Focal** a 1–2 line Playfair sign-off in ink (italic key word), centered inside the largest compass ring; a short ink `horizontal-accent` beneath. **Accent** the ring + the one ink line. **Silence** ~60%. **Fixed** Playfair 400, centered, ≤2 geo. **Free** sign-off, ring scale. **Density** sparse.
+
+### 5 · Two-Column Editorial (content · move: asymmetric split · left)
+
+**Ground** `{colors.bg-primary}`, `pad-x`, two columns with `gap-xl`. **Composes** label, h2, body, image-placeholder (crossed-X) or card. **Focal** a Playfair `h2` + Inter body in the text column; an image-placeholder or card in the other. **Accent** none. **Silence** generous gutter. **Fixed** 1px taupe card/placeholder borders, white-overlay fill. **Free** which side is text, body copy. **Density** standard.
+
+### 6 · Stats / Timeline (data · move: hairline rail · left)
+
+**Ground** `{colors.bg-primary}`, `pad-x`. **Composes** label, h3, stats-cluster or timeline. **Focal** a modest Playfair stat row (or a 1px-rule timeline with year + headline + body, no nodes), framed by a 1px taupe top rule. **Accent** none. **Silence** moderate. **Fixed** modest stat scale, hairline rule, no nodes. **Free** figures, phases. **Density** standard.
+
+## Composition Rules
+
+### Do
+
+- Use a **single 1px taupe line** for every separator — the hairline is the identity.
+- Set every **Playfair headline at 400, ink, sentence case**; render labels taupe, uppercase, 2–3px tracked.
+- Layer **one or two compass rings** (solid + dashed, 20–50% opacity) behind content for atmosphere.
+- Let frames **breathe** — sparse, generous negative space; 55–60% empty on declarative frames.
+- Lean centered on quote/closer; asymmetric/left on cover/agenda/editorial. Use `bg-secondary` for placeholder fills.
+
+### Don't
+
+- Don't introduce a populist accent color — stone and ink only.
+- Don't bold Playfair, render headlines in taupe, or use thick (2px+) borders.
+- Don't add shadows, elevated cards, or rounded rectangles (circles only).
+- Don't crowd the frame — packed layouts read as broken.
+- Never more than two geo decorations per frame; don't blow a headline edge-to-edge.
+
+## Aspect-Ratio Behavior
+
+| Treatment            | 16:9                       | 9:16                                | 1:1                         |
+| -------------------- | -------------------------- | ----------------------------------- | --------------------------- |
+| Cover                | headline left, ring right  | headline top, ring below            | headline upper, ring behind |
+| Agenda / Index       | h2 + rows                  | h2 + rows (tighter)                 | h2 + rows                   |
+| Pull Quote           | centered, ring behind      | centered, taller                    | centered                    |
+| Closing Plate        | centered in ring           | centered, ring scaled               | centered                    |
+| Two-Column Editorial | text + visual side-by-side | stacked (collapse)                  | stacked                     |
+| Stats / Timeline     | horizontal rail            | vertical stack (drop timeline rule) | compact                     |
+
+Generous `pad-x` holds on the short edge; re-step display per ratio above the 1.4cqw floor. On
+9:16, the timeline rule loses meaning when stacked — switch to a vertical list (per source).
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder (the crossed-X image-placeholder, or a ringed initial for portraits).
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, dates, or counts at frame scale. Render slots as `— figure —`, `{metric}`.
+Stats and timeline years carry placeholders until the script supplies them. Agenda ordinals
+(01, 02…) are decorative and may be sequential.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one Playfair element dominates; the serif/sans contrast carries hierarchy.
+- **Silence** — declarative frames 55–60% empty; nothing is crowded.
+- **Palette** — five stones + ink only; no populist accent; headlines ink, labels taupe.
+- **Lines** — every separator is a 1px taupe hairline; the only ink line is `horizontal-accent`.
+- **Type** — Playfair 400 sentence-case, fit-to-measure; labels uppercase 2–3px; ≥1.4cqw floor.
+- **Depth** — 0 shadow, 0 rounded rectangle; ≤2 geo rings per frame.
+- **Anchor** — centered on quote/closer, left/asymmetric on cover/agenda/editorial; no 3 in a row alike.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the 0.6s fade in the source is a deck mechanic.
+- **Playfair Display + Inter via Google Fonts.** CJK pairing (Noto Serif SC 700/400) carries over; Playfair has no Hanzi italic — substitute weight/taupe for emphasis.
+- **9:16 / 1:1 are guidance**; verify the legibility floor and that the timeline collapses to a vertical list.
+- Geo rings, the crossed-X placeholder, and the dashed inner ring are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/cartesian/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/cartesian/caption-skin.html
new file mode 100644
index 0000000..3738c67
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/cartesian/caption-skin.html
@@ -0,0 +1,221 @@
+<!--
+  Cartesian — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a cartesian 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 museum-catalog lower-third — a warm-stone card on a single 1px taupe
+  hairline border (cartesian's universal structural device), SHARP corners, ZERO
+  shadow, ZERO fill beyond the stone canvas. Playfair Display 400, sentence case, ink
+  glyphs. Upcoming words sit in faint ink; the current word is marked QUIETLY — a faint
+  stone wash with a 1px taupe hairline underline (restraint, not a loud block); spoken
+  words settle to solid ink, the wash and underline cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 stone card — single 1px taupe hairline border (cartesian's universal
+     structural device), SHARP corners, ZERO shadow, ZERO fill beyond the stone canvas */
+  .caption-pill {
+    max-width: 78%;
+    padding: 20px 44px 24px;
+    background: var(--cap-canvas, #ede8e0);
+    border: 1px solid var(--cap-accent-2, #b8b0a4);
+    border-radius: 0;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.1em 0.34em;
+    font-family: var(--font-display, "Playfair Display"), Georgia, serif;
+    font-weight: 400;
+    font-size: clamp(40px, 4.4vw, 58px);
+    line-height: 1.16;
+    letter-spacing: -0.01em;
+  }
+
+  /* upcoming — faint ink, no mark */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.06em;
+    border-bottom: 1px solid transparent;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 42%, var(--cap-canvas, #ede8e0));
+  }
+  /* current word — a QUIET marker: a faint warm-stone wash behind solid ink, plus a
+     1px taupe hairline underline (restraint, not a loud block; SHARP, NO shadow) */
+  .caption-word.is-active {
+    color: var(--cap-ink, #1a1a1a);
+    background: color-mix(in srgb, var(--cap-accent, #8a8178) 18%, var(--cap-canvas, #ede8e0));
+    border-bottom: 1px solid var(--cap-accent, #8a8178);
+  }
+  /* already spoken — solid ink, wash + underline cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #1a1a1a);
+    background: transparent;
+    border-bottom: 1px solid transparent;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — Playfair Display italic, cartesian's only display inflection */
+  .caption-word.cap-brand {
+    font-style: italic;
+  }
+  /* numerals / data — the body sans voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Inter"), ui-sans-serif, sans-serif;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 72%, var(--cap-canvas, #ede8e0));
+  }
+  /* emphasis — a 1px taupe hairline underline (no second color; stone-and-ink only) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 1px;
+    text-decoration-color: var(--cap-accent, #8a8178);
+    text-underline-offset: 0.12em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.985 }, { scale: 1, duration: 0.2, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/cartesian/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/cartesian/frame-showcase.html
new file mode 100644
index 0000000..7918b04
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/cartesian/frame-showcase.html
@@ -0,0 +1,1263 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Cartesian</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&family=Inter:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --bg: #ede8e0;
+        --bg-2: #e2dbd1;
+        --ink: #1a1a1a;
+        --gray: #5a5a5a;
+        --accent: #8a8178;
+        --line: #b8b0a4;
+        --white-overlay: rgba(255, 255, 255, 0.3);
+        --serif: "Playfair Display", serif;
+        --sans: "Inter", sans-serif;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #15140f;
+      }
+      body {
+        background: var(--bg);
+        color: var(--gray);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        font-weight: 400;
+        color: var(--ink);
+      }
+      .label {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 13px;
+        color: var(--accent);
+      }
+      .micro {
+        font-family: var(--sans);
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+
+      section {
+        padding: 128px 100px;
+        position: relative;
+        overflow: hidden;
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 24px;
+        margin-bottom: 72px;
+      }
+      .sec-head .n {
+        font-family: var(--serif);
+        font-size: 24px;
+        color: var(--accent);
+      }
+      .sec-head h2 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 48px;
+        line-height: 1.1;
+        color: var(--ink);
+      }
+      .sec-head .sp {
+        flex: 1;
+        height: 1px;
+        background: var(--line);
+        align-self: center;
+      }
+      .sec-head .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+
+      /* geometric decoration */
+      .geo {
+        position: absolute;
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        pointer-events: none;
+      }
+      .geo.dash {
+        border-style: dashed;
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+      }
+      .cover .geo-ring {
+        position: absolute;
+        width: 46vw;
+        height: 46vw;
+        right: -8vw;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        opacity: 0.5;
+      }
+      .cover .geo-ring::before {
+        content: "";
+        position: absolute;
+        inset: 14%;
+        border: 1px dashed var(--line);
+        border-radius: 50%;
+        opacity: 0.7;
+      }
+      .cover .inner {
+        padding: 0 8vw;
+        position: relative;
+        z-index: 2;
+        max-width: 72%;
+      }
+      .cover .label {
+        margin-bottom: 32px;
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 400;
+        color: var(--ink);
+        font-size: clamp(56px, 8vw, 118px);
+        line-height: 1.06;
+      }
+      .cover h1 em {
+        font-style: italic;
+      }
+      .cover .sub {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: clamp(16px, 1.5vw, 22px);
+        line-height: 1.6;
+        color: var(--gray);
+        margin-top: 32px;
+        max-width: 620px;
+      }
+      .cover .haccent {
+        width: 20vw;
+        height: 1px;
+        background: var(--ink);
+        margin-top: 48px;
+      }
+      .cover .meta {
+        position: absolute;
+        left: 8vw;
+        bottom: 64px;
+        display: flex;
+        gap: 48px;
+        z-index: 2;
+      }
+      .cover .meta .m .v {
+        font-family: var(--serif);
+        font-size: 20px;
+        color: var(--ink);
+        white-space: nowrap;
+      }
+      .cover .meta .m .k {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--accent);
+        margin-top: 6px;
+      }
+      .cover .vline {
+        position: absolute;
+        left: 5vw;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: var(--line);
+        opacity: 0.4;
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 28px;
+      }
+      .sw .chip {
+        height: 130px;
+        border: 1px solid var(--line);
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-size: 20px;
+        color: var(--ink);
+        margin-top: 16px;
+      }
+      .sw .hex {
+        font-family: var(--sans);
+        font-size: 12px;
+        letter-spacing: 1px;
+        color: var(--accent);
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--gray);
+        margin-top: 10px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 1px solid var(--line);
+      }
+      .type-row .tok {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+      .type-row .m {
+        font-size: 12px;
+        color: var(--gray);
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+        margin-bottom: 22px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 48px;
+        margin-bottom: 64px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .c-card {
+        border: 1px solid var(--line);
+        background: var(--white-overlay);
+        padding: 36px 28px;
+      }
+      .c-card .ic {
+        width: 40px;
+        height: 40px;
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        font-family: var(--serif);
+        color: var(--accent);
+        font-size: 16px;
+        margin-bottom: 24px;
+      }
+      .c-card .t {
+        font-family: var(--serif);
+        font-size: 21px;
+        color: var(--ink);
+        line-height: 1.2;
+      }
+      .c-card .x {
+        font-size: 13px;
+        line-height: 1.6;
+        color: var(--gray);
+        margin-top: 12px;
+      }
+      .agenda .row {
+        display: flex;
+        align-items: baseline;
+        gap: 24px;
+        padding: 18px 0;
+        border-bottom: 1px solid var(--line);
+      }
+      .agenda .row .num {
+        font-family: var(--serif);
+        font-size: 24px;
+        color: var(--accent);
+        min-width: 48px;
+      }
+      .agenda .row .t {
+        font-family: var(--serif);
+        font-size: 22px;
+        color: var(--ink);
+      }
+      .agenda .row .d {
+        font-size: 13px;
+        color: var(--gray);
+        margin-left: auto;
+      }
+      .timeline {
+        border-top: 1px solid var(--line);
+        display: flex;
+        gap: 40px;
+        padding-top: 24px;
+      }
+      .timeline .it {
+        flex: 1;
+      }
+      .timeline .it .y {
+        font-size: 12px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--accent);
+      }
+      .timeline .it .t {
+        font-family: var(--serif);
+        font-size: 19px;
+        color: var(--ink);
+        margin-top: 8px;
+      }
+      .timeline .it .x {
+        font-size: 12px;
+        line-height: 1.5;
+        color: var(--gray);
+        margin-top: 8px;
+      }
+      .stats {
+        border-top: 1px solid var(--line);
+        display: flex;
+        gap: 40px;
+        padding-top: 24px;
+      }
+      .stats .st .f {
+        font-family: var(--serif);
+        font-size: 40px;
+        color: var(--ink);
+      }
+      .stats .st .l {
+        font-size: 11px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--accent);
+        margin-top: 8px;
+      }
+      .imgph {
+        aspect-ratio: 4/3;
+        background: var(--bg-2);
+        border: 1px solid var(--line);
+        position: relative;
+        display: grid;
+        place-items: center;
+      }
+      .imgph::before,
+      .imgph::after {
+        content: "";
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        width: 150%;
+        height: 1px;
+        background: var(--line);
+        transform-origin: center;
+      }
+      .imgph::before {
+        transform: translate(-50%, -50%) rotate(30deg);
+      }
+      .imgph::after {
+        transform: translate(-50%, -50%) rotate(-30deg);
+      }
+      .imgph span {
+        position: relative;
+        z-index: 2;
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--accent);
+        background: var(--bg-2);
+        padding: 6px 10px;
+      }
+      .team {
+        display: flex;
+        gap: 36px;
+      }
+      .team .p {
+        text-align: center;
+      }
+      .team .ph {
+        width: 110px;
+        height: 110px;
+        border-radius: 50%;
+        border: 1px solid var(--line);
+        background: var(--bg-2);
+        display: grid;
+        place-items: center;
+        font-family: var(--serif);
+        font-size: 34px;
+        color: var(--accent);
+      }
+      .team .nm {
+        font-family: var(--serif);
+        font-size: 17px;
+        color: var(--ink);
+        margin-top: 14px;
+      }
+      .team .ro {
+        font-size: 11px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--accent);
+        margin-top: 4px;
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--accent);
+      }
+      .fw .flabel b {
+        color: var(--ink);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--bg);
+        border: 1px solid var(--line);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 2;
+      }
+      .frame .fgeo {
+        position: absolute;
+        border: 1px solid var(--line);
+        border-radius: 50%;
+        pointer-events: none;
+        z-index: 1;
+      }
+      .frame .fgeo.dash {
+        border-style: dashed;
+      }
+
+      /* f1 cover */
+      .tf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+      }
+      .tf1 .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-bottom: 2cqw;
+      }
+      .tf1 h3 {
+        font-family: var(--serif);
+        font-size: 8cqw;
+        line-height: 1.04;
+        color: var(--ink);
+        max-width: 62cqw;
+      }
+      .tf1 h3 em {
+        font-style: italic;
+      }
+      .tf1 .sub {
+        font-size: 1.4cqw;
+        line-height: 1.55;
+        color: var(--gray);
+        margin-top: 2cqw;
+        max-width: 46cqw;
+      }
+      .tf1 .ha {
+        width: 18cqw;
+        height: 0.1cqw;
+        background: var(--ink);
+        margin-top: 3cqw;
+      }
+      .tf1 .ring {
+        width: 34cqw;
+        height: 34cqw;
+        right: -6cqw;
+        top: 50%;
+        transform: translateY(-50%);
+        opacity: 0.5;
+      }
+      .tf1 .ring::before {
+        content: "";
+        position: absolute;
+        inset: 16%;
+        border: 1px dashed var(--line);
+        border-radius: 50%;
+      }
+
+      /* f2 agenda (sparse list) */
+      .tf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+      }
+      .tf2 .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-bottom: 1.6cqw;
+      }
+      .tf2 h3 {
+        font-family: var(--serif);
+        font-size: 4cqw;
+        color: var(--ink);
+        margin-bottom: 2.4cqw;
+      }
+      .tf2 .row {
+        display: flex;
+        align-items: baseline;
+        gap: 2cqw;
+        padding: 1.3cqw 0;
+        border-bottom: 0.06cqw solid var(--line);
+      }
+      .tf2 .row .nm {
+        font-family: var(--serif);
+        font-size: 1.8cqw;
+        color: var(--accent);
+        min-width: 4cqw;
+      }
+      .tf2 .row .t {
+        font-family: var(--serif);
+        font-size: 2.2cqw;
+        color: var(--ink);
+      }
+
+      /* f3 quote */
+      .tf3 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 0 9cqw;
+      }
+      .tf3 .qm {
+        font-family: var(--serif);
+        font-size: 9cqw;
+        line-height: 0.5;
+        color: var(--line);
+        height: 5cqw;
+      }
+      .tf3 .q {
+        font-family: var(--serif);
+        font-size: 4cqw;
+        line-height: 1.2;
+        color: var(--ink);
+        margin-top: 1cqw;
+      }
+      .tf3 .at {
+        font-family: var(--sans);
+        font-weight: 400;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-top: 2.4cqw;
+      }
+      .tf3 .ring {
+        width: 26cqw;
+        height: 26cqw;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.3;
+      }
+
+      /* f4 closing */
+      .tf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+      .tf4 .lab {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        color: var(--accent);
+        margin-bottom: 2cqw;
+      }
+      .tf4 h3 {
+        font-family: var(--serif);
+        font-size: 7cqw;
+        line-height: 1.04;
+        color: var(--ink);
+      }
+      .tf4 h3 em {
+        font-style: italic;
+      }
+      .tf4 .ha {
+        width: 14cqw;
+        height: 0.1cqw;
+        background: var(--ink);
+        margin-top: 2.6cqw;
+      }
+      .tf4 .ring {
+        width: 40cqw;
+        height: 40cqw;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0.28;
+      }
+      .tf4 .ring::before {
+        content: "";
+        position: absolute;
+        inset: 18%;
+        border: 1px dashed var(--line);
+        border-radius: 50%;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .do-card {
+        border: 1px solid var(--line);
+        background: var(--white-overlay);
+        padding: 40px;
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-size: 30px;
+        color: var(--ink);
+        margin-bottom: 24px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-size: 14px;
+        line-height: 1.6;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 14px;
+        color: var(--gray);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--serif);
+        color: var(--accent);
+      }
+      .do-card.do li::before {
+        content: "\2014";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+      }
+
+      .foot {
+        padding: 64px 100px;
+        border-top: 1px solid var(--line);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-size: 26px;
+        color: var(--ink);
+      }
+      .foot .r {
+        font-family: var(--sans);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 11px;
+        color: var(--accent);
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #ede8e0 !important;
+        --secondary: #1a1a1a !important;
+        --tertiary: #b8b0a4 !important;
+        --accent: #8a8178 !important;
+        --f-disp: "Playfair Display", sans-serif !important;
+        --f-body: "Inter", sans-serif !important;
+        --bg: #ede8e0 !important;
+        --ink: #1a1a1a !important;
+        --accent: #8a8178 !important;
+        --line: #b8b0a4 !important;
+        --serif: "Playfair Display", sans-serif !important;
+        --sans: "Inter", sans-serif !important;
+        --bg-2: #e2dbd1 !important;
+        --gray: #5a5a5a !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="vline"></div>
+      <div class="geo-ring"></div>
+      <div class="inner">
+        <div class="label">Cartesian — Frame System</div>
+        <h1>Restraint,<br />drawn in <em>one line.</em></h1>
+        <div class="sub">
+          A quiet museum-catalog system in motion — Playfair Display, Inter, and a five-tone
+          warm-stone palette, framed by single 1px taupe hairlines and compass-drafted geometry.
+        </div>
+      </div>
+      <div class="meta">
+        <div class="m">
+          <div class="v">1920 × 1080</div>
+          <div class="k">Frame</div>
+        </div>
+        <div class="m">
+          <div class="v">Vol. 01</div>
+          <div class="k">Edition</div>
+        </div>
+        <div class="m">
+          <div class="v">Stone / Ink</div>
+          <div class="k">Palette</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="n">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="lab">Five Stones + Ink</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--bg)"></div>
+          <div class="name">BG Primary</div>
+          <div class="hex">#EDE8E0</div>
+          <div class="role">Warm sandstone canvas.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--bg-2)"></div>
+          <div class="name">BG Secondary</div>
+          <div class="hex">#E2DBD1</div>
+          <div class="role">Deeper stone for placeholders.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="name">Ink</div>
+          <div class="hex">#1A1A1A</div>
+          <div class="role">Headlines + the one black rule.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--gray)"></div>
+          <div class="name">Gray</div>
+          <div class="hex">#5A5A5A</div>
+          <div class="role">Body paragraphs.</div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--accent)"></div>
+          <div class="name">Accent</div>
+          <div class="hex">#8A8178</div>
+          <div class="role">Labels, numerals, small text.</div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="
+              background: var(--bg);
+              border-color: var(--line);
+              box-shadow:
+                inset 0 0 0 8px var(--bg),
+                inset 0 0 0 9px var(--line);
+            "
+          ></div>
+          <div class="name">Line</div>
+          <div class="hex">#B8B0A4</div>
+          <div class="role">The universal 1px hairline.</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="n">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="lab">Playfair + Inter</span>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">Playfair Display 400 · sentence case</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 84px; line-height: 1.05">Considered.</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">h2</div>
+          <div class="m">Playfair Display 400 · slide headline</div>
+        </div>
+        <div class="spec"><span class="serif" style="font-size: 52px">Drawn in one line</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Inter 400 · line 1.6 · warm gray</div>
+        </div>
+        <div class="spec">
+          <p style="font-size: 18px; line-height: 1.6; max-width: 680px; color: var(--gray)">
+            Inter carries every paragraph in warm gray — readable, recessive, never competing with
+            the serif statement above it.
+          </p>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">Inter 500 · 3px track · uppercase</div>
+        </div>
+        <div class="spec"><span class="label">Section · Eyebrow</span></div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">quote-mark</div>
+          <div class="m">Playfair Display 400 · 50% taupe</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 80px; color: var(--line)">&ldquo;</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="n">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="lab">1px Hairlines · No Shadow</span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s4">
+          <div class="cnote">Tracing-paper card</div>
+          <div class="c-card">
+            <div class="ic">I</div>
+            <div class="t">Hairline Border</div>
+            <div class="x">
+              1px taupe outline with a faint white-overlay fill that lets the canvas bleed through.
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Agenda rows</div>
+          <div class="agenda">
+            <div class="row">
+              <span class="num">01</span><span class="t">Restraint</span
+              ><span class="d">Stone on stone</span>
+            </div>
+            <div class="row">
+              <span class="num">02</span><span class="t">Geometry</span
+              ><span class="d">Compass arcs</span>
+            </div>
+            <div class="row" style="border-bottom: 0">
+              <span class="num">03</span><span class="t">Breathing</span
+              ><span class="d">Negative space</span>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Stats cluster</div>
+          <div class="stats">
+            <div class="st">
+              <div class="f">5</div>
+              <div class="l">Stones</div>
+            </div>
+            <div class="st">
+              <div class="f">1px</div>
+              <div class="l">Lines</div>
+            </div>
+            <div class="st">
+              <div class="f">0</div>
+              <div class="l">Shadows</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s5">
+          <div class="cnote">Timeline — 1px rule, no nodes</div>
+          <div class="timeline">
+            <div class="it">
+              <div class="y">Phase 1</div>
+              <div class="t">Survey</div>
+              <div class="x">Establish the stone canvas.</div>
+            </div>
+            <div class="it">
+              <div class="y">Phase 2</div>
+              <div class="t">Draft</div>
+              <div class="x">Lay the compass arcs.</div>
+            </div>
+            <div class="it">
+              <div class="y">Phase 3</div>
+              <div class="t">Frame</div>
+              <div class="x">Hairline the structure.</div>
+            </div>
+          </div>
+        </div>
+        <div class="s3">
+          <div class="cnote">Image placeholder</div>
+          <div class="imgph"><span>Visual Reference</span></div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Team frames</div>
+          <div class="team">
+            <div class="p">
+              <div class="ph">A</div>
+              <div class="nm">Avery</div>
+              <div class="ro">Editor</div>
+            </div>
+            <div class="p">
+              <div class="ph">M</div>
+              <div class="nm">Mori</div>
+              <div class="ro">Design</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="n">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="lab">True 16:9 · cqw Scaled</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· identity · compass ring · left</span></div>
+          <div class="frame tf1">
+            <div class="fgeo ring"></div>
+            <div class="body">
+              <div class="lab">Cartesian — Frame System</div>
+              <h3>Restraint, drawn in <em>one line.</em></h3>
+              <div class="sub">A quiet museum-catalog system in motion.</div>
+              <div class="ha"></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Agenda</b><span>· index · sparse list · left</span></div>
+          <div class="frame tf2">
+            <div class="body">
+              <div class="lab">Contents</div>
+              <h3>Four Considerations</h3>
+              <div class="row"><span class="nm">01</span><span class="t">On Measure</span></div>
+              <div class="row"><span class="nm">02</span><span class="t">On Margin</span></div>
+              <div class="row">
+                <span class="nm">03</span><span class="t">On the Single Line</span>
+              </div>
+              <div class="row" style="border-bottom: 0">
+                <span class="nm">04</span><span class="t">On Silence</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Pull Quote</b><span>· quote · compass ring · centered</span></div>
+          <div class="frame tf3">
+            <div class="fgeo ring dash"></div>
+            <div class="body">
+              <div class="qm">&ldquo;</div>
+              <div class="q">Nothing is bold.<br />Nothing is loud.</div>
+              <div class="at">— The System Voice</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Closing Plate</b><span>· closer · centered ring</span></div>
+          <div class="frame tf4">
+            <div class="fgeo ring"></div>
+            <div class="body">
+              <div class="lab">Cartesian</div>
+              <h3>Well-framed, <em>on stone.</em></h3>
+              <div class="ha"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="n">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="lab">Restraint</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>Use a single 1px taupe line for every separator — the hairline is the identity.</li>
+            <li>Set every Playfair headline at weight 400, in ink, sentence case.</li>
+            <li>Render labels in taupe, uppercase, 2–3px tracked.</li>
+            <li>Layer one or two compass rings (solid + dashed) at 20–50% behind content.</li>
+            <li>Let frames breathe — sparse, generous negative space.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>No populist accent color — no red, blue, green; stone and ink only.</li>
+            <li>No bold Playfair, no taupe headlines, no thick borders.</li>
+            <li>No shadows, elevated cards, or rounded rectangles (circles only).</li>
+            <li>Don't crowd the frame — packed layouts read as broken.</li>
+            <li>Never more than two geo decorations per frame.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--bg);
+        --cap-accent: var(--accent);
+        --cap-accent-2: var(--line);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 1px solid var(--cap-accent-2);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 3.4cqw;
+        line-height: 1.16;
+        letter-spacing: -0.01em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.06em;
+        border-bottom: 1px solid transparent;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: color-mix(in srgb, var(--cap-accent) 18%, var(--cap-canvas));
+        border-bottom: 1px solid var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed var(--line);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--sans);
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 0.95cqw;
+        color: var(--accent);
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="n">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="lab">Lower-third · Karaoke</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div
+              class="fgeo ring dash"
+              style="width: 30cqw; height: 30cqw; left: 8cqw; top: 10%; opacity: 0.3"
+            ></div>
+            <div class="bandline"></div>
+            <div class="bandtag">Caption Band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · marker cleared</span></div>
+          <div class="frame capdemo">
+            <div
+              class="fgeo ring"
+              style="
+                width: 34cqw;
+                height: 34cqw;
+                right: -8cqw;
+                top: 50%;
+                transform: translateY(-50%);
+                opacity: 0.28;
+              "
+            ></div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Cartesian</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#EDE8E0" />
+        <circle cx="68" cy="50" r="30" fill="none" stroke="#B8B0A4" />
+        <circle cx="68" cy="50" r="20" fill="none" stroke="#B8B0A4" stroke-dasharray="3 3" />
+        <rect x="16" y="44" width="40" height="5" fill="#1A1A1A" />
+        <rect x="16" y="56" width="22" height="2" fill="#8A8178" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/FRAME.md
new file mode 100644
index 0000000..af52eec
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/FRAME.md
@@ -0,0 +1,265 @@
+---
+version: alpha
+name: Cobalt Grid — Frame (video / frame layer)
+description: >
+  Video-first companion to Cobalt Grid's design.md. The unit is the frame (1920×1080). Atoms
+  are identical and sacred — warm cream paper, electric cobalt ink (the only ink), the permanent
+  graph-paper grid, Newsreader serif 400 + Hanken Grotesk + DM Mono, the top/bottom cobalt
+  hairlines, and the pixel-glitch + QR-block signatures. Composition, frame scale, and
+  aspect-ratio behavior are rewritten for the frame. Motion is 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:
+  paper: "#F0EBDE"
+  paper-2: "#E6E0CE"
+  ink: "#1F2BE0"
+  ink-soft: "#5560E5"
+  grid: "rgba(31,43,224,0.10)"
+  ink-faint: "rgba(31,43,224,0.18)"
+
+typography:
+  # — reading ramp —
+  body:        { fontFamily: "Hanken Grotesk", cqw: 0.83, weight: 400, lineHeight: 1.5 }
+  body-lede:   { fontFamily: "Hanken Grotesk", cqw: 0.95, weight: 400, lineHeight: 1.5 }
+  micro:       { fontFamily: "Hanken Grotesk", px: 13, weight: 600, tracking: "0.16em", upper: true }
+  micro-strong:{ fontFamily: "Hanken Grotesk", px: 16, weight: 600, tracking: "0.18em", upper: true }
+  mono-tag:    { fontFamily: "DM Mono", cqw: 0.78, weight: 400, tracking: "0.05em" }
+  mono-chrome: { fontFamily: "DM Mono", px: 13, weight: 400, tracking: "0.06em" }
+  # — display / hero ramp (Newsreader 400, negative tracking) —
+  table-name:  { fontFamily: "Newsreader", cqw: 1.5, weight: 400, lineHeight: 1.15 }
+  row-headline:{ fontFamily: "Newsreader", cqw: 2.1, weight: 400, lineHeight: 1.05 }
+  ed-callout:  { fontFamily: "Newsreader", cqw: 2.6, weight: 400, lineHeight: 1.1, italic: true }
+  headline:    { fontFamily: "Newsreader", cqw: 4.6, weight: 400, lineHeight: 0.95 }
+  headline-index:{ fontFamily: "Newsreader", cqw: 5.0, weight: 400, lineHeight: 0.95 }
+  display-quote:{ fontFamily: "Newsreader", cqw: 5.7, weight: 400, lineHeight: 1.05, tracking: "-0.005em" }
+  display-chapter:{ fontFamily: "Newsreader", cqw: 6.8, weight: 400, lineHeight: 1.0, tracking: "-0.005em" }
+  display-closing:{ fontFamily: "Newsreader", cqw: 9.4, weight: 400, lineHeight: 0.96, tracking: "-0.005em" }
+  display-hero:{ fontFamily: "Newsreader", cqw: 10.4, weight: 400, lineHeight: 0.9, tracking: "-0.008em" }
+  vbig-numeral:{ fontFamily: "Newsreader", cqw: 12.5, weight: 400, lineHeight: 0.9, tracking: "-0.015em" }
+
+spacing:
+  edge: "4cqw"          # standard frame edge inset (~80px@1920)
+  pad-top: "7cqw"
+  pad-bottom: "6cqw"
+  gap-md: "2cqw"
+
+components:
+  graph-grid:
+    backgroundImage: "linear-gradient grid, ~2cqw cells, 10% {colors.ink} ({colors.grid})"
+    placement: "behind EVERY frame on the ground"
+    description: "Permanent graph-paper grid — never disabled; the canvas tone."
+  hairlines:
+    rule: "0.12cqw solid {colors.ink}"
+    placement: "≈3cqw from top + bottom, inset {spacing.edge}"
+    description: "Two persistent cobalt rules framing every composition."
+  page-chrome:
+    typography: "{typography.pagenum}"
+    color: "{colors.ink}"
+    placement: "page number bottom-right, nav/meta hint bottom-left, above the bottom hairline"
+    description: "The only persistent chrome."
+  pixel-glitch:
+    backgroundColor: "{colors.paper}"
+    fill: "repeating-linear-gradient(90deg, {colors.ink} 0 2px, transparent 2px 8px)"
+    size: "14–30cqw wide, full height, stair-stepped"
+    placement: "right on cover/data, left on chapter/colophon; z above grid, below headline"
+    description: "Stair-stepped scanline column. Decorative."
+  qr-block:
+    backgroundColor: "{colors.paper}"
+    cells: "8×8, {colors.ink} on / {colors.grid} off"
+    size: "3–9cqw square"
+    shadow: "0 0 0 0.12cqw {colors.paper} (anti-shadow for readability, not elevation)"
+    description: "QR mosaic patch — corner punctuation."
+  topbar-rule:
+    typography: "{typography.headline-index} + {typography.mono-tag}"
+    borderBottom: "0.12cqw solid {colors.ink}"
+    description: "Section header on index/data/table frames."
+  ledger-row:
+    layout: "grid: mono num · Newsreader name · Hanken desc · mono delta"
+    borderBottom: "0.06cqw solid {colors.ink-faint} (header 0.12cqw solid {colors.ink})"
+    typography: "{typography.mono-tag} + {typography.table-name} + {typography.body}"
+    description: "Dense matrix row with ↑/↓/— delta."
+  pixel-stack-bar:
+    cells: "column-reverse, {colors.grid} off / {colors.ink} on"
+    baseline: "0.12cqw solid {colors.ink} + {typography.mono-tick} ticks"
+    description: "Data as grid-unit cells; echoes the glitch."
+  vstack-label:
+    typography: "{typography.mono-tick}"
+    transform: "writing-mode: vertical-rl"
+    description: "Catalogue chrome along a frame edge."
+---
+
+# Cobalt Grid — Frame (video / frame layer)
+
+## Overview
+
+Cobalt Grid at frame scale is a **two-color risograph trend-report** — warm cream paper, electric
+cobalt ink, and a **permanent graph-paper grid** behind every frame. Cobalt is the _only_ ink:
+headlines, body, rules, the grid, the pixel-glitch decoration, the QR patches. There is no accent
+color and no second surface.
+
+The voice is a three-face conversation: **Newsreader** serif at weight 400 (size, not weight,
+makes hierarchy) carries every display and headline; **Hanken Grotesk** carries body and
+uppercase tracked labels; **DM Mono** carries all chrome — page numbers, tags, ticks, vertical
+stacks. Every frame is framed by top + bottom cobalt hairlines; declarative frames carry the
+**pixel-glitch column** and a **QR-block** patch.
+
+**Key characteristics at frame scale:**
+
+- **Strictly two-color** — cream paper + cobalt ink; no accent, no second surface.
+- **Permanent ~2cqw graph-paper grid** (10% cobalt) behind every frame; cannot be disabled.
+- **Top + bottom 1.5px cobalt hairlines** frame every composition, inset by `edge`.
+- **Newsreader 400** for all display (negative tracking); **Hanken 600** uppercase 0.16em labels; **DM Mono** chrome.
+- **Pixel-glitch column + QR-block** as the signature decorative patches on declarative frames.
+- **Pixel-stack bars** render data as grid-unit cells (cobalt on / 10% off).
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one Newsreader element dominates at **3–6× its nearest neighbor** (`display-hero`/`vbig-numeral`); hierarchy is size, never weight.
+- **Silence** — declarative frames (cover, chapter, quote, colophon) read **45–60% empty** with the grid showing; the **index ledger and data frame are the one dense exception** (density via quiet repetition, not richness).
+- **Restraint** — **two-color only** (cream + cobalt, never a second hue); one pixel-glitch column and at most one QR-block per declarative frame.
+- **Reference** — aim at a **WIRED Japan / Shift two-color risograph monograph**; failure looks like a **colorful dashboard with a second accent hue**.
+
+- **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:** `edge` (4cqw) inset; hairlines + page chrome live on the safe line.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size` AND carries
+the graph-paper `background-image`; ALL frame-relative units are `cqw`/`cqh` against it — never
+`vw`. The grid `background-size` is `~2cqw 2cqw` so cell density holds at any render size.
+
+## Colors
+
+Tokens identical to the source. `{colors.paper}` is the ground; `{colors.ink}` cobalt is the only
+ink (type, rules, grid lines, glitch, QR). `{colors.ink-soft}` is a secondary cobalt for editorial
+subtitles only; `{colors.grid}` (10%) is the permanent grid + chart "off" cells; `{colors.ink-faint}`
+(18%) is faint row dividers. **Never a second hue** — emphasis comes from size, from switching
+Hanken→Newsreader, from a mono delta arrow, or from opacity, never from color.
+
+## Typography
+
+Two ramps. The **reading ramp** (Hanken body 0.83cqw, mono chrome in px) carries copy + labels;
+the **display/hero ramp** (Newsreader `headline` 4.6cqw → `vbig-numeral` 12.5cqw) carries every
+statement and figure.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; mono chrome (px) is colophon only.
+- **Fit-to-measure:** size the headline to its line length. Cap the block at **≤ 78cqw**; ≤3 words → `display-hero`/`vbig-numeral`; 4–6 → `display-chapter`; 7+ → `headline`.
+- **Newsreader at 400 only**, in cobalt, with negative tracking (hero −0.008em, numeral −0.015em). **Hanken labels uppercase, 0.16–0.18em.** **DM Mono 0.04–0.08em.** No bold serif.
+
+## Depth & Surface
+
+Flat. Depth is structural only:
+
+- **1.5px cobalt rules** — slide hairlines, topbar rule, chart baseline.
+- **1px ink-faint dividers** — dense list / ledger rows.
+- **The graph-paper grid** — measured-plane tone behind everything.
+- **Pixel-glitch + QR** — texture and graphic punctuation, no z-axis.
+
+**Ceiling:** no drop shadow (the QR's 1.5px paper outset is an anti-shadow for readability, not elevation), no gradient, no rounded corner, no second color.
+
+## Shapes
+
+- **0 radius everywhere** — frames, ledger rows, QR cells, glitch blocks, charts. Zero circular elements; this squareness is part of the identity.
+
+## Components
+
+- **graph-grid / hairlines / page-chrome** — the permanent frame furniture, inherited by every composition.
+- **pixel-glitch** (edge column) + **qr-block** (corner patch) — the signature decoration on declarative frames.
+- **topbar-rule** — the index/data/table section header. **ledger-row** — dense matrix row with delta arrows.
+- **pixel-stack-bar** — data as grid-unit cells. **vstack-label** — vertical mono catalogue chrome.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> The grid + hairlines are present on every frame. Choose density by type: declarative = sparse, index/data = dense.
+
+### 1 · Hero Cover (identity · move: serif + glitch · left)
+
+**Ground** paper + grid, hairlines. **Composes** pixel-glitch (right, ~26cqw), qr-block (top-right), display-hero, ed-callout. **Focal** a 1–2 line `display-hero` Newsreader headline in cobalt, left-anchored, with an italic `ed-callout` subtitle in `{colors.ink-soft}`. **Chrome** Hanken kicker; mono meta top + page number. **Accent** none (cobalt is the only ink). **Silence** ~45% paper. **Fixed** Newsreader 400, glitch + QR present, grid + hairlines. **Free** title, glitch step pattern, QR placement. **Density** sparse.
+
+### 2 · Index Ledger (catalog · move: dense matrix · left — the dense frame)
+
+**Ground** paper + grid, hairlines, `pad-top`/`pad-bottom`. **Composes** topbar-rule, ledger-rows. **Focal** a topbar (`headline-index` + mono lab-tag, 1.5px rule) over 4–6 ledger rows (mono num · Newsreader name · Hanken desc), ink-faint dividers. **Chrome** page number. **Accent** mono delta arrows. **Silence** tight — the density exception (the grid wants filling). **Fixed** 1.5px topbar rule, 1px ink-faint dividers, Newsreader names. **Free** rows, lab-tag, deltas. **Density** dense-exception.
+
+### 3 · Chapter Opener (section · move: scale · sparse · left)
+
+**Ground** paper + grid, hairlines. **Composes** pixel-glitch (left, ~14cqw, low opacity), mono index, display-chapter, body-lede. **Focal** a `display-chapter` Newsreader title, with a small mono `CHAPTER NN` index above and an optional Hanken lede ≤42cqw. **Accent** none. **Silence** ~60% — let the grid breathe. **Fixed** Newsreader 400, glitch low-opacity, grid showing. **Free** title, lede, glitch side. **Density** sparse.
+
+### 4 · Data Frame (chart · move: pixel-stack · left)
+
+**Ground** paper + grid, hairlines, `pad-top`. **Composes** topbar-rule, pixel-stack-bar row. **Focal** a row of 6–8 pixel-stack bars (cobalt on / 10% off) over a 1.5px cobalt baseline with mono ticks. **Chrome** topbar headline + mono fig-tag; page number. **Accent** none — data is cobalt cells. **Silence** moderate. **Fixed** grid-unit cells, cobalt baseline, mono ticks. **Free** bar values (from script), tick labels. **Density** standard/dense.
+
+### 5 · Manifesto / Quote (quote · move: centered statement · sparse)
+
+**Ground** paper + grid, hairlines. **Composes** display-quote (or display-manifesto), attribution rule, optional compact glitch. **Focal** a 2–3 line Newsreader pull in cobalt, with a Hanken kicker above and a 1px cobalt attribution rule + mono byline beneath. **Accent** none. **Silence** ~55% — deliberately open. **Fixed** Newsreader 400, attribution rule, grid showing. **Free** quote, byline. **Density** sparse.
+
+### 6 · Colophon (closer · move: right-aligned close · sparse)
+
+**Ground** paper + grid, hairlines. **Composes** pixel-glitch (left edge, mirroring the cover), display-closing, mono credit columns. **Focal** a right-aligned `display-closing` Newsreader title with a Hanken kicker above. **Chrome** 3–4 column mono credit grid at the foot; page number. **Accent** none. **Silence** ~50%. **Fixed** glitch on left, Newsreader 400. **Free** closing line, credits. **Density** sparse.
+
+## Composition Rules
+
+### Do
+
+- Keep the **graph-paper grid + top/bottom hairlines** on every frame — they are the system.
+- Set **Newsreader at 400 in cobalt**; make hierarchy with size, not weight; negative-track display.
+- Track **Hanken labels uppercase 0.16em**; **DM Mono chrome 0.04–0.08em**.
+- Render data as **pixel-stack cells** (cobalt on / 10% off); echo the glitch language.
+- Use the **pixel-glitch column + QR patch** on declarative frames (cover, chapter, quote, colophon).
+- Lean: declarative frames sparse and breathing; index/data dense. Vary anchor (left for index/chapter, centered for quote/closer).
+
+### Don't
+
+- Don't introduce a second ink color — cream + cobalt only.
+- Don't bold Newsreader, round any corner, or add a drop shadow (QR outset is an anti-shadow only).
+- Don't disable the grid or suppress the hairlines.
+- Don't crowd chapter / quote / colophon — those let the grid show.
+- Don't blow a serif headline edge-to-edge — fit to measure.
+
+## Aspect-Ratio Behavior
+
+| Treatment         | 16:9                        | 9:16                                 | 1:1                          |
+| ----------------- | --------------------------- | ------------------------------------ | ---------------------------- |
+| Hero Cover        | headline left, glitch right | headline top, glitch full-width band | headline upper, glitch lower |
+| Index Ledger      | topbar + rows               | topbar + fewer rows                  | 2-col compresses to 1        |
+| Chapter Opener    | title left, glitch left     | title top, glitch side               | centered title               |
+| Data Frame        | 6–8 bars                    | 4–5 bars taller                      | square chart                 |
+| Manifesto / Quote | centered pull               | centered, taller                     | centered                     |
+| Colophon          | right-aligned, glitch left  | stacked, glitch top                  | centered close               |
+
+Grid + hairlines hold on the short edge for every ratio; re-step display so no load-bearing line
+drops below 1.4cqw. Mono chrome stays Latin/digit-only.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Trend names, signals, and figures are content; the system supplies the grid and chrome.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, deltas, dates, or signal counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `↑ —`. Pixel-stack bar heights and ledger deltas especially carry placeholders until the
+script supplies values. Mono catalogue ordinals (001, 002…) are decorative and may be sequential.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one Newsreader element dominates at 3–5× its neighbor.
+- **Silence** — declarative frames 45–60% empty; only index/data run dense.
+- **Two-color** — cream + cobalt only; no second hue anywhere.
+- **Furniture** — grid present, top/bottom hairlines present, page chrome above the hairline.
+- **Type** — Newsreader 400 negative-tracked, fit-to-measure; Hanken labels 0.16em; ≥1.4cqw floor.
+- **Depth** — 0 shadow (QR outset excepted), 0 rounded corner.
+- **Anchor** — left on index/chapter/cover, centered on quote/closer; no 3 consecutive frames share an anchor.
+- **Fabrication** — every numeral/delta traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the 280ms cross-fade in the source is a deck mechanic.
+- **Pixel-glitch is rendered in CSS here** (stacked scanline blocks) rather than the source's inline SVG, to keep the showcase SVG-free; fidelity is preserved.
+- **Three Google Fonts** (Newsreader, Hanken Grotesk, DM Mono); CJK pairing (Noto Serif SC 700/400) carries over from the source.
+- **9:16 / 1:1 are guidance**; verify the legibility floor and grid density per ratio.
+- The QR mosaic and glitch step patterns are hand-authored; there is no generative layer.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/caption-skin.html
new file mode 100644
index 0000000..4690790
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/caption-skin.html
@@ -0,0 +1,237 @@
+<!--
+  Cobalt Grid — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a cobalt 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 cream-paper card carrying the permanent graph-paper grid behind the line,
+  framed by top + bottom 1.5px cobalt hairlines (cobalt's signature frame furniture) —
+  square corners, NO drop shadow (cobalt's depth is structural and flat, never cast).
+  Newsreader serif 400, sentence case, cobalt glyphs. Upcoming words sit in faint
+  cobalt; the current word is a hard COBALT FLAT BLOCK — a risograph knockout: a solid
+  cobalt fill (box-shadow spread = a square block, no blur, no layout shift) with the
+  cream paper reading on top. Spoken words settle to solid cobalt ink, the block cleared.
+  Strictly two-color throughout — cream + cobalt, never a second hue.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 cream card — graph-paper grid behind the line + top/bottom 1.5px cobalt
+     hairlines (cobalt's frame furniture), square corners, NO drop shadow */
+  .caption-pill {
+    position: relative;
+    max-width: 78%;
+    padding: 20px 44px 24px;
+    background: var(--cap-canvas, #f0ebde);
+    background-image:
+      linear-gradient(
+        to right,
+        color-mix(in srgb, var(--cap-ink, #1f2be0) 10%, transparent) 1px,
+        transparent 1px
+      ),
+      linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--cap-ink, #1f2be0) 10%, transparent) 1px,
+        transparent 1px
+      );
+    background-size: 16px 16px;
+    border-top: 1.5px solid var(--cap-ink, #1f2be0);
+    border-bottom: 1.5px solid var(--cap-ink, #1f2be0);
+    border-radius: 0;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.1em 0.34em;
+    font-family: var(--font-display, "Newsreader"), Georgia, serif;
+    font-weight: 400;
+    font-size: clamp(40px, 4.4vw, 58px);
+    line-height: 1.16;
+    letter-spacing: -0.01em;
+  }
+
+  /* upcoming — faint cobalt, no block */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.06em;
+    color: color-mix(in srgb, var(--cap-ink, #1f2be0) 42%, var(--cap-canvas, #f0ebde));
+  }
+  /* current word — THE cobalt flat block (risograph knockout): a solid cobalt fill
+     via box-shadow spread = a hard square block w/o layout shift, no blur; the cream
+     paper reads on top */
+  .caption-word.is-active {
+    color: var(--cap-canvas, #f0ebde);
+    background: var(--cap-ink, #1f2be0);
+    box-shadow: 0 0 0 0.06em var(--cap-ink, #1f2be0);
+  }
+  /* already spoken — solid cobalt ink, block cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #1f2be0);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — Newsreader italic, cobalt's only display inflection */
+  .caption-word.cap-brand {
+    font-style: italic;
+  }
+  /* numerals / data — the body sans voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Hanken Grotesk"), ui-monospace, monospace;
+    color: color-mix(in srgb, var(--cap-ink, #1f2be0) 72%, var(--cap-canvas, #f0ebde));
+  }
+  /* emphasis — a cobalt hairline underline (no second hue; emphasis is the ink) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--cap-accent, #5560e5);
+    text-underline-offset: 0.1em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.985 }, { scale: 1, duration: 0.1, ease: "power3.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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/frame-showcase.html
new file mode 100644
index 0000000..d944988
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/cobalt-grid/frame-showcase.html
@@ -0,0 +1,1468 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Cobalt Grid</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&family=Hanken+Grotesk:wght@400;600&family=DM+Mono:wght@400&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --paper: #f0ebde;
+        --paper-2: #e6e0ce;
+        --ink: #1f2be0;
+        --ink-soft: #5560e5;
+        --grid: rgba(31, 43, 224, 0.1);
+        --ink-faint: rgba(31, 43, 224, 0.18);
+        --serif: "Newsreader", Georgia, serif;
+        --sans: "Hanken Grotesk", sans-serif;
+        --mono: "DM Mono", ui-monospace, monospace;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0c0c14;
+      }
+      body {
+        background: var(--paper);
+        background-image:
+          linear-gradient(to right, var(--grid) 1px, transparent 1px),
+          linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
+        background-size: 40px 40px;
+        color: var(--ink);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        font-weight: 400;
+      }
+      .micro {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+      }
+      .mono {
+        font-family: var(--mono);
+        letter-spacing: 0.05em;
+      }
+
+      section {
+        padding: 110px 80px;
+        position: relative;
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 20px;
+        border-bottom: 1.5px solid var(--ink);
+        padding-bottom: 16px;
+        margin-bottom: 56px;
+      }
+      .sec-head .tag {
+        font-family: var(--mono);
+        font-size: 13px;
+        letter-spacing: 0.05em;
+      }
+      .sec-head h2 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 54px;
+        line-height: 0.95;
+        letter-spacing: -0.01em;
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+      .sec-head .lab {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 12px;
+      }
+
+      /* pixel-glitch column (CSS, stair-stepped scanline blocks) */
+      .glitch {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 0;
+        pointer-events: none;
+      }
+      .glitch .step {
+        background-image: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 8px);
+        background-color: var(--paper);
+      }
+      /* QR block */
+      .qr {
+        display: grid;
+        grid-template-columns: repeat(8, 1fr);
+        grid-template-rows: repeat(8, 1fr);
+        gap: 1.5px;
+        background: var(--paper);
+        padding: 4px;
+        box-shadow: 0 0 0 1.5px var(--paper);
+      }
+      .qr i {
+        background: var(--grid);
+      }
+      .qr i.on {
+        background: var(--ink);
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        padding: 0;
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+      .cover .hair-t {
+        position: absolute;
+        left: 80px;
+        right: 80px;
+        top: 28px;
+        height: 1.5px;
+        background: var(--ink);
+      }
+      .cover .hair-b {
+        position: absolute;
+        left: 80px;
+        right: 80px;
+        bottom: 30px;
+        height: 1.5px;
+        background: var(--ink);
+      }
+      .cover .top {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 64px 80px 0;
+      }
+      .cover .top .lab {
+        font-family: var(--mono);
+        font-size: 14px;
+        letter-spacing: 0.05em;
+      }
+      .cover .stage {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 80px;
+        position: relative;
+        z-index: 4;
+      }
+      .cover .kick {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        font-size: 15px;
+        margin-bottom: 28px;
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: clamp(58px, 8.2vw, 142px);
+        line-height: 0.92;
+        letter-spacing: -0.01em;
+        max-width: 66%;
+      }
+      .cover .ed {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-style: italic;
+        font-size: clamp(22px, 2.5vw, 38px);
+        line-height: 1.15;
+        color: var(--ink-soft);
+        margin-top: 22px;
+        max-width: 52%;
+      }
+      .cover .foot {
+        display: flex;
+        justify-content: space-between;
+        padding: 0 80px 64px;
+        font-family: var(--mono);
+        font-size: 13px;
+        letter-spacing: 0.05em;
+        position: relative;
+        z-index: 4;
+      }
+      .cover .glitch {
+        right: 0;
+        width: 30vw;
+        opacity: 0.7;
+        z-index: 2;
+      }
+      .cover .qrwrap {
+        position: absolute;
+        top: 124px;
+        right: 80px;
+        width: 88px;
+        height: 88px;
+        z-index: 5;
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0;
+        border: 1.5px solid var(--ink);
+      }
+      .sw {
+        border-right: 1.5px solid var(--ink);
+        border-bottom: 1.5px solid var(--ink);
+      }
+      .sw:nth-child(3n) {
+        border-right: 0;
+      }
+      .sw:nth-child(n + 4) {
+        border-bottom: 0;
+      }
+      .sw .chip {
+        height: 140px;
+        border-bottom: 1.5px solid var(--ink);
+      }
+      .sw .meta {
+        padding: 18px 22px;
+        background: var(--paper);
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-size: 28px;
+        line-height: 1;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 12px;
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--ink);
+        margin-top: 10px;
+        font-family: var(--sans);
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+        border-bottom: 1px solid var(--ink-faint);
+        align-items: center;
+        padding: 8px 0;
+      }
+      .type-row .lbl .tok {
+        font-family: var(--mono);
+        font-size: 13px;
+      }
+      .type-row .lbl .m {
+        font-family: var(--sans);
+        font-size: 11px;
+        color: var(--ink-soft);
+        margin-top: 6px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        padding: 20px 0 20px 36px;
+        border-left: 1px solid var(--ink-faint);
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 12px;
+        margin-bottom: 18px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 36px;
+        margin-bottom: 48px;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      /* topbar */
+      .topbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        border-bottom: 1.5px solid var(--ink);
+        padding-bottom: 14px;
+      }
+      .topbar .h {
+        font-family: var(--serif);
+        font-size: 40px;
+        line-height: 1;
+      }
+      .topbar .t {
+        font-family: var(--mono);
+        font-size: 13px;
+      }
+      /* ledger */
+      .ledger {
+        margin-top: 8px;
+      }
+      .lrow {
+        display: grid;
+        grid-template-columns: 64px 0.7fr 1.5fr 0.6fr;
+        gap: 24px;
+        padding: 16px 0;
+        border-bottom: 1px solid var(--ink-faint);
+        align-items: baseline;
+      }
+      .lrow.head {
+        border-bottom: 1.5px solid var(--ink);
+      }
+      .lrow .num {
+        font-family: var(--mono);
+        font-size: 14px;
+      }
+      .lrow .nm {
+        font-family: var(--serif);
+        font-size: 24px;
+        line-height: 1.1;
+      }
+      .lrow .ds {
+        font-family: var(--sans);
+        font-size: 14px;
+        color: var(--ink);
+        line-height: 1.45;
+      }
+      .lrow .dl {
+        font-family: var(--mono);
+        font-size: 14px;
+        text-align: right;
+      }
+      .lrow.head span {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+      }
+      /* pixel stack chart */
+      .pchart {
+        display: flex;
+        align-items: flex-end;
+        gap: 14px;
+        height: 200px;
+        border-bottom: 1.5px solid var(--ink);
+        padding-bottom: 0;
+      }
+      .pstack {
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 3px;
+        flex: 1;
+      }
+      .pstack .cell {
+        height: 12px;
+        background: var(--grid);
+      }
+      .pstack .cell.on {
+        background: var(--ink);
+      }
+      .pticks {
+        display: flex;
+        gap: 14px;
+        margin-top: 10px;
+      }
+      .pticks span {
+        flex: 1;
+        text-align: center;
+        font-family: var(--mono);
+        font-size: 12px;
+      }
+      /* vertical stack labels */
+      .vstack {
+        display: flex;
+        gap: 28px;
+        font-family: var(--mono);
+        font-size: 14px;
+      }
+      .vstack span {
+        writing-mode: vertical-rl;
+        text-orientation: mixed;
+        letter-spacing: 0.04em;
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+        color: var(--ink-soft);
+      }
+      .fw .flabel b {
+        color: var(--ink);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--paper);
+        background-image:
+          linear-gradient(to right, var(--grid) 1px, transparent 1px),
+          linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
+        background-size: 2cqw 2cqw;
+        box-shadow: 0 0 0 1px var(--ink-faint);
+      }
+      .frame .ht {
+        position: absolute;
+        left: 4cqw;
+        right: 4cqw;
+        top: 3cqw;
+        height: 0.12cqw;
+        background: var(--ink);
+        z-index: 5;
+      }
+      .frame .hb {
+        position: absolute;
+        left: 4cqw;
+        right: 4cqw;
+        bottom: 3cqw;
+        height: 0.12cqw;
+        background: var(--ink);
+        z-index: 5;
+      }
+      .frame .pg {
+        position: absolute;
+        right: 4cqw;
+        bottom: 4cqw;
+        font-family: var(--mono);
+        font-size: 1cqw;
+        z-index: 6;
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 4;
+      }
+
+      /* f1 cover */
+      .cf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .cf1 .kick {
+        font-family: var(--sans);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.2cqw;
+        font-size: 1.1cqw;
+        margin-bottom: 2cqw;
+      }
+      .cf1 h3 {
+        font-family: var(--serif);
+        font-size: 11cqw;
+        line-height: 0.9;
+        letter-spacing: -0.1cqw;
+        max-width: 62cqw;
+      }
+      .cf1 .ed {
+        font-family: var(--serif);
+        font-style: italic;
+        font-size: 2.6cqw;
+        color: var(--ink-soft);
+        margin-top: 1.6cqw;
+        max-width: 50cqw;
+      }
+      .cf1 .glitch {
+        right: 0;
+        width: 26cqw;
+        z-index: 2;
+        opacity: 0.7;
+      }
+      .cf1 .qr {
+        position: absolute;
+        top: 6cqw;
+        right: 5cqw;
+        width: 9cqw;
+        height: 9cqw;
+        z-index: 6;
+        gap: 0.2cqw;
+        padding: 0.4cqw;
+      }
+
+      /* f2 index ledger (dense) */
+      .cf2 .body {
+        padding: 7cqw 5cqw 6cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .cf2 .tb {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        border-bottom: 0.12cqw solid var(--ink);
+        padding-bottom: 1cqw;
+        margin-bottom: 2.2cqw;
+      }
+      .cf2 .tb .h {
+        font-family: var(--serif);
+        font-size: 3.8cqw;
+        line-height: 1;
+        white-space: nowrap;
+      }
+      .cf2 .tb .t {
+        font-family: var(--mono);
+        font-size: 1.1cqw;
+      }
+      .cf2 .r {
+        display: grid;
+        grid-template-columns: 5cqw 1fr;
+        gap: 2cqw;
+        padding: 1.1cqw 0;
+        border-bottom: 0.06cqw solid var(--ink-faint);
+        align-items: baseline;
+      }
+      .cf2 .r .n {
+        font-family: var(--mono);
+        font-size: 1.2cqw;
+      }
+      .cf2 .r .nm {
+        font-family: var(--serif);
+        font-size: 2.4cqw;
+        line-height: 1;
+      }
+      .cf2 .r .dx {
+        font-family: var(--sans);
+        font-size: 1.1cqw;
+        color: var(--ink);
+        margin-top: 0.4cqw;
+        line-height: 1.4;
+      }
+
+      /* f3 chapter (sparse) */
+      .cf3 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 6cqw;
+      }
+      .cf3 .ix {
+        font-family: var(--mono);
+        font-size: 1.4cqw;
+        margin-bottom: 2cqw;
+      }
+      .cf3 h3 {
+        font-family: var(--serif);
+        font-size: 9cqw;
+        line-height: 0.98;
+        letter-spacing: -0.05cqw;
+      }
+      .cf3 .lede {
+        font-family: var(--sans);
+        font-size: 1.5cqw;
+        line-height: 1.5;
+        color: var(--ink);
+        max-width: 42cqw;
+        margin-top: 2.4cqw;
+      }
+      .cf3 .glitch {
+        left: 0;
+        width: 14cqw;
+        z-index: 2;
+        opacity: 0.5;
+      }
+
+      /* f4 data chart */
+      .cf4 .body {
+        padding: 7cqw 5cqw 6cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .cf4 .tb {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        border-bottom: 0.12cqw solid var(--ink);
+        padding-bottom: 1cqw;
+        margin-bottom: 2.4cqw;
+      }
+      .cf4 .tb .h {
+        font-family: var(--serif);
+        font-size: 4.2cqw;
+        line-height: 1;
+      }
+      .cf4 .tb .t {
+        font-family: var(--mono);
+        font-size: 1.1cqw;
+      }
+      .cf4 .chart {
+        display: flex;
+        align-items: flex-end;
+        gap: 1.4cqw;
+        flex: 1;
+        border-bottom: 0.12cqw solid var(--ink);
+      }
+      .cf4 .st {
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 0.4cqw;
+        flex: 1;
+      }
+      .cf4 .st .c {
+        height: 1.4cqw;
+        background: var(--grid);
+      }
+      .cf4 .st .c.on {
+        background: var(--ink);
+      }
+      .cf4 .tk {
+        display: flex;
+        gap: 1.4cqw;
+        margin-top: 1cqw;
+      }
+      .cf4 .tk span {
+        flex: 1;
+        text-align: center;
+        font-family: var(--mono);
+        font-size: 1cqw;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0;
+        border: 1.5px solid var(--ink);
+      }
+      .do-card {
+        padding: 40px;
+      }
+      .do-card.do {
+        border-right: 1.5px solid var(--ink);
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-size: 36px;
+        margin-bottom: 24px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-size: 15px;
+        line-height: 1.55;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 14px;
+        color: var(--ink);
+        font-family: var(--sans);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--mono);
+      }
+      .do-card.do li::before {
+        content: "+";
+      }
+      .do-card.dont li::before {
+        content: "\2715";
+        opacity: 0.55;
+      }
+
+      .foot {
+        padding: 56px 80px;
+        border-top: 1.5px solid var(--ink);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-size: 30px;
+      }
+      .foot .r {
+        font-family: var(--mono);
+        font-size: 13px;
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,700;1,400&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #f0ebde !important;
+        --secondary: #1f2be0 !important;
+        --tertiary: #e6e0ce !important;
+        --accent: #5560e5 !important;
+        --f-disp: "Newsreader", sans-serif !important;
+        --f-body: "Hanken Grotesk", sans-serif !important;
+        --paper: #f0ebde !important;
+        --paper-2: #e6e0ce !important;
+        --ink: #1f2be0 !important;
+        --ink-soft: #5560e5 !important;
+        --serif: "Newsreader", sans-serif !important;
+        --sans: "Hanken Grotesk", sans-serif !important;
+        --grid: rgba(31, 43, 224, 0.1) !important;
+        --ink-faint: rgba(31, 43, 224, 0.18) !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="hair-t"></div>
+      <div class="hair-b"></div>
+      <div class="glitch">
+        <div class="step" style="width: 60%; height: 18%; align-self: flex-end"></div>
+        <div class="step" style="width: 100%; height: 16%; align-self: flex-end"></div>
+        <div class="step" style="width: 44%; height: 14%; align-self: flex-end"></div>
+        <div class="step" style="width: 78%; height: 20%; align-self: flex-end"></div>
+        <div class="step" style="width: 34%; height: 12%; align-self: flex-end"></div>
+      </div>
+      <div class="qrwrap">
+        <div class="qr">
+          <i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+          ><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
+          ><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
+          ><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
+          ><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+          ><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
+          ><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
+          ><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i><i class="on"></i
+          ><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i><i class="on"></i><i></i
+          ><i></i><i class="on"></i><i></i><i class="on"></i><i class="on"></i>
+        </div>
+      </div>
+      <div class="top">
+        <span class="lab">COBALT GRID / TREND REPORT</span>
+        <span class="lab">VOL.01 — 2026</span>
+      </div>
+      <div class="stage">
+        <div class="kick">Two-Color Risograph Monograph</div>
+        <h1>The Grid Is the Canvas.</h1>
+        <div class="ed">
+          Cream paper, electric cobalt, and graph-paper drafting tone behind every frame.
+        </div>
+      </div>
+      <div class="foot">
+        <span>FRAME SYSTEM — NEWSREADER · HANKEN · DM MONO</span>
+        <span>01 / 06</span>
+      </div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="tag">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="lab">Strictly Two-Color</span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--paper)"></div>
+          <div class="meta">
+            <div class="name">Paper</div>
+            <div class="hex">#F0EBDE</div>
+            <div class="role">The canvas — warm newsprint cream.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="meta">
+            <div class="name">Ink (Cobalt)</div>
+            <div class="hex">#1F2BE0</div>
+            <div class="role">The only ink — type, rules, grid, decoration.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink-soft)"></div>
+          <div class="meta">
+            <div class="name">Ink Soft</div>
+            <div class="hex">#5560E5</div>
+            <div class="role">Secondary cobalt for editorial subtitles.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--paper-2)"></div>
+          <div class="meta">
+            <div class="name">Paper 2</div>
+            <div class="hex">#E6E0CE</div>
+            <div class="role">Deeper cream for subtle region shifts.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="
+              background: var(--paper);
+              background-image:
+                linear-gradient(to right, var(--grid) 1px, transparent 1px),
+                linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
+              background-size: 22px 22px;
+            "
+          ></div>
+          <div class="meta">
+            <div class="name">Grid 10%</div>
+            <div class="hex">cobalt · .10</div>
+            <div class="role">Permanent graph paper + chart "off" cells.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="
+              background: var(--paper);
+              box-shadow:
+                inset 0 -1px 0 var(--ink-faint),
+                inset 0 60px 0 var(--ink-faint);
+            "
+          ></div>
+          <div class="meta">
+            <div class="name">Ink Faint 18%</div>
+            <div class="hex">cobalt · .18</div>
+            <div class="role">Faint row dividers in dense lists.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="tag">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="lab">Serif · Sans · Mono</span>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">display-hero</div>
+          <div class="m">Newsreader 400 · up to 18vh · -0.008em</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 104px; line-height: 0.9; letter-spacing: -0.01em"
+            >Trend Index</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">vbig-numeral</div>
+          <div class="m">Newsreader 400 · to 240px · -0.015em</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 120px; line-height: 0.9; letter-spacing: -0.02em"
+            >240</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">headline</div>
+          <div class="m">Newsreader 400 · section header</div>
+        </div>
+        <div class="spec"><span class="serif" style="font-size: 60px">The Cobalt Ledger</span></div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">body</div>
+          <div class="m">Hanken Grotesk 400 · line 1.5</div>
+        </div>
+        <div class="spec">
+          <p style="font-size: 16px; line-height: 1.5; max-width: 680px; font-family: var(--sans)">
+            Hanken Grotesk carries every body paragraph and supporting line — the quiet sans against
+            the serif statement.
+          </p>
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">micro</div>
+          <div class="m">Hanken 600 · 0.16em · uppercase</div>
+        </div>
+        <div class="spec">
+          <span class="micro" style="font-size: 14px">Section Label / Lab-Tag</span>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div class="lbl">
+          <div class="tok">mono-tag</div>
+          <div class="m">DM Mono 400 · 0.05em</div>
+        </div>
+        <div class="spec">
+          <span class="mono" style="font-size: 15px">CAT—001 · 2026.Q2 · ↑ 4.2</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="tag">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="lab">Flat · Structural Rules</span>
+      </div>
+
+      <div class="cgrid">
+        <div class="s7">
+          <div class="cnote">Topbar rule + ledger rows</div>
+          <div class="topbar">
+            <span class="h">Trend Ledger</span><span class="t">LAB—02 / N=08</span>
+          </div>
+          <div class="ledger">
+            <div class="lrow head">
+              <span>No.</span><span>Signal</span><span>Reading</span
+              ><span style="text-align: right">Δ</span>
+            </div>
+            <div class="lrow">
+              <span class="num">001</span><span class="nm">Risograph</span
+              ><span class="ds">Two-color print revival in editorial design.</span
+              ><span class="dl">↑ 4.2</span>
+            </div>
+            <div class="lrow">
+              <span class="num">002</span><span class="nm">Graph Tone</span
+              ><span class="ds">Drafting-paper grids as permanent canvas.</span
+              ><span class="dl">↑ 3.1</span>
+            </div>
+            <div class="lrow">
+              <span class="num">003</span><span class="nm">Pixel Glitch</span
+              ><span class="ds">Stair-stepped scanline decoration.</span
+              ><span class="dl" style="opacity: 0.6">— 0.0</span>
+            </div>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">Pixel-stack bar chart</div>
+          <div class="pchart">
+            <div class="pstack">
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+            </div>
+            <div class="pstack">
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell"></div>
+            </div>
+            <div class="pstack">
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+            </div>
+            <div class="pstack">
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+            </div>
+            <div class="pstack">
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+            </div>
+            <div class="pstack">
+              <div class="cell on"></div>
+              <div class="cell on"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+              <div class="cell"></div>
+            </div>
+          </div>
+          <div class="pticks">
+            <span>Q1</span><span>Q2</span><span>Q3</span><span>Q4</span><span>Q5</span
+            ><span>Q6</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s4">
+          <div class="cnote">QR-block patch</div>
+          <div class="qr" style="width: 120px; height: 120px">
+            <i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+            ><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
+            ><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
+            ><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
+            ><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+            ><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
+            ><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
+            ><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i><i class="on"></i
+            ><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i><i class="on"></i
+            ><i></i><i></i><i class="on"></i><i></i><i class="on"></i><i class="on"></i>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Pixel-glitch column</div>
+          <div style="position: relative; height: 140px; background: var(--paper-2)">
+            <div class="glitch" style="right: 0; width: 80%; opacity: 0.8">
+              <div class="step" style="width: 50%; height: 22%; align-self: flex-end"></div>
+              <div class="step" style="width: 90%; height: 20%; align-self: flex-end"></div>
+              <div class="step" style="width: 38%; height: 18%; align-self: flex-end"></div>
+              <div class="step" style="width: 70%; height: 24%; align-self: flex-end"></div>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Vertical-stack labels</div>
+          <div class="vstack" style="height: 140px">
+            <span>CATALOGUE · 2026</span><span>COBALT — GRID</span><span>EDITION No.01</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="tag">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="lab">True 16:9 · cqw Scaled</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Hero Cover</b><span>· identity · glitch + QR · left</span></div>
+          <div class="frame cf1">
+            <div class="ht"></div>
+            <div class="hb"></div>
+            <div class="glitch">
+              <div class="step" style="width: 55%; height: 18%; align-self: flex-end"></div>
+              <div class="step" style="width: 100%; height: 16%; align-self: flex-end"></div>
+              <div class="step" style="width: 40%; height: 14%; align-self: flex-end"></div>
+              <div class="step" style="width: 74%; height: 20%; align-self: flex-end"></div>
+            </div>
+            <div class="qr">
+              <i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+              ><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
+              ><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
+              ><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
+              ><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+              ><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
+              ><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
+              ><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i
+              ><i class="on"></i><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i
+              ><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i
+              ><i class="on"></i>
+            </div>
+            <div class="body">
+              <div class="kick">Trend Report</div>
+              <h3>The grid is the canvas.</h3>
+              <div class="ed">Cream + cobalt, drafting tone behind every frame.</div>
+            </div>
+            <div class="pg">01 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Index Ledger</b><span>· catalog · dense frame</span></div>
+          <div class="frame cf2">
+            <div class="ht"></div>
+            <div class="hb"></div>
+            <div class="body">
+              <div class="tb">
+                <span class="h">Six Signals</span><span class="t">LAB—02 / 2026</span>
+              </div>
+              <div class="r">
+                <span class="n">01</span>
+                <div>
+                  <div class="nm">Risograph Revival</div>
+                  <div class="dx">Two-color print as editorial register.</div>
+                </div>
+              </div>
+              <div class="r">
+                <span class="n">02</span>
+                <div>
+                  <div class="nm">Graph-Paper Tone</div>
+                  <div class="dx">Drafting grids as permanent canvas.</div>
+                </div>
+              </div>
+              <div class="r">
+                <span class="n">03</span>
+                <div>
+                  <div class="nm">Pixel Glitch</div>
+                  <div class="dx">Stair-stepped scanline decoration.</div>
+                </div>
+              </div>
+              <div class="r">
+                <span class="n">04</span>
+                <div>
+                  <div class="nm">QR Mosaic</div>
+                  <div class="dx">8×8 patches as graphic punctuation.</div>
+                </div>
+              </div>
+            </div>
+            <div class="pg">02 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Chapter Opener</b><span>· section · sparse · left</span></div>
+          <div class="frame cf3">
+            <div class="ht"></div>
+            <div class="hb"></div>
+            <div class="glitch">
+              <div class="step" style="width: 60%; height: 24%; align-self: flex-start"></div>
+              <div class="step" style="width: 100%; height: 20%; align-self: flex-start"></div>
+              <div class="step" style="width: 42%; height: 22%; align-self: flex-start"></div>
+            </div>
+            <div class="body">
+              <div class="ix">CHAPTER 02</div>
+              <h3>On Measure<br />&amp; Margin.</h3>
+              <div class="lede">
+                The grid wants to be filled — but the chapter opener lets it breathe.
+              </div>
+            </div>
+            <div class="pg">03 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Data Frame</b><span>· chart · pixel-stack</span></div>
+          <div class="frame cf4">
+            <div class="ht"></div>
+            <div class="hb"></div>
+            <div class="body">
+              <div class="tb">
+                <span class="h">Signal Strength</span><span class="t">FIG.04 / INDEX</span>
+              </div>
+              <div class="chart">
+                <div class="st">
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                </div>
+                <div class="st">
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c"></div>
+                </div>
+                <div class="st">
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                </div>
+                <div class="st">
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                </div>
+                <div class="st">
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                </div>
+                <div class="st">
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c on"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                  <div class="c"></div>
+                </div>
+              </div>
+              <div class="tk">
+                <span>01</span><span>02</span><span>03</span><span>04</span><span>05</span
+                ><span>06</span>
+              </div>
+            </div>
+            <div class="pg">04 / 06</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="tag">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="lab">Two-Color · Flat</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>Keep the graph-paper grid behind every frame — it is the canvas tone.</li>
+            <li>Frame every slide with top + bottom 1.5px cobalt hairlines.</li>
+            <li>Set Newsreader at weight 400 in cobalt; size, not weight, makes hierarchy.</li>
+            <li>Track Hanken labels uppercase at 0.16em; mono chrome at 0.05em.</li>
+            <li>Render data as pixel-stack cells — cobalt on / 10% off.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>Never introduce a second ink color — cream + cobalt only.</li>
+            <li>No bold Newsreader, no rounded corners, no drop shadows.</li>
+            <li>Don't disable the grid or suppress the hairlines.</li>
+            <li>Don't crowd chapter / quote / colophon — let the grid breathe.</li>
+            <li>Don't blow a serif headline edge-to-edge — fit to measure.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--paper);
+        --cap-accent: var(--ink-soft);
+        --cap-accent-2: var(--paper-2);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 7;
+      }
+      .capdemo .pill {
+        position: relative;
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        background-image:
+          linear-gradient(to right, var(--grid) 1px, transparent 1px),
+          linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
+        background-size: 1.2cqw 1.2cqw;
+        border-top: 0.16cqw solid var(--cap-ink);
+        border-bottom: 0.16cqw solid var(--cap-ink);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 3.4cqw;
+        line-height: 1.16;
+        letter-spacing: -0.01em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.06em;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      /* the cobalt flat block — risograph knockout: cobalt fill, cream paper on top */
+      .capdemo .w.active {
+        color: var(--cap-canvas);
+        background: var(--cap-ink);
+        box-shadow: 0 0 0 0.06em var(--cap-ink);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed var(--ink-faint);
+        z-index: 6;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 4cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-size: 0.95cqw;
+        letter-spacing: 0.04em;
+        color: var(--ink);
+        opacity: 0.5;
+        z-index: 7;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="tag">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="lab">Lower-third · Karaoke</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="ht"></div>
+            <div class="hb"></div>
+            <div class="glitch" style="right: 0; width: 16cqw; opacity: 0.5; z-index: 2">
+              <div class="step" style="width: 60%; height: 18%; align-self: flex-end"></div>
+              <div class="step" style="width: 100%; height: 16%; align-self: flex-end"></div>
+              <div class="step" style="width: 42%; height: 14%; align-self: flex-end"></div>
+            </div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pg">05 / 06</div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · block cleared</span></div>
+          <div class="frame capdemo">
+            <div class="ht"></div>
+            <div class="hb"></div>
+            <div
+              class="qr"
+              style="
+                position: absolute;
+                top: 6cqw;
+                right: 5cqw;
+                width: 7cqw;
+                height: 7cqw;
+                z-index: 6;
+                gap: 0.2cqw;
+                padding: 0.4cqw;
+              "
+            >
+              <i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+              ><i></i><i class="on"></i> <i></i><i class="on"></i><i></i><i class="on"></i
+              ><i class="on"></i><i></i><i class="on"></i><i></i> <i class="on"></i><i></i
+              ><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i> <i></i
+              ><i class="on"></i><i></i><i class="on"></i><i class="on"></i><i></i><i class="on"></i
+              ><i></i> <i class="on"></i><i></i><i class="on"></i><i></i><i class="on"></i><i></i
+              ><i class="on"></i><i></i> <i></i><i class="on"></i><i></i><i class="on"></i><i></i
+              ><i class="on"></i><i></i><i class="on"></i> <i class="on"></i><i></i
+              ><i class="on"></i><i class="on"></i><i></i><i class="on"></i><i></i><i></i> <i></i
+              ><i class="on"></i><i></i><i></i><i class="on"></i><i></i><i class="on"></i
+              ><i class="on"></i>
+            </div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+            <div class="pg">06 / 06</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Cobalt Grid</span>
+      <span class="r">FRAME SHOWCASE · ATOMS SACRED · COMPOSITION FREE</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#F0EBDE" />
+        <g stroke="#1F2BE0" stroke-opacity="0.25" stroke-width="1">
+          <line x1="0" y1="25" x2="100" y2="25" />
+          <line x1="0" y1="50" x2="100" y2="50" />
+          <line x1="0" y1="75" x2="100" y2="75" />
+          <line x1="25" y1="0" x2="25" y2="100" />
+          <line x1="50" y1="0" x2="50" y2="100" />
+          <line x1="75" y1="0" x2="75" y2="100" />
+        </g>
+        <rect x="20" y="40" width="44" height="11" fill="#1F2BE0" />
+        <rect x="70" y="20" width="14" height="14" fill="#1F2BE0" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/FRAME.md
new file mode 100644
index 0000000..e356fae
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/FRAME.md
@@ -0,0 +1,277 @@
+---
+version: alpha
+name: Code editorial — Frame (video / frame layer)
+description: >
+  Video-first companion to Code editorial'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."
+---
+
+# Code editorial — Frame (video / frame layer)
+
+## Overview
+
+Code editorial 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. Code editorial'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 skill's `references/motion.md`, not here.
+- **EB Garamond + Inter + JetBrains Mono ship as licensed local WOFF2 assets with this preset.** Copy the six files in this preset's `fonts/` folder (weights 400 + 700) into the project's `assets/fonts/` and add one `@font-face` per file, so Studio, snapshots, and renders resolve them offline without a first-run Google Fonts fetch. Nothing stages them for you. 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; add a real italic 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.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/caption-skin.html
new file mode 100644
index 0000000..89f43b4
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/caption-skin.html
@@ -0,0 +1,223 @@
+<!--
+  Code editorial — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a code-editorial 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 — code-editorial'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>
+
+<!-- the project's :root tokens go 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 (code-editorial'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>
+  // the scene-aware word groups + real duration go 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-400.woff2 b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-400.woff2
new file mode 100644
index 0000000..ffed311
Binary files /dev/null and b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-400.woff2 differ
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-700.woff2 b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-700.woff2
new file mode 100644
index 0000000..85d5209
Binary files /dev/null and b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/EBGaramond-700.woff2 differ
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-400.woff2 b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-400.woff2
new file mode 100644
index 0000000..f15b025
Binary files /dev/null and b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-400.woff2 differ
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-700.woff2 b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-700.woff2
new file mode 100644
index 0000000..a68fb10
Binary files /dev/null and b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/Inter-700.woff2 differ
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-400.woff2 b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-400.woff2
new file mode 100644
index 0000000..5858873
Binary files /dev/null and b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-400.woff2 differ
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-700.woff2 b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-700.woff2
new file mode 100644
index 0000000..3a4e333
Binary files /dev/null and b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/JetBrainsMono-700.woff2 differ
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-eb-garamond.txt b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-eb-garamond.txt
new file mode 100644
index 0000000..da3ca89
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-eb-garamond.txt
@@ -0,0 +1,93 @@
+Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12) EBGaramond-Italic[wght].ttf: Copyright 2017 The EB Garamond Project Authors (https://github.com/octaviopardo/EBGaramond12)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-inter.txt b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-inter.txt
new file mode 100644
index 0000000..40589da
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-inter.txt
@@ -0,0 +1,93 @@
+Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt
new file mode 100644
index 0000000..8f7ed67
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt
@@ -0,0 +1,93 @@
+Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/code-editorial/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/frame-showcase.html
new file mode 100644
index 0000000..e0a70ea
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/code-editorial/frame-showcase.html
@@ -0,0 +1,1438 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Code editorial</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --ink: #141413;
+        --cream: #faf9f5;
+        --tile: #efe9de;
+        --tile-strong: #ece3d4;
+        --coral: #cc785c;
+        --navy: #181715;
+        --navy-soft: #1f1e1b;
+        --navy-elev: #252320;
+        --teal: #5db8a6;
+        --amber: #e8a55a;
+        --ok: #5db872;
+        --warn: #c64545;
+        --serif: "EB Garamond", Georgia, serif;
+        --sans: "Inter", system-ui, sans-serif;
+        --mono: "JetBrains Mono", ui-monospace, monospace;
+        --hair: rgba(20, 20, 19, 0.12);
+        --hair-soft: rgba(20, 20, 19, 0.06);
+        --on-dark: rgba(250, 249, 245, 0.92);
+        --on-dark-soft: rgba(250, 249, 245, 0.58);
+        --shadow: 0 1px 3px rgba(20, 20, 19, 0.08), 0 4px 16px rgba(20, 20, 19, 0.04);
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0e0d0c;
+      }
+      body {
+        background: var(--cream);
+        color: var(--ink);
+        font-family: var(--sans);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        font-weight: 400;
+        letter-spacing: -0.02em;
+        line-height: 1;
+      }
+      .mono {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+      }
+      .spike {
+        color: var(--coral);
+      }
+
+      section {
+        padding: 110px 120px;
+        position: relative;
+      }
+      .topbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        border-bottom: 1px solid var(--hair);
+        padding-bottom: 18px;
+        margin-bottom: 56px;
+      }
+      .topbar .lbl {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 15px;
+        color: var(--coral);
+      }
+      .topbar h2 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 48px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        background: var(--cream);
+        color: var(--ink);
+        padding: 120px 140px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+      }
+      .cover .top {
+        position: absolute;
+        top: 64px;
+        left: 140px;
+        right: 140px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .cover .top .lbl {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 15px;
+        color: var(--coral);
+      }
+      .cover .top .idx {
+        font-family: var(--mono);
+        font-weight: 500;
+        letter-spacing: 0.06em;
+        font-size: 14px;
+        color: color-mix(in srgb, var(--ink) 56%, var(--cream));
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: clamp(88px, 13vw, 184px);
+        line-height: 0.98;
+        letter-spacing: -0.035em;
+        color: var(--ink);
+        max-width: 14ch;
+      }
+      .cover h1 .it {
+        font-style: italic;
+        color: var(--coral);
+      }
+      .cover .lede {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 1.5;
+        color: color-mix(in srgb, var(--ink) 80%, var(--cream));
+        max-width: 720px;
+        margin-top: 38px;
+      }
+      .cover .footline {
+        position: absolute;
+        bottom: 64px;
+        left: 140px;
+        right: 140px;
+        display: flex;
+        justify-content: space-between;
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 14px;
+        color: color-mix(in srgb, var(--ink) 50%, var(--cream));
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 24px;
+      }
+      .sw {
+        border: 1px solid var(--hair);
+        border-radius: 12px;
+        overflow: hidden;
+        background: var(--cream);
+      }
+      .sw .chip {
+        height: 128px;
+      }
+      .sw .meta {
+        padding: 18px 20px;
+        border-top: 1px solid var(--hair);
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 24px;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 12px;
+        letter-spacing: 0.04em;
+        color: var(--ink);
+        opacity: 0.6;
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 1.45;
+        color: color-mix(in srgb, var(--ink) 70%, var(--cream));
+        margin-top: 10px;
+      }
+      .syntax-note {
+        margin-top: 28px;
+        display: flex;
+        gap: 28px;
+        align-items: center;
+        flex-wrap: wrap;
+        font-family: var(--mono);
+        font-size: 13px;
+        letter-spacing: 0.02em;
+        color: color-mix(in srgb, var(--ink) 60%, var(--cream));
+      }
+      .syntax-note .dot {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        vertical-align: -2px;
+        margin-right: 8px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 1px solid var(--hair-soft);
+      }
+      .type-row .tok {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 13px;
+        color: var(--coral);
+      }
+      .type-row .m {
+        font-family: var(--mono);
+        font-size: 11px;
+        color: var(--ink);
+        opacity: 0.55;
+        margin-top: 8px;
+        line-height: 1.5;
+        letter-spacing: 0.02em;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 12px;
+        color: var(--coral);
+        margin-bottom: 22px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 28px;
+        margin-bottom: 52px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .card {
+        background: var(--cream);
+        border: 1px solid var(--hair);
+        border-radius: 12px;
+        box-shadow: var(--shadow);
+        padding: 30px 32px;
+      }
+      .card.tile {
+        background: var(--tile);
+      }
+      .card .kt {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 30px;
+        letter-spacing: -0.01em;
+        line-height: 1.1;
+      }
+      .card .kb {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 1.5;
+        color: color-mix(in srgb, var(--ink) 74%, var(--cream));
+        margin-top: 10px;
+      }
+      .kicker {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 14px;
+        color: color-mix(in srgb, var(--ink) 64%, var(--cream));
+      }
+      .callout {
+        background: var(--coral);
+        color: var(--cream);
+        border-radius: 8px;
+        padding: 22px 30px;
+        display: inline-flex;
+        align-items: center;
+        gap: 14px;
+      }
+      .callout .b {
+        font-family: var(--sans);
+        font-weight: 500;
+        font-size: 22px;
+      }
+      .callout .a {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 12px;
+        opacity: 0.85;
+      }
+      .kpi .tag {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 13px;
+        color: var(--coral);
+        border-top: 1px solid var(--hair);
+        padding-top: 16px;
+        display: inline-block;
+      }
+      .kpi .fig {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 120px;
+        line-height: 0.95;
+        letter-spacing: -0.03em;
+        color: var(--ink);
+      }
+      .kpi .fig .u {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 36px;
+        letter-spacing: 0;
+        margin-left: 8px;
+      }
+      .kpi .d {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 1.4;
+        color: color-mix(in srgb, var(--ink) 74%, var(--cream));
+        margin-top: 12px;
+        max-width: 300px;
+      }
+      .quote .q {
+        font-family: var(--serif);
+        font-style: italic;
+        font-weight: 400;
+        font-size: 38px;
+        line-height: 1.18;
+        letter-spacing: -0.018em;
+        color: var(--ink);
+      }
+      .quote .cite {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 13px;
+        color: color-mix(in srgb, var(--ink) 58%, var(--cream));
+        margin-top: 18px;
+      }
+      /* code surface demo */
+      .codewin {
+        background: var(--navy);
+        border: 1px solid var(--on-dark-soft);
+        border-radius: 8px;
+        overflow: hidden;
+      }
+      .codewin .bar {
+        background: var(--navy-elev);
+        padding: 12px 18px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .codewin .bar .dot {
+        width: 11px;
+        height: 11px;
+        border-radius: 50%;
+      }
+      .codewin .bar .fn {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 13px;
+        color: var(--on-dark-soft);
+        margin-left: 12px;
+        letter-spacing: 0.02em;
+      }
+      .codewin pre {
+        margin: 0;
+        padding: 22px 24px;
+        font-family: var(--mono);
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 1.6;
+        color: var(--on-dark);
+      }
+      .codewin .add {
+        background: color-mix(in srgb, var(--ok) 16%, transparent);
+        display: block;
+        margin: 0 -24px;
+        padding: 0 24px;
+      }
+      .codewin .del {
+        background: color-mix(in srgb, var(--warn) 16%, transparent);
+        display: block;
+        margin: 0 -24px;
+        padding: 0 24px;
+        color: var(--on-dark-soft);
+      }
+      .codewin .k {
+        color: var(--coral);
+      }
+      .codewin .s {
+        color: var(--teal);
+      }
+      .codewin .n {
+        color: var(--amber);
+      }
+      .codewin .g {
+        color: var(--ok);
+      }
+      .codewin .r {
+        color: var(--warn);
+      }
+
+      /* FRAMES */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+        color: color-mix(in srgb, var(--ink) 50%, var(--cream));
+      }
+      .fw .flabel b {
+        color: var(--coral);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--cream);
+        border-radius: 8px;
+        box-shadow:
+          0 0 0 1px var(--hair),
+          0 10px 30px rgba(20, 20, 19, 0.06);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+      .frame .tb {
+        position: absolute;
+        left: 5cqw;
+        right: 5cqw;
+        top: 3.4cqw;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 4;
+      }
+      .frame .tb .l {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 0.95cqw;
+        color: color-mix(in srgb, var(--ink) 56%, var(--cream));
+      }
+      .frame .tb .l.coral {
+        color: var(--coral);
+      }
+      .frame .fl {
+        position: absolute;
+        left: 5cqw;
+        right: 5cqw;
+        bottom: 3cqw;
+        display: flex;
+        justify-content: space-between;
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 0.82cqw;
+        color: color-mix(in srgb, var(--ink) 48%, var(--cream));
+        z-index: 4;
+      }
+
+      /* f1 cover */
+      .cf1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .cf1 .kick {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 1.1cqw;
+        color: var(--coral);
+        margin-bottom: 1.6cqw;
+      }
+      .cf1 h3 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 9.6cqw;
+        line-height: 0.98;
+        letter-spacing: -0.035em;
+        color: var(--ink);
+      }
+
+      /* f2 statement */
+      .cf2 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+      }
+      .cf2 h3 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 7cqw;
+        line-height: 1.04;
+        letter-spacing: -0.028em;
+        color: var(--ink);
+        max-width: 74cqw;
+      }
+      .cf2 h3 .it {
+        font-style: italic;
+        color: var(--coral);
+      }
+
+      /* f3 code surface — the PR-critical frame */
+      .cf3 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .cf3 .kick {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 0.95cqw;
+        color: var(--coral);
+        margin-bottom: 1.3cqw;
+      }
+      .cf3 .win {
+        background: var(--navy);
+        border: 0.08cqw solid var(--on-dark-soft);
+        border-radius: 0.7cqw;
+        overflow: hidden;
+        box-shadow: 0 1cqw 3cqw rgba(20, 20, 19, 0.18);
+      }
+      .cf3 .win .bar {
+        background: var(--navy-elev);
+        padding: 0.9cqw 1.3cqw;
+        display: flex;
+        align-items: center;
+        gap: 0.5cqw;
+      }
+      .cf3 .win .bar .dot {
+        width: 0.8cqw;
+        height: 0.8cqw;
+        border-radius: 50%;
+      }
+      .cf3 .win .bar .fn {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 1cqw;
+        color: var(--on-dark-soft);
+        margin-left: 0.8cqw;
+        letter-spacing: 0.02em;
+      }
+      .cf3 .win pre {
+        margin: 0;
+        padding: 1.5cqw 1.8cqw;
+        font-family: var(--mono);
+        font-weight: 400;
+        font-size: 1.55cqw;
+        line-height: 1.62;
+        color: var(--on-dark);
+      }
+      .cf3 .add {
+        background: color-mix(in srgb, var(--ok) 16%, transparent);
+        display: block;
+        margin: 0 -1.8cqw;
+        padding: 0 1.8cqw;
+      }
+      .cf3 .del {
+        background: color-mix(in srgb, var(--warn) 16%, transparent);
+        display: block;
+        margin: 0 -1.8cqw;
+        padding: 0 1.8cqw;
+        color: var(--on-dark-soft);
+      }
+      .cf3 .k {
+        color: var(--coral);
+      }
+      .cf3 .s {
+        color: var(--teal);
+      }
+      .cf3 .n {
+        color: var(--amber);
+      }
+      .cf3 .g {
+        color: var(--ok);
+      }
+      .cf3 .r {
+        color: var(--warn);
+      }
+
+      /* f4 number / impact */
+      .cf4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .cf4 .tag {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 1cqw;
+        color: var(--coral);
+        border-top: 0.08cqw solid var(--hair);
+        padding-top: 1.2cqw;
+        display: inline-block;
+      }
+      .cf4 .fig {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 16cqw;
+        line-height: 0.92;
+        letter-spacing: -0.03em;
+        color: var(--ink);
+      }
+      .cf4 .fig .u {
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 4.2cqw;
+        letter-spacing: 0;
+        margin-left: 0.6cqw;
+        color: color-mix(in srgb, var(--ink) 64%, var(--cream));
+      }
+      .cf4 .d {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 1.7cqw;
+        line-height: 1.4;
+        color: color-mix(in srgb, var(--ink) 74%, var(--cream));
+        max-width: 44cqw;
+        margin-top: 1cqw;
+      }
+
+      /* f5 pull-quote */
+      .cf5 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 8cqw;
+      }
+      .cf5 .q {
+        font-family: var(--serif);
+        font-style: italic;
+        font-weight: 400;
+        font-size: 5cqw;
+        line-height: 1.16;
+        letter-spacing: -0.018em;
+        color: var(--ink);
+      }
+      .cf5 .cite {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 0.95cqw;
+        color: color-mix(in srgb, var(--ink) 56%, var(--cream));
+        margin-top: 2.2cqw;
+      }
+
+      /* f6 closing / cta */
+      .cf6 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .cf6 h3 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 6.2cqw;
+        line-height: 1.02;
+        letter-spacing: -0.028em;
+        color: var(--ink);
+        margin-bottom: 2.4cqw;
+      }
+      .cf6 .ship {
+        display: flex;
+        align-items: center;
+        gap: 1.4cqw;
+        margin-bottom: 2.4cqw;
+      }
+      .cf6 .av {
+        width: 4cqw;
+        height: 4cqw;
+        border-radius: 50%;
+        border: 0.1cqw solid var(--hair);
+        background: var(--tile);
+        display: grid;
+        place-items: center;
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 1.2cqw;
+        color: var(--ink);
+        margin-left: -1cqw;
+      }
+      .cf6 .av:first-child {
+        margin-left: 0;
+      }
+      .cf6 .shiplbl {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 0.95cqw;
+        color: color-mix(in srgb, var(--ink) 56%, var(--cream));
+        margin-left: 0.8cqw;
+      }
+      .cf6 .cta {
+        background: var(--coral);
+        color: var(--cream);
+        border-radius: 0.6cqw;
+        padding: 1.2cqw 2cqw;
+        display: inline-flex;
+        align-self: flex-start;
+        font-family: var(--sans);
+        font-weight: 500;
+        font-size: 1.8cqw;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 34px;
+        color: var(--ink);
+        margin-bottom: 6px;
+        letter-spacing: -0.02em;
+      }
+      .do-card .rule {
+        height: 1px;
+        background: var(--hair);
+        margin-bottom: 22px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--sans);
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 1.5;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 13px;
+        color: color-mix(in srgb, var(--ink) 84%, var(--cream));
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--mono);
+      }
+      .do-card.do li::before {
+        content: "+";
+        color: var(--coral);
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: color-mix(in srgb, var(--ink) 40%, var(--cream));
+      }
+
+      .foot {
+        padding: 60px 120px;
+        border-top: 1px solid var(--hair);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 30px;
+        color: var(--ink);
+      }
+      .foot .l .spike {
+        color: var(--coral);
+      }
+      .foot .r {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+        color: color-mix(in srgb, var(--ink) 50%, var(--cream));
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="top">
+        <span class="lbl"><span class="spike">✱</span> Frame System · Vol. 01</span
+        ><span class="idx">EB Garamond · Inter · JetBrains Mono</span>
+      </div>
+      <h1>Cream, ink &amp; one <span class="it">coral.</span></h1>
+      <div class="lede">
+        A warm-editorial frame system — EB Garamond at optical sizes for display, Inter for body,
+        JetBrains Mono for the index and code, and a single terracotta coral held as scarce voltage.
+      </div>
+      <div class="footline">
+        <span>Warm cream paper · hairline elevation</span><span>1920 × 1080</span>
+      </div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">01 — Palette</span>
+        <h2>The trinity, plus a code surface</h2>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="meta">
+            <div class="name">Ink</div>
+            <div class="hex">#141413</div>
+            <div class="role">
+              Warm near-black — the voice. Every word, every hairline; never pure #000.
+            </div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream)"></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#FAF9F5</div>
+            <div class="role">Warm paper — the ~60% floor. Never pure white, never cool.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--coral)"></div>
+          <div class="meta">
+            <div class="name">Coral</div>
+            <div class="hex">#CC785C</div>
+            <div class="role">
+              Terracotta voltage — the one accent. CTA / inline link / band, once per frame.
+            </div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--tile)"></div>
+          <div class="meta">
+            <div class="name">Tile</div>
+            <div class="hex">#EFE9DE</div>
+            <div class="role">Half-step content surface — where cards gather.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--tile-strong)"></div>
+          <div class="meta">
+            <div class="name">Tile Strong</div>
+            <div class="hex">#ECE3D4</div>
+            <div class="role">Pressed / deepest warm-paper step.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--navy)"></div>
+          <div class="meta">
+            <div class="name">Navy</div>
+            <div class="hex">#181715</div>
+            <div class="role">
+              Warm code / terminal surface — structural anchor, not a brand hue.
+            </div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--navy-elev)"></div>
+          <div class="meta">
+            <div class="name">Navy Elev</div>
+            <div class="hex">#252320</div>
+            <div class="role">Title bars + status strips on the code surface.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: linear-gradient(90deg, var(--teal) 0 50%, var(--amber) 50% 100%)"
+          ></div>
+          <div class="meta">
+            <div class="name">Syntax</div>
+            <div class="hex">#5DB8A6 · #E8A55A</div>
+            <div class="role">
+              Teal strings · amber numbers — fixed code decoration, not remixable.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="syntax-note">
+        <span><span class="dot" style="background: var(--coral)"></span>keywords</span>
+        <span><span class="dot" style="background: var(--teal)"></span>strings</span>
+        <span><span class="dot" style="background: var(--amber)"></span>numbers</span>
+        <span><span class="dot" style="background: var(--ok)"></span>added</span>
+        <span><span class="dot" style="background: var(--warn)"></span>removed</span>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">02 — Typography</span>
+        <h2>EB Garamond display · Inter body · Mono index</h2>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display-cover</div>
+          <div class="m">EB Garamond · 500 · 190px · −0.028em · sentence</div>
+        </div>
+        <div>
+          <span class="serif" style="font-size: 108px; line-height: 0.98"
+            >Streaming, end to end.</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">EB Garamond · 500 · 140px · −0.022em</div>
+        </div>
+        <div><span class="serif" style="font-size: 80px">A serif that thinks.</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">number-hero</div>
+          <div class="m">EB Garamond · 500 · 180px · figure + mono unit</div>
+        </div>
+        <div>
+          <span class="serif" style="font-size: 96px; color: var(--ink)"
+            >+1,204<span
+              style="
+                font-family: var(--mono);
+                font-weight: 500;
+                font-size: 36px;
+                color: color-mix(in srgb, var(--ink) 64%, var(--cream));
+              "
+            >
+              lines</span
+            ></span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body / lead</div>
+          <div class="m">Inter · 400 · line 1.5</div>
+        </div>
+        <div>
+          <p
+            style="
+              font-family: var(--sans);
+              font-weight: 400;
+              font-size: 24px;
+              line-height: 1.5;
+              max-width: 680px;
+              color: color-mix(in srgb, var(--ink) 82%, var(--cream));
+            "
+          >
+            The body reads first and answers second — Inter at weight 400, sentence case, with its
+            qualifiers kept. No hype, no exclamation.
+          </p>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">kicker / code</div>
+          <div class="m">JetBrains Mono · 500 uppercase 0.16em · code 400</div>
+        </div>
+        <div>
+          <span class="mono" style="font-size: 16px; color: var(--coral)"
+            >✱ Pull Request · #1842</span
+          >
+          &nbsp;
+          <span style="font-family: var(--mono); font-size: 18px; color: var(--ink)"
+            >async for tok in stream()</span
+          >
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">quote-pull</div>
+          <div class="m">EB Garamond · 400 · italic · the expressive register</div>
+        </div>
+        <div>
+          <span class="serif" style="font-style: italic; font-size: 46px; color: var(--ink)"
+            >Ship it when it reads like a person wrote it.</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">03 — Components</span>
+        <h2>Hairline elevation · scarce coral</h2>
+      </div>
+
+      <div class="cgrid">
+        <div class="s5">
+          <div class="cnote">card-hairline — 1px ink hairline + one soft warm shadow</div>
+          <div class="card">
+            <div class="kt">Reads first, answers second</div>
+            <div class="kb">
+              The editorial content card. Elevation is the hairline plus one soft warm shadow —
+              never a heavy drop, glow, or gradient.
+            </div>
+          </div>
+          <div class="card tile" style="margin-top: 24px">
+            <div class="kt">Gathers on a half-step tile</div>
+            <div class="kb">
+              Content collects on a warm tile surface, half a step down from the cream floor.
+            </div>
+          </div>
+        </div>
+        <div class="s3">
+          <div class="cnote">kicker-spike + coral-callout</div>
+          <div class="kicker"><span class="spike">✱</span> For the considered worker</div>
+          <div class="callout" style="margin-top: 22px">
+            <span class="b">Start a project</span><span class="a">CTA</span>
+          </div>
+          <div
+            class="kb"
+            style="
+              margin-top: 18px;
+              font-family: var(--sans);
+              font-size: 15px;
+              line-height: 1.5;
+              color: color-mix(in srgb, var(--ink) 70%, var(--cream));
+            "
+          >
+            Coral is rationed — one moment per frame.
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">number-lockup — EB Garamond figure + mono unit</div>
+          <div class="kpi">
+            <div class="tag">Impact</div>
+            <div class="fig">2.1<span class="u">× faster</span></div>
+            <div class="d">Figure is serif; the unit is always mono, never the serif.</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s7">
+          <div class="cnote">
+            code-surface — the warm-navy code / terminal surface (code-* blocks render here)
+          </div>
+          <div class="codewin">
+            <div class="bar">
+              <span class="dot" style="background: #e8695a"></span
+              ><span class="dot" style="background: #e8b35a"></span
+              ><span class="dot" style="background: #5db872"></span
+              ><span class="fn">transport.py</span>
+            </div>
+            <pre><span class="del">- <span class="k">def</span> respond(q):</span>
+<span class="del">-     <span class="k">return</span> model.answer(q)</span>
+<span class="add">+ <span class="k">async def</span> respond(q):</span>
+<span class="add">+     <span class="k">async for</span> tok <span class="k">in</span> model.stream(q, n=<span class="n">3</span>):</span>
+<span class="add">+         <span class="k">yield</span> tok</span></pre>
+          </div>
+        </div>
+        <div class="s5">
+          <div class="cnote">pull-quote — EB Garamond italic + mono cite</div>
+          <div class="quote">
+            <div class="q">
+              Refactor the transport so streaming isn't a special case — it's the default.
+            </div>
+            <div class="cite">Commit a1b2c3d · a. chen</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- FRAMES -->
+    <section style="background: var(--tile)">
+      <div class="topbar">
+        <span class="lbl">04 — Frames</span>
+        <h2>Six treatments ↔ PR beats</h2>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Cover</b><span>· the PR title · cream · left</span></div>
+          <div class="frame cf1">
+            <div class="tb">
+              <span class="l coral">✱ Pull Request · #1842</span><span class="l">example/sdk</span>
+            </div>
+            <div class="body">
+              <div class="kick">✱ Feature</div>
+              <h3>Streaming,<br />end to end.</h3>
+            </div>
+            <div class="fl">
+              <span class="l">main ← stream-api</span><span class="l">01 / 06</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Statement</b><span>· the change in a sentence · cream</span></div>
+          <div class="frame cf2">
+            <div class="tb">
+              <span class="l coral">The change</span><span class="l">02 / 06</span>
+            </div>
+            <div class="body">
+              <h3>The API now streams tokens <span class="it">as they're written.</span></h3>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Code Surface</b><span>· the diff · navy · the PR-critical frame</span>
+          </div>
+          <div class="frame cf3">
+            <div class="tb">
+              <span class="l coral">The diff</span><span class="l">03 / 06</span>
+            </div>
+            <div class="body">
+              <div class="kick">transport.py · +3 −2</div>
+              <div class="win">
+                <div class="bar">
+                  <span class="dot" style="background: #e8695a"></span
+                  ><span class="dot" style="background: #e8b35a"></span
+                  ><span class="dot" style="background: #5db872"></span
+                  ><span class="fn">transport.py</span>
+                </div>
+                <pre><span class="del">- <span class="k">def</span> respond(q):</span>
+<span class="del">-     <span class="k">return</span> model.answer(q)</span>
+<span class="add">+ <span class="k">async def</span> respond(q):</span>
+<span class="add">+     <span class="k">async for</span> tok <span class="k">in</span> model.stream(q):</span>
+<span class="add">+         <span class="k">yield</span> tok</span></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Number / Impact</b><span>· +N/−M · cream · oversized figure</span>
+          </div>
+          <div class="frame cf4">
+            <div class="tb">
+              <span class="l coral">By the numbers</span><span class="l">04 / 06</span>
+            </div>
+            <div class="body">
+              <span class="tag">Net change</span>
+              <div class="fig">+1,204<span class="u">/ −318</span></div>
+              <div class="d">
+                Across 17 files — the transport layer rewritten, the special-case path deleted.
+              </div>
+            </div>
+            <div class="fl"><span class="l">17 files</span><span class="l">04 / 06</span></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Pull-quote</b><span>· commit / review · EB Garamond italic</span>
+          </div>
+          <div class="frame cf5">
+            <div class="tb">
+              <span class="l coral">In the commit</span><span class="l">05 / 06</span>
+            </div>
+            <div class="body">
+              <div class="q">"Streaming isn't a special case anymore — it's the default path."</div>
+              <div class="cite">a. chen · author</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Closing / CTA</b><span>· shipped-by · coral voltage</span></div>
+          <div class="frame cf6">
+            <div class="tb"><span class="l coral">Shipped</span><span class="l">06 / 06</span></div>
+            <div class="body">
+              <h3>Merged &amp; shipped.</h3>
+              <div class="ship">
+                <div class="av">AC</div>
+                <div class="av">RK</div>
+                <div class="av">JM</div>
+                <span class="shiplbl">a. chen · r. kapoor · +1</span>
+              </div>
+              <span class="cta">Read the PR →</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">05 — Rules</span>
+        <h2>Frame Rules</h2>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>Stand every frame on the warm cream floor; gather content on a half-step tile.</li>
+            <li>Set display in EB Garamond 400, sentence case, optical size, negative-tracked.</li>
+            <li>Ration coral to one moment per frame — CTA, inline link, or full-bleed band.</li>
+            <li>Elevate with a 1px hairline + at most one soft warm shadow.</li>
+            <li>Reserve warm navy for the code surface; pair every figure with a mono unit.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>No pure white, no cool gray, no pure black; no fourth brand hue.</li>
+            <li>No heavy drop shadow, glow, gradient on content, or tilt.</li>
+            <li>No uppercase or title-case EB Garamond; no sans headline; no serif label.</li>
+            <li>No two corals in one frame; coral never sets a headline or body run.</li>
+            <li>Don't cram edge-to-edge — the considered voice needs cream.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--cream);
+        --cap-accent: var(--coral);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 0.07cqw solid color-mix(in srgb, var(--cap-ink) 12%, transparent);
+        border-radius: 0.7cqw;
+        box-shadow:
+          0 0.06cqw 0.18cqw rgba(20, 20, 19, 0.08),
+          0 0.25cqw 1cqw rgba(20, 20, 19, 0.04);
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.12em 0.3em;
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 3.4cqw;
+        line-height: 1.24;
+        letter-spacing: -0.02em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.02em 0.06em;
+        color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
+        border-bottom: 0.16cqw solid transparent;
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        border-bottom: 0.16cqw solid var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 0.12cqw dashed color-mix(in srgb, var(--ink) 28%, transparent);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 5cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 0.82cqw;
+        color: color-mix(in srgb, var(--ink) 50%, var(--cream));
+        z-index: 4;
+      }
+    </style>
+    <section style="background: var(--tile)">
+      <div class="topbar">
+        <span class="lbl">06 — Captions</span>
+        <h2>Lower-Third Karaoke</h2>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="tb"><span class="l coral">Captions</span><span class="l">active</span></div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Streaming</span>
+                  <span class="w spoken">is</span>
+                  <span class="w active">the</span>
+                  <span class="w">default</span>
+                  <span class="w">now.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · underline cleared</span></div>
+          <div class="frame capdemo">
+            <div class="tb">
+              <span class="l coral">Captions</span><span class="l">settled</span>
+            </div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Read</span>
+                  <span class="w spoken">it</span>
+                  <span class="w spoken">first.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l"><span class="spike">✱</span> Code editorial</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#faf9f5" />
+        <text x="11" y="48" font-family="Georgia" font-size="34" fill="#141413">Aa</text>
+        <text x="68" y="30" font-family="monospace" font-size="22" fill="#cc785c">✱</text>
+        <rect x="11" y="62" width="58" height="1.5" fill="#141413" opacity="0.16" />
+        <rect x="11" y="72" width="40" height="10" rx="2" fill="#181715" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/coral/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/coral/FRAME.md
new file mode 100644
index 0000000..0c73b04
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/coral/FRAME.md
@@ -0,0 +1,314 @@
+---
+version: alpha
+name: Coral — Frame (video / frame layer)
+description: >
+  Video-first companion to Coral's design.md. The unit is the frame (1920×1080), not the
+  slide-in-a-deck. Atoms are identical and sacred — the three-surface system (coral fire /
+  ink black / warm cream), Bebas Neue uppercase tracked + Inter body, the 45° diagonal hatch,
+  decorative wallpaper numerals, hard color-region splits, zero shadow, zero radius (save
+  circles). Composition, frame scale, and aspect-ratio behavior are rewritten for the frame.
+  Motion is 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:
+  coral: "#E85D5D"
+  coral-dark: "#D44A4A"
+  cream: "#F5F0E8"
+  cream-dark: "#E8E0D4"
+  black: "#1A1A1A"
+  gray: "#6B6B6B"
+  light-gray: "#B0B0B0"
+  white: "#FFFFFF"
+
+typography:
+  # — reading ramp (Inter) —
+  body:          { fontFamily: "Inter", cqw: 1.0,  weight: 400, lineHeight: 1.7 }
+  body-light:    { fontFamily: "Inter", cqw: 1.5,  weight: 300, lineHeight: 1.5, note: "pull-quote voice" }
+  section-label: { fontFamily: "Inter", px: 12, weight: 700, tracking: "4px", upper: true }
+  item-label:    { fontFamily: "Inter", px: 11, weight: 700, tracking: "3px", upper: true }
+  quote-attribution: { fontFamily: "Inter", px: 14, weight: 600, tracking: "3px", upper: true }
+  quote-role:    { fontFamily: "Inter", px: 12, weight: 400, tracking: "1px" }
+  # — display / hero ramp (Bebas Neue, uppercase, tracked) —
+  card-title:    { fontFamily: "Bebas Neue", cqw: 1.9, weight: 400, lineHeight: 1.1, tracking: "1px", upper: true }
+  sidebar-value: { fontFamily: "Bebas Neue", cqw: 2.3, weight: 400, lineHeight: 1.0, upper: true }
+  bar-title:     { fontFamily: "Bebas Neue", cqw: 2.3, weight: 400, lineHeight: 1.0, tracking: "2px", upper: true }
+  card-stat:     { fontFamily: "Bebas Neue", cqw: 2.5, weight: 400, lineHeight: 1.0, upper: true }
+  column-title:  { fontFamily: "Bebas Neue", cqw: 3.7, weight: 400, lineHeight: 1.0, tracking: "2px", upper: true }
+  section-headline:{ fontFamily: "Bebas Neue", cqw: 4.2, weight: 400, lineHeight: 1.0, tracking: "2px", upper: true }
+  stat-numeral:  { fontFamily: "Bebas Neue", cqw: 5.0, weight: 400, lineHeight: 1.0, upper: true }
+  hero-title:    { fontFamily: "Bebas Neue", cqw: 6.5, weight: 400, lineHeight: 0.9, tracking: "4px", upper: true }
+  jumbo-feature: { fontFamily: "Bebas Neue", cqw: 9.0, weight: 400, lineHeight: 1.0, tracking: "12px", upper: true }
+  # — decorative —
+  background-numeral: { fontFamily: "Bebas Neue", cqw: 10.0, weight: 400, color: "rgba(0,0,0,0.12)", note: "wallpaper numeral inside a coral region" }
+  giant-mark:    { fontFamily: "Bebas Neue", cqw: 14.0, weight: 400, color: "rgba(0,0,0,0.35)", note: "decorative quote mark inside a coral region" }
+
+spacing:
+  pad-x: "5cqw"       # standard horizontal frame padding
+  pad-y: "4cqw"
+  pad-col: "3cqw"
+  gap-grid: "1.7cqw"
+  card-pad: "2cqw"
+
+components:
+  diagonal-hatch:
+    backgroundImage: "repeating-linear-gradient(45deg, transparent 0 20px, rgba(0,0,0,.06) 20px 40px)"
+    placement: "::before overlay on {colors.coral} regions"
+    description: "Signature 45° hatch (6% ink). Variants −45° 30/60px, 90° vertical 60/62px 10% ink. Texture, never depth."
+  region-split:
+    layout: "two/three solid surfaces meeting at a hard edge; ratios 38/62 rows, 40/60 cols, 50/50"
+    rounded: "0"
+    description: "The primary layout device — no gradient, no rounded junction; the boundary is the layout."
+  card:
+    backgroundColor: "{colors.white}"
+    borderTop: "0.26cqw solid {colors.coral}"
+    rounded: "0"
+    shadow: "none"
+    typography: "{typography.card-title} + {typography.body}"
+    description: "5px coral TOP border is the only chrome; holds a card-icon, title, body, coral card-stat."
+  sidebar-item:
+    backgroundColor: "{colors.white}"
+    borderLeft: "0.2cqw solid {colors.coral}"
+    rounded: "0"
+    typography: "{typography.sidebar-value} + {typography.section-label}"
+    description: "4px coral LEFT border is the only chrome."
+  card-icon:
+    backgroundColor: "{colors.coral}"
+    textColor: "{colors.white}"
+    size: "2.5cqw square"
+    rounded: "0"
+    description: "The card mark — one white Bebas glyph centered."
+  accent-line:
+    backgroundColor: "{colors.coral}"
+    size: "4cqw × 0.25cqw (60×4 closing variant)"
+    rounded: "0"
+    description: "Sub-headline accent rule."
+  background-numeral:
+    typography: "{typography.background-numeral}"
+    color: "rgba(0,0,0,0.12)"
+    placement: "behind a {colors.coral} region's title"
+    description: "The wallpaper-numeral signature (12% ink)."
+  giant-mark:
+    typography: "{typography.giant-mark}"
+    color: "rgba(0,0,0,0.35)"
+    placement: "inside a {colors.coral} region"
+    description: "Oversized quote mark / character, half-decorative."
+  timeline:
+    line: "0.2cqw solid {colors.black} (gradient-dashed ::after)"
+    node: "{colors.coral} circle, {colors.cream} halo, 50% radius"
+    description: "Ink line with coral nodes + cream halos."
+  info-bar:
+    backgroundColor: "{colors.cream-dark}"
+    typography: "{typography.bar-title} + uppercase {typography.section-label}"
+    rounded: "0"
+    shadow: "none"
+    description: "Footer band beneath a feature region — Bebas title left, Inter meta right."
+---
+
+# Coral — Frame (video / frame layer)
+
+## Overview
+
+Coral at frame scale is a **bold magazine poster** built from three solid surfaces — coral fire,
+ink black, warm cream — that meet at **hard color edges.** The region boundary IS the layout: a
+frame splits into a coral plane + a cream plane, or a coral panel + an ink panel, each holding a
+self-contained composition. No gradient transitions, no rounded junctions, no drop shadows.
+
+The voice is a two-face hierarchy: **Bebas Neue** — tall condensed caps, always uppercase, always
+tracked (1–12px) — carries every headline, stat, title, and meta figure; **Inter** carries every
+body line, label, and attribution across weights 300–700. Bebas declares; Inter explains. The
+signature atmospherics are the **45° diagonal hatch** (6% ink) over coral regions and the
+**oversized wallpaper numeral** (12% ink) behind a region's title.
+
+**Key characteristics at frame scale:**
+
+- **Three surfaces, hard edges** — `{colors.coral}` / `{colors.black}` / `{colors.cream}` as solid regions.
+- **Bebas uppercase + tracking** on every display element; **Inter** on every body/label.
+- **45° hatch** (6% ink) on coral regions; **wallpaper numerals** (12%) and **giant marks** (35%) behind content.
+- **Ink-on-fire** — Bebas on coral is always ink, never white. Eyebrows coral on cream/ink, ink on coral.
+- **Flat** — no shadow, no elevation; radius only on circles (nav dots, timeline nodes).
+- **Coral as accent AND environment** — 4–5px coral borders, 48px coral icon squares, and full coral regions.
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one element dominates at **3–6× its nearest neighbor**: the `hero-title`/`jumbo-feature` or a wallpaper numeral behind a region's title, never two rival headlines.
+- **Silence** — coral/cream/ink regions read **40–55% empty**; the **three-column catalog is the one dense exception**. A coral region underfilled gets a wallpaper numeral, never more content.
+- **Restraint** — coral fires as **either accent or one full region per frame** (not both at full strength); one giant-mark per quote; ink-on-fire (never white on coral).
+- **Reference** — aim at a **sports-magazine cover / Saul Bass travel poster** (solid planes at hard edges, condensed caps as architecture); failure looks like a **soft drop-shadowed card deck**.
+
+## The Frame
+
+- **Primary:** 1920×1080 (16:9). Display sizes authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
+- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
+- **Safe area:** `5cqw` (pad-x) standard frame padding; region edges may bleed full-frame.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` resolved against it — **never `vw`.** A `vw`-sized frame
+inflates whenever it isn't full-screen; `cqw` resolves against the frame at any render size.
+
+## Colors
+
+Tokens identical to the source. At frame scale the three surfaces are intermixed by composition —
+coral/cream, coral/ink, ink/cream, or single-surface. `{colors.coral}` is both accent (borders,
+icon squares, timeline nodes, eyebrows on cream/ink) and environment (full regions). Headlines:
+ink on cream/coral, cream on ink — **never gray, never white-on-coral.** Eyebrows: coral on
+cream/ink, ink on coral — coral-on-coral does not exist. The only sanctioned gradient is the rare
+135° coral-dark→coral feature region; everything else is flat.
+
+## Typography
+
+Two ramps. The **reading ramp** (Inter body 1.0cqw, body-light 1.5cqw, labels in px) carries copy
+and eyebrows; the **display/hero ramp** (Bebas, `card-title` 1.9cqw → `jumbo-feature` 9.0cqw, plus
+the decorative `background-numeral` 10cqw and `giant-mark` 14cqw) carries every headline and stat.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; px labels are chrome only.
+- **Fit-to-measure:** size the headline to its line length. Cap the block at **≤ 78cqw**; ≤3 words → `hero-title`/`jumbo-feature`; 4–6 → `section-headline`; 7+ → `column-title`.
+- **Every Bebas element is uppercase with ≥1px tracking** (2px standard, 4px hero, 12px jumbo). **Every Inter label is uppercase, 1–4px tracked.** No italic, no underline, no sentence-case Bebas.
+
+## Depth & Surface
+
+Flat, with hard color edges. Depth signals only:
+
+- **Hard region boundaries** — the primary structural device.
+- **Accent borders** — 5px coral top (cards), 4px coral left (sidebar tiles), 4px ink (timeline).
+- **45° hatch** — 6% ink texture on coral regions (no depth).
+- **Wallpaper typography** — numerals at 12%, giant marks at 35%, layered behind content.
+
+**Ceiling:** no box-shadow, no elevated card, no soft gradient (save the one 135° coral feature), no rounded rectangle.
+
+## Shapes
+
+- **0 radius** on every rectangle — regions, cards, sidebar tiles, icon squares, info bars, accent lines.
+- **50%** on circles only — nav dots (10px), nav arrows (44px), timeline nodes (20px).
+
+## Components
+
+- **region-split** — the layout device; surfaces meet at a hard edge.
+- **card** (5px coral top) / **sidebar-item** (4px coral left) / **card-icon** (48px coral square) — the only chrome on each is its single coral border.
+- **diagonal-hatch** / **background-numeral** / **giant-mark** — the atmospheric + wallpaper signatures on coral regions.
+- **accent-line** — coral sub-headline rule. **timeline** — ink line, coral nodes, cream halos. **info-bar** — cream-dark footer band.
+
+## Frame Treatments
+
+> Recipe per plate: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> Lean centered where the move allows; vary anchor; one idea per region.
+
+### 1 · Region-Split Cover (identity · move: hard region edge · left)
+
+**Ground** 38/62 split — `{colors.coral}` top band (hatch + wallpaper numeral) over `{colors.cream}`.
+**Container** grid rows; brand + meta in the coral band, hero title in the cream field. **Composes**
+region-split, diagonal-hatch, background-numeral, hero-title. **Focal** a 2-line `hero-title` in
+ink, second line in `{colors.coral}`, left-anchored in the cream field. **Chrome** Bebas brand left
+
+- Bebas meta right in the coral band. **Accent** coral band + coral second line. **Silence** the
+  cream field ~45% empty. **Fixed** ink-on-fire in band, hatch on coral, hard edge. **Free** title
+  copy, which line is coral, meta. **Density** sparse.
+
+### 2 · Feature Stat (anchor · move: scale · coral environment · left)
+
+**Ground** full `{colors.coral}` with hatch. **Composes** diagonal-hatch, background-numeral,
+section-label, stat headline, body-light. **Focal** a `stat-numeral`/`jumbo-feature` figure or
+2-line headline in ink, with a `background-numeral` (12% ink) behind it as wallpaper. **Chrome** an
+ink `section-label` eyebrow; an optional Inter-300 support line ≤44cqw. **Accent** the coral ground
+IS the environment; ink type, no white. **Silence** ~40% of the coral field empty. **Fixed**
+ink-on-coral, hatch present, wallpaper numeral behind. **Free** the figure, headline, support copy.
+**Density** sparse.
+
+### 3 · Quote Layout (quote · move: panel split · giant mark)
+
+**Ground** 40/60 split — `{colors.coral}` left panel (hatch + giant-mark) + `{colors.black}` right
+panel. **Composes** region-split, giant-mark, body-light, accent-line, quote-attribution.
+**Focal** a 2–3 line pull quote in `{colors.cream}` Inter **weight 300** on the ink panel.
+**Chrome** a `giant-mark` (35% ink) on the coral panel; a `60×4` coral accent-line above the
+attribution. **Accent** coral panel + coral accent-line. **Silence** the coral panel is mostly the
+mark. **Fixed** Inter-300 quote, ink panel, ink-on-coral mark. **Free** quote, attribution, mark
+glyph. **Density** sparse.
+
+### 4 · Closing Plate (closer · move: cream field + coral band · centered)
+
+**Ground** `{colors.cream}` field with a bottom `{colors.coral}` band (hatch). **Composes**
+section-label, section-headline/hero-title, accent-line, info-bar. **Focal** a 2-line sign-off in
+ink, centered, with a coral `accent-line` beneath. **Chrome** an ink eyebrow above; a coral band
+footer carrying a Bebas sign-off + year. **Accent** coral band + coral accent-line. **Silence**
+~55% empty cream. **Fixed** centered, ink type, one coral band. **Free** sign-off copy, band
+contents. **Density** sparse.
+
+### 5 · Three-Column Catalog (catalog · move: density — the dense frame · centered head)
+
+**Ground** `{colors.cream}` (or `{colors.black}`), `pad-x`. **Composes** section-headline, 3× card.
+**Focal** a centered `section-headline` over three white `card`s (5px coral top, 48px icon square,
+Bebas title, Inter body, coral stat). **Accent** the three coral top borders + icon squares.
+**Silence** tight — the density exception. **Fixed** 5px coral top as sole chrome, no shadow/radius.
+**Free** the three cards' content. **Density** dense-exception.
+
+### 6 · Timeline (process · move: horizontal rail · left)
+
+**Ground** `{colors.cream}`, `pad-x`. **Composes** section-headline, timeline. **Focal** the ink
+timeline-line with 4–5 coral nodes (cream halos) and Bebas labels. **Accent** coral nodes.
+**Silence** moderate. **Fixed** ink line, coral nodes, cream halos. **Free** node count, labels.
+**Density** standard.
+
+## Composition Rules
+
+### Do
+
+- Compose as **multi-surface region splits** — coral / ink / cream meeting at hard edges; the boundary is the layout.
+- Set every Bebas element **uppercase + tracked** (2px standard, 4px hero, 12px jumbo); every Inter label uppercase, 1–4px.
+- Render eyebrows **coral on cream/ink, ink on coral**; headlines ink on cream/coral, cream on ink.
+- Apply the **45° hatch** (6% ink) on coral regions; fill underweight coral regions with a **12% wallpaper numeral**.
+- Use the **5px coral top** (cards) / **4px coral left** (tiles) as the only chrome on those elements.
+- Lean centered on cover sign-offs and catalog heads; left/panel-split on features and quotes.
+
+### Don't
+
+- Don't render Bebas in sentence case or untracked; don't pair it with a non-Inter body sans.
+- Don't add a fourth surface, a drop shadow, an elevation, or a rounded rectangle.
+- Don't put white headlines on coral (always ink) or gray headlines anywhere (gray is body/meta).
+- Don't soften a region boundary with a gradient (except the rare 135° coral feature).
+- Don't fill a coral region with sparse fragments — fully populate it or add a wallpaper numeral / giant mark.
+- Don't blow a headline edge-to-edge — step the ramp down for long lines.
+
+## Aspect-Ratio Behavior
+
+| Treatment            | 16:9                       | 9:16                                 | 1:1                  |
+| -------------------- | -------------------------- | ------------------------------------ | -------------------- |
+| Region-Split Cover   | 38/62 rows, title left     | taller coral band, title below       | 40/60, title lower   |
+| Feature Stat         | figure left, numeral right | figure top, numeral behind           | centered figure      |
+| Quote Layout         | 40/60 coral+ink            | stacked: coral mark top, quote below | stacked              |
+| Closing Plate        | cream + bottom coral band  | cream + taller band                  | centered, band below |
+| Three-Column Catalog | head over 3-up             | head top, 3 stacked                  | head top, 2+1        |
+| Timeline             | horizontal rail            | vertical rail                        | compact horizontal   |
+
+Safe area holds the `5cqw` padding on the short edge; re-step display per ratio so no load-bearing
+line drops below the 1.4cqw floor. Bebas runs ~20% wider in CJK — adjust line breaks per ratio.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. The system supplies surfaces and geometry, not brands.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, stats, dates, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `N×`. Real numerals appear only when the script supplies them — the feature stat,
+catalog, and timeline especially carry placeholders, not fabricated values. Wallpaper numerals
+(01, 02…) are decorative and may be ordinal.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one focal element per region dominates at 3–5× its neighbor.
+- **Silence** — sparse frames 40–55% empty; only the catalog runs dense.
+- **Surfaces** — two or three of coral/ink/cream, meeting at hard edges; no fourth surface.
+- **Type** — Bebas uppercase + tracked, fit-to-measure; ink-on-coral; eyebrow color correct for surface; ≥1.4cqw floor.
+- **Depth** — 0 shadow, 0 rounded rectangle; hatch + wallpaper carry texture.
+- **Anchor** — centered on sign-offs/heads, panel/left on features/quotes; no 3 consecutive frames share an anchor.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; timing and transitions are a later stage. The 0.6s opacity fade in the source is a deck mechanic, not a frame spec.
+- **Bebas Neue + Inter via Google Fonts.** CJK pairing (ZCOOL XiaoWei / Yozai) carries over from the source's CJK section; Bebas runs ~20% wider in CJK.
+- **9:16 / 1:1 are guidance**, not pixel-locked; verify the legibility floor per ratio.
+- The 45° hatch, wallpaper numerals, giant marks, and timeline dash are CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/coral/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/coral/caption-skin.html
new file mode 100644
index 0000000..d284d03
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/coral/caption-skin.html
@@ -0,0 +1,225 @@
+<!--
+  Coral — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a coral 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 flat warm-cream block on a single ink hairline border — coral's hard-edge
+  geometry, square corners, ZERO radius, ZERO shadow (coral's depth is hard color edges,
+  never cast). Bebas Neue, uppercase + tracked, ink glyphs. Upcoming words sit in faint
+  ink; the current word gets a solid coral-fire flat block (the brand's signature
+  hard-edge fill — a square block, no blur, no radius) with ink reading on top; spoken
+  words settle to solid ink, fill cleared. Brand/key terms carry a coral hairline
+  underline (the counter inflection).
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 flat cream block — single ink hairline border, square corners (coral's hard-edge
+     geometry), ZERO radius, ZERO shadow */
+  .caption-pill {
+    max-width: 78%;
+    padding: 18px 44px 20px;
+    background: var(--cap-canvas, #f5f0e8);
+    border: 1px solid var(--cap-ink, #1a1a1a);
+    border-radius: 0;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.1em 0.3em;
+    font-family: var(--font-display, "Bebas Neue"), sans-serif;
+    font-weight: 400;
+    text-transform: uppercase;
+    font-size: clamp(44px, 4.8vw, 64px);
+    line-height: 1.04;
+    letter-spacing: 0.06em;
+  }
+
+  /* upcoming — faint ink, no fill */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.12em;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 40%, var(--cap-canvas, #f5f0e8));
+  }
+  /* current word — THE coral-fire flat block (box-shadow spread = a hard square block
+     w/o layout shift; no blur, no radius), ink reading on top */
+  .caption-word.is-active {
+    color: var(--cap-ink, #1a1a1a);
+    background: var(--cap-accent, #e85d5d);
+    box-shadow: 0 0 0 0.1em var(--cap-accent, #e85d5d);
+  }
+  /* already spoken — solid ink, fill cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #1a1a1a);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — a coral hairline underline (coral's only display inflection) */
+  .caption-word.cap-brand {
+    text-decoration: underline;
+    text-decoration-thickness: 0.06em;
+    text-decoration-color: var(--cap-accent, #e85d5d);
+    text-underline-offset: 0.12em;
+  }
+  /* numerals / data — Inter body voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Inter"), ui-sans-serif, sans-serif;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a1a) 72%, var(--cap-canvas, #f5f0e8));
+  }
+  /* emphasis — a coral-dark hairline underline (the counter accent) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--cap-accent-2, #d44a4a);
+    text-underline-offset: 0.1em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(38px, 5.8vw, 54px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.97 }, { scale: 1, duration: 0.14, ease: "power2.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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/coral/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/coral/frame-showcase.html
new file mode 100644
index 0000000..ae87659
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/coral/frame-showcase.html
@@ -0,0 +1,1268 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Coral</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --coral: #e85d5d;
+        --coral-dark: #d44a4a;
+        --cream: #f5f0e8;
+        --cream-dark: #e8e0d4;
+        --ink: #1a1a1a;
+        --gray: #6b6b6b;
+        --light-gray: #b0b0b0;
+        --white: #ffffff;
+        --display: "Bebas Neue", sans-serif;
+        --body: "Inter", sans-serif;
+        --hatch: repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 20px,
+          rgba(0, 0, 0, 0.06) 20px,
+          rgba(0, 0, 0, 0.06) 40px
+        );
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #0e0e0e;
+      }
+      body {
+        background: var(--cream);
+        color: var(--ink);
+        font-family: var(--body);
+        -webkit-font-smoothing: antialiased;
+      }
+      .beb {
+        font-family: var(--display);
+        text-transform: uppercase;
+      }
+      .eyebrow {
+        font-family: var(--body);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 4px;
+        font-size: 13px;
+        color: var(--coral);
+      }
+
+      /* doc rhythm */
+      section {
+        padding: 120px 100px;
+        position: relative;
+      }
+      .sec-head {
+        display: flex;
+        align-items: flex-end;
+        gap: 24px;
+        margin-bottom: 64px;
+        border-bottom: 3px solid rgba(26, 26, 26, 0.15);
+        padding-bottom: 24px;
+      }
+      .sec-head .num {
+        font-family: var(--display);
+        font-size: 64px;
+        line-height: 0.8;
+        color: var(--coral);
+      }
+      .sec-head h2 {
+        font-family: var(--display);
+        font-size: 64px;
+        line-height: 0.8;
+        letter-spacing: 2px;
+      }
+      .sec-head .sp {
+        flex: 1;
+      }
+      .sec-head .tag {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 12px;
+        color: var(--gray);
+      }
+
+      /* COVER — region split */
+      .cover {
+        min-height: 100vh;
+        display: grid;
+        grid-template-rows: 38% 62%;
+      }
+      .cover .top {
+        background: var(--coral);
+        position: relative;
+        overflow: hidden;
+        padding: 56px 64px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+      }
+      .cover .top::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: var(--hatch);
+        pointer-events: none;
+      }
+      .cover .top .brand {
+        font-family: var(--display);
+        font-size: 40px;
+        letter-spacing: 6px;
+        color: var(--ink);
+        position: relative;
+        z-index: 2;
+      }
+      .cover .top .meta {
+        text-align: right;
+        position: relative;
+        z-index: 2;
+      }
+      .cover .top .meta .ml {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 12px;
+        color: var(--ink);
+        opacity: 0.7;
+      }
+      .cover .top .meta .mf {
+        font-family: var(--display);
+        font-size: 38px;
+        letter-spacing: 2px;
+        color: var(--ink);
+        margin-top: 4px;
+      }
+      .cover .top .bignum {
+        position: absolute;
+        right: 48px;
+        bottom: -70px;
+        font-family: var(--display);
+        font-size: 340px;
+        line-height: 0.7;
+        color: rgba(0, 0, 0, 0.12);
+        z-index: 1;
+      }
+      .cover .bot {
+        background: var(--cream);
+        padding: 64px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .cover h1 {
+        font-family: var(--display);
+        font-size: clamp(80px, 13vw, 190px);
+        line-height: 0.88;
+        letter-spacing: 4px;
+        color: var(--ink);
+      }
+      .cover h1 em {
+        font-style: normal;
+        color: var(--coral);
+      }
+      .cover .rule {
+        height: 3px;
+        background: rgba(26, 26, 26, 0.15);
+        margin: 40px 0 28px;
+        max-width: 900px;
+      }
+      .cover .strap {
+        font-family: var(--body);
+        font-weight: 300;
+        font-size: 24px;
+        line-height: 1.5;
+        color: var(--gray);
+        max-width: 760px;
+      }
+      .cover .strap b {
+        font-weight: 600;
+        color: var(--ink);
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0;
+        border: 1px solid rgba(26, 26, 26, 0.12);
+      }
+      .sw {
+        padding: 0;
+      }
+      .sw .chip {
+        height: 160px;
+        border-bottom: 1px solid rgba(26, 26, 26, 0.12);
+      }
+      .sw:not(:last-child) {
+        border-right: 1px solid rgba(26, 26, 26, 0.12);
+      }
+      .sw .meta {
+        padding: 22px 24px;
+      }
+      .sw .name {
+        font-family: var(--display);
+        font-size: 30px;
+        letter-spacing: 2px;
+      }
+      .sw .hex {
+        font-family: var(--body);
+        font-size: 13px;
+        letter-spacing: 1px;
+        color: var(--gray);
+        margin-top: 4px;
+      }
+      .sw .role {
+        font-size: 13px;
+        line-height: 1.5;
+        color: var(--gray);
+        margin-top: 12px;
+      }
+      .palette-row {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+      }
+      .palette-row + .palette-row .sw .chip {
+        border-top: 0;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 260px 1fr;
+        border-bottom: 1px solid rgba(26, 26, 26, 0.12);
+        align-items: center;
+      }
+      .type-row .lbl {
+        padding: 28px 0;
+      }
+      .type-row .tok {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 13px;
+      }
+      .type-row .meta {
+        font-size: 12px;
+        color: var(--gray);
+        margin-top: 8px;
+        line-height: 1.6;
+      }
+      .type-row .spec {
+        padding: 28px 0 28px 40px;
+        border-left: 1px solid rgba(26, 26, 26, 0.12);
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .comp-note {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--gray);
+        margin-bottom: 18px;
+      }
+      .comp-grid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 28px;
+        margin-bottom: 56px;
+      }
+      .span3 {
+        grid-column: span 3;
+      }
+      .span4 {
+        grid-column: span 4;
+      }
+      .span6 {
+        grid-column: span 6;
+      }
+      .c-card {
+        background: var(--white);
+        border-top: 5px solid var(--coral);
+        padding: 32px;
+        height: 100%;
+      }
+      .c-card .ico {
+        width: 48px;
+        height: 48px;
+        background: var(--coral);
+        color: var(--white);
+        font-family: var(--display);
+        font-size: 24px;
+        display: grid;
+        place-items: center;
+        margin-bottom: 24px;
+      }
+      .c-card .t {
+        font-family: var(--display);
+        font-size: 34px;
+        letter-spacing: 1px;
+        line-height: 1.05;
+      }
+      .c-card .x {
+        font-size: 14px;
+        line-height: 1.6;
+        color: var(--gray);
+        margin-top: 14px;
+      }
+      .c-card .stat {
+        font-family: var(--display);
+        font-size: 48px;
+        color: var(--coral);
+        margin-top: 24px;
+        line-height: 1;
+      }
+      .c-side {
+        background: var(--white);
+        border-left: 4px solid var(--coral);
+        padding: 20px 24px;
+        margin-bottom: 18px;
+      }
+      .c-side .v {
+        font-family: var(--display);
+        font-size: 44px;
+        letter-spacing: 1px;
+        line-height: 1;
+      }
+      .c-side .l {
+        font-family: var(--body);
+        font-size: 12px;
+        letter-spacing: 1px;
+        color: var(--gray);
+        margin-top: 6px;
+      }
+      .c-accent {
+        width: 80px;
+        height: 4px;
+        background: var(--coral);
+      }
+      .timeline {
+        position: relative;
+        height: 120px;
+        margin-top: 20px;
+      }
+      .timeline .line {
+        position: absolute;
+        top: 20px;
+        left: 0;
+        right: 0;
+        height: 4px;
+        background: var(--ink);
+      }
+      .timeline .pt {
+        position: absolute;
+        top: 12px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--coral);
+        border: 4px solid var(--cream);
+      }
+      .timeline .lab {
+        position: absolute;
+        top: 44px;
+        font-family: var(--display);
+        font-size: 22px;
+        letter-spacing: 1px;
+        transform: translateX(-50%);
+      }
+      .infobar {
+        background: var(--cream-dark);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 28px 36px;
+      }
+      .infobar .bt {
+        font-family: var(--display);
+        font-size: 44px;
+        letter-spacing: 2px;
+      }
+      .infobar .bm {
+        font-family: var(--body);
+        font-size: 12px;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        color: var(--gray);
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 12px;
+        color: var(--gray);
+      }
+      .fw .flabel b {
+        color: var(--ink);
+        letter-spacing: 1px;
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--cream);
+        box-shadow: 0 2px 0 rgba(26, 26, 26, 0.1);
+      }
+      .frame .hatch {
+        position: absolute;
+        inset: 0;
+        background: var(--hatch);
+        pointer-events: none;
+        z-index: 1;
+      }
+      .frame .z {
+        position: relative;
+        z-index: 2;
+      }
+
+      /* f1 cover region split */
+      .f1 {
+        display: grid;
+        grid-template-rows: 36% 64%;
+      }
+      .f1 .t {
+        background: var(--coral);
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        padding: 2.6cqw 3cqw;
+      }
+      .f1 .t .brand {
+        font-family: var(--display);
+        font-size: 2cqw;
+        letter-spacing: 0.4cqw;
+        color: var(--ink);
+      }
+      .f1 .t .mf {
+        font-family: var(--display);
+        font-size: 1.9cqw;
+        letter-spacing: 0.1cqw;
+        color: var(--ink);
+      }
+      .f1 .t .bn {
+        position: absolute;
+        right: 2cqw;
+        bottom: -3cqw;
+        font-family: var(--display);
+        font-size: 16cqw;
+        line-height: 0.7;
+        color: rgba(0, 0, 0, 0.12);
+      }
+      .f1 .b {
+        background: var(--cream);
+        padding: 0 3cqw;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+      .f1 .b h3 {
+        font-family: var(--display);
+        font-size: 8.5cqw;
+        line-height: 0.86;
+        letter-spacing: 0.3cqw;
+        color: var(--ink);
+      }
+      .f1 .b h3 em {
+        font-style: normal;
+        color: var(--coral);
+      }
+      .f1 .b .ey {
+        font-family: var(--body);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 0.95cqw;
+        color: var(--coral);
+        margin-bottom: 1.2cqw;
+      }
+
+      /* f2 feature stat — coral full + giant numeral */
+      .f2 {
+        background: var(--coral);
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 7cqw;
+      }
+      .f2 .bn {
+        position: absolute;
+        right: 3cqw;
+        top: -2cqw;
+        font-family: var(--display);
+        font-size: 34cqw;
+        line-height: 0.8;
+        color: rgba(0, 0, 0, 0.12);
+        z-index: 1;
+      }
+      .f2 .ey {
+        font-family: var(--body);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.3cqw;
+        font-size: 1cqw;
+        color: var(--ink);
+        margin-bottom: 1.4cqw;
+      }
+      .f2 h3 {
+        font-family: var(--display);
+        font-size: 7cqw;
+        line-height: 0.9;
+        letter-spacing: 0.2cqw;
+        color: var(--ink);
+      }
+      .f2 .x {
+        font-family: var(--body);
+        font-weight: 300;
+        font-size: 1.5cqw;
+        line-height: 1.5;
+        color: var(--ink);
+        max-width: 44cqw;
+        margin-top: 1.6cqw;
+      }
+
+      /* f3 quote — coral panel + ink panel */
+      .f3 {
+        display: grid;
+        grid-template-columns: 40% 60%;
+      }
+      .f3 .l {
+        background: var(--coral);
+        position: relative;
+        overflow: hidden;
+        display: flex;
+        align-items: flex-start;
+        padding: 3cqw;
+      }
+      .f3 .l .mark {
+        font-family: var(--display);
+        font-size: 24cqw;
+        line-height: 0.6;
+        color: rgba(0, 0, 0, 0.35);
+      }
+      .f3 .r {
+        background: var(--ink);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .f3 .r .q {
+        font-family: var(--body);
+        font-weight: 300;
+        font-size: 2.6cqw;
+        line-height: 1.35;
+        color: var(--cream);
+      }
+      .f3 .r .acc {
+        width: 4cqw;
+        height: 0.25cqw;
+        background: var(--coral);
+        margin: 2.4cqw 0 1.4cqw;
+      }
+      .f3 .r .at {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.25cqw;
+        font-size: 0.95cqw;
+        color: var(--cream);
+      }
+      .f3 .r .ro {
+        font-family: var(--body);
+        font-size: 0.85cqw;
+        letter-spacing: 0.05cqw;
+        color: var(--light-gray);
+        margin-top: 0.4cqw;
+      }
+
+      /* f4 closing — cream + coral band */
+      .f4 {
+        background: var(--cream);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        position: relative;
+      }
+      .f4 .ey {
+        font-family: var(--body);
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.4cqw;
+        font-size: 1cqw;
+        color: var(--coral);
+        margin-bottom: 1.6cqw;
+      }
+      .f4 h3 {
+        font-family: var(--display);
+        font-size: 9cqw;
+        line-height: 0.86;
+        letter-spacing: 0.3cqw;
+        color: var(--ink);
+      }
+      .f4 .acc {
+        width: 5cqw;
+        height: 0.25cqw;
+        background: var(--coral);
+        margin-top: 2.4cqw;
+      }
+      .f4 .band {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 8cqw;
+        background: var(--coral);
+        overflow: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0 4cqw;
+      }
+      .f4 .band::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        background: var(--hatch);
+      }
+      .f4 .band span {
+        position: relative;
+        font-family: var(--display);
+        font-size: 2.2cqw;
+        letter-spacing: 0.2cqw;
+        color: var(--ink);
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 40px;
+      }
+      .do-card {
+        padding: 40px;
+      }
+      .do-card.do {
+        background: var(--ink);
+        color: var(--cream);
+      }
+      .do-card.dont {
+        background: var(--white);
+        border-top: 5px solid var(--coral);
+      }
+      .do-card h4 {
+        font-family: var(--display);
+        font-size: 40px;
+        letter-spacing: 2px;
+        margin-bottom: 24px;
+      }
+      .do-card.do h4 {
+        color: var(--coral);
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-size: 16px;
+        line-height: 1.55;
+        padding-left: 26px;
+        position: relative;
+        margin-bottom: 14px;
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--display);
+        font-size: 18px;
+      }
+      .do-card.do li::before {
+        content: "+";
+        color: var(--coral);
+      }
+      .do-card.dont li::before {
+        content: "\2715";
+        color: var(--coral);
+      }
+      .do-card.dont li {
+        color: var(--gray);
+      }
+
+      .foot {
+        padding: 64px 100px;
+        background: var(--ink);
+        color: var(--cream);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--display);
+        font-size: 30px;
+        letter-spacing: 3px;
+      }
+      .foot .r {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+        font-size: 12px;
+        color: var(--light-gray);
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches,
+        .palette-row {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #f5f0e8 !important;
+        --secondary: #1a1a1a !important;
+        --tertiary: #6b6b6b !important;
+        --accent: #e85d5d !important;
+        --f-disp: "Bebas Neue", sans-serif !important;
+        --f-body: "Inter", sans-serif !important;
+        --coral: #e85d5d !important;
+        --cream: #f5f0e8 !important;
+        --ink: #1a1a1a !important;
+        --gray: #6b6b6b !important;
+        --display: "Bebas Neue", sans-serif !important;
+        --body: "Inter", sans-serif !important;
+        --coral-dark: #d44a4a !important;
+        --cream-dark: #e8e0d4 !important;
+        --light-gray: #b0b0b0 !important;
+        --white: #ffffff !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover" style="padding: 0">
+      <div class="top">
+        <div class="brand">Coral</div>
+        <div class="meta">
+          <div class="ml">Frame System</div>
+          <div class="mf">Vol. 01 / 1920×1080</div>
+        </div>
+        <div class="bignum">01</div>
+      </div>
+      <div class="bot">
+        <h1>Solid planes,<br /><em>hard edges.</em></h1>
+        <div class="rule"></div>
+        <div class="strap">
+          <b>A bold magazine-poster system in motion.</b> Three surfaces — coral fire, ink black,
+          warm cream — meeting at hard color edges, animated by Bebas Neue caps and a constant 45°
+          hatch.
+        </div>
+      </div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="num">01</span>
+        <h2>Palette</h2>
+        <span class="sp"></span><span class="tag">Three surfaces + ink + neutrals</span>
+      </div>
+      <div class="swatches palette-row">
+        <div class="sw">
+          <div class="chip" style="background: var(--coral)"></div>
+          <div class="meta">
+            <div class="name">Coral</div>
+            <div class="hex">#E85D5D</div>
+            <div class="role">The signature — accent and full-region environment.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--coral-dark)"></div>
+          <div class="meta">
+            <div class="name">Coral Dark</div>
+            <div class="hex">#D44A4A</div>
+            <div class="role">Gradient stop + chart comparison series.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream)"></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#F5F0E8</div>
+            <div class="role">The warm canvas — magazine paper.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="meta">
+            <div class="name">Black</div>
+            <div class="hex">#1A1A1A</div>
+            <div class="role">Strongest surface; quote + statement grounds.</div>
+          </div>
+        </div>
+      </div>
+      <div class="swatches palette-row" style="border-top: 0">
+        <div class="sw">
+          <div class="chip" style="background: var(--cream-dark)"></div>
+          <div class="meta">
+            <div class="name">Cream Dark</div>
+            <div class="hex">#E8E0D4</div>
+            <div class="role">Subtle region differentiation; info bars.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--gray)"></div>
+          <div class="meta">
+            <div class="name">Gray</div>
+            <div class="hex">#6B6B6B</div>
+            <div class="role">Body paragraphs, labels, meta.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--light-gray)"></div>
+          <div class="meta">
+            <div class="name">Light Gray</div>
+            <div class="hex">#B0B0B0</div>
+            <div class="role">Tertiary text on ink surfaces.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--white); box-shadow: inset 0 0 0 1px rgba(26, 26, 26, 0.12)"
+          ></div>
+          <div class="meta">
+            <div class="name">White</div>
+            <div class="hex">#FFFFFF</div>
+            <div class="role">Card fills against coral or cream.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section style="background: var(--cream-dark)">
+      <div class="sec-head">
+        <span class="num">02</span>
+        <h2>Typography</h2>
+        <span class="sp"></span><span class="tag">Bebas Neue + Inter</span>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">hero-title</div>
+          <div class="meta">Bebas Neue · 120px · 4px track<br />uppercase always · line 0.9</div>
+        </div>
+        <div class="spec">
+          <span class="beb" style="font-size: 104px; letter-spacing: 4px; line-height: 0.9"
+            >Coral Fire</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">jumbo-feature</div>
+          <div class="meta">Bebas Neue · up to 200px · 12px track</div>
+        </div>
+        <div class="spec">
+          <span class="beb" style="font-size: 120px; letter-spacing: 12px; color: var(--coral)"
+            >2026</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">section-headline</div>
+          <div class="meta">Bebas Neue · 80px · 2px track</div>
+        </div>
+        <div class="spec">
+          <span class="beb" style="font-size: 72px; letter-spacing: 2px">Hard Color Edges</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">body-light</div>
+          <div class="meta">Inter · weight 300 · pull-quote voice</div>
+        </div>
+        <div class="spec">
+          <p style="font-weight: 300; font-size: 28px; line-height: 1.5; max-width: 760px">
+            The voice break — Inter Light takes over when content needs to feel personal rather than
+            declarative.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div class="lbl">
+          <div class="tok">section-label</div>
+          <div class="meta">Inter · 700 · 4px track · uppercase</div>
+        </div>
+        <div class="spec"><span class="eyebrow">Fig. 02 — Type Specimen</span></div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="num">03</span>
+        <h2>Components</h2>
+        <span class="sp"></span><span class="tag">Flat · hard edges · coral borders</span>
+      </div>
+
+      <div class="comp-note">Column cards — white fill, 5px coral top border, 48px icon square</div>
+      <div class="comp-grid">
+        <div class="span4">
+          <div class="c-card">
+            <div class="ico">A</div>
+            <div class="t">Region Split</div>
+            <div class="x">Solid color planes meet at a hard edge. The boundary is the layout.</div>
+            <div class="stat">01</div>
+          </div>
+        </div>
+        <div class="span4">
+          <div class="c-card">
+            <div class="ico">B</div>
+            <div class="t">Diagonal Hatch</div>
+            <div class="x">A 45° 6%-opacity overlay gives coral regions texture without depth.</div>
+            <div class="stat">45°</div>
+          </div>
+        </div>
+        <div class="span4">
+          <div class="c-card">
+            <div class="ico">C</div>
+            <div class="t">Wallpaper Numeral</div>
+            <div class="x">Oversized Bebas at 12% opacity sits behind a region's title.</div>
+            <div class="stat">12%</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="comp-grid">
+        <div class="span4">
+          <div class="comp-note">Sidebar tiles — 4px coral left border</div>
+          <div class="c-side">
+            <div class="v">240%</div>
+            <div class="l">Output Lift</div>
+          </div>
+          <div class="c-side">
+            <div class="v">3.4×</div>
+            <div class="l">Faster Cuts</div>
+          </div>
+          <div class="c-side" style="margin-bottom: 0">
+            <div class="v">12K</div>
+            <div class="l">Frames Shipped</div>
+          </div>
+        </div>
+        <div class="span4">
+          <div class="comp-note">Accent rule + info bar</div>
+          <div class="c-accent" style="margin-bottom: 28px"></div>
+          <div class="infobar">
+            <span class="bt">Coverage</span><span class="bm">Coral · Ink · Cream</span>
+          </div>
+          <div style="margin-top: 28px" class="comp-note">Card icon</div>
+          <div
+            class="ico"
+            style="
+              width: 48px;
+              height: 48px;
+              background: var(--coral);
+              color: #fff;
+              font-family: var(--display);
+              font-size: 24px;
+              display: grid;
+              place-items: center;
+            "
+          >
+            →
+          </div>
+        </div>
+        <div class="span4">
+          <div class="comp-note">Timeline — ink line, coral nodes, cream halo</div>
+          <div class="timeline">
+            <div class="line"></div>
+            <div class="pt" style="left: 4%"></div>
+            <div class="lab" style="left: 6%">Plan</div>
+            <div class="pt" style="left: 34%"></div>
+            <div class="lab" style="left: 36%">Block</div>
+            <div class="pt" style="left: 64%"></div>
+            <div class="lab" style="left: 66%">Set</div>
+            <div class="pt" style="left: 92%"></div>
+            <div class="lab" style="left: 90%">Ship</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section style="background: var(--cream-dark)">
+      <div class="sec-head">
+        <span class="num">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="sp"></span><span class="tag">True 16:9 · cqw scaled</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Region-Split Cover</b><span>· identity · coral / cream</span></div>
+          <div class="frame f1">
+            <div class="t">
+              <div class="brand">Coral</div>
+              <div class="mf">Vol. 01</div>
+              <div class="bn">01</div>
+            </div>
+            <div class="b">
+              <div class="ey">Frame System</div>
+              <h3>Solid planes,<br /><em>hard edges.</em></h3>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Feature Stat</b><span>· coral environment · wallpaper numeral</span>
+          </div>
+          <div class="frame f2">
+            <div class="bn">240</div>
+            <div class="z">
+              <div class="ey">By The Numbers</div>
+              <h3>Two hundred<br />forty percent.</h3>
+              <p class="x">
+                Output lift across the system — the figure carries the region while the hatch gives
+                it texture.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Quote Layout</b><span>· coral panel + ink panel · giant mark</span>
+          </div>
+          <div class="frame f3">
+            <div class="l"><div class="mark">&ldquo;</div></div>
+            <div class="r">
+              <div class="q">Bebas declares.<br />Inter explains.</div>
+              <div class="acc"></div>
+              <div class="at">The System Voice</div>
+              <div class="ro">Typographic Principle</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Closing Plate</b><span>· closer · cream + coral band · centered</span>
+          </div>
+          <div class="frame f4">
+            <div class="ey">Coral — Frame System</div>
+            <h3>Meet at<br />the edge.</h3>
+            <div class="acc"></div>
+            <div class="band"><span>Thank You</span><span>2026</span></div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="num">05</span>
+        <h2>Frame Rules</h2>
+        <span class="sp"></span><span class="tag">Flat · hard-edge · coral</span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>Compose as multi-surface region splits — coral, ink, cream at hard edges.</li>
+            <li>Set every Bebas element uppercase with 1–12px letter-spacing.</li>
+            <li>Render eyebrows in coral on cream/ink, in ink on coral.</li>
+            <li>Apply the 45° hatch at 6% opacity on coral regions.</li>
+            <li>Fill underweight coral regions with a 12%-opacity wallpaper numeral.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>Never render Bebas in sentence case or without tracking.</li>
+            <li>No fourth surface; no drop shadows, elevations, or rounded rectangles.</li>
+            <li>No white headlines on coral — Bebas on coral is always ink.</li>
+            <li>No gray headlines; gray is body and meta only.</li>
+            <li>Don't pair Bebas with a different body sans than Inter.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--cream);
+        --cap-accent: var(--coral);
+        --cap-accent-2: var(--coral-dark);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.6cqw;
+        background: var(--cap-canvas);
+        border: 1px solid var(--cap-ink);
+        border-radius: 0;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.3em;
+        font-family: var(--display);
+        font-weight: 400;
+        text-transform: uppercase;
+        font-size: 3.6cqw;
+        line-height: 1.04;
+        letter-spacing: 0.06em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.12em;
+        color: color-mix(in srgb, var(--cap-ink) 40%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.1em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 1px dashed rgba(26, 26, 26, 0.28);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        font-size: 0.85cqw;
+        letter-spacing: 0.1cqw;
+        color: var(--gray);
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="num">06</span>
+        <h2>Captions</h2>
+        <span class="sp"></span><span class="tag">Lower-third · Karaoke</span>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="hatch" style="background: var(--hatch); opacity: 0.5"></div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · fill cleared</span></div>
+          <div class="frame capdemo">
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Coral</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#F5F0E8" />
+        <rect width="100" height="42" fill="#E85D5D" />
+        <rect x="20" y="60" width="60" height="9" fill="#1A1A1A" />
+        <rect x="20" y="74" width="38" height="9" fill="#E85D5D" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/creative-mode/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/creative-mode/FRAME.md
new file mode 100644
index 0000000..e00e6fe
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/creative-mode/FRAME.md
@@ -0,0 +1,333 @@
+---
+version: alpha
+name: Creative Mode — Frame (video / frame layer)
+description: >
+  Video-first companion to Creative Mode's design.md. The unit is the frame (1920×1080),
+  not the slide-in-a-deck. Atoms are identical and sacred — warm cream canvas, 4px ink
+  borders, hard offset shadows (no blur), Archivo Black uppercase at 0.92 line-height,
+  JetBrains Mono taxonomy, Space Grotesk body, the four-accent palette. Composition,
+  frame scale, and aspect-ratio behavior are rewritten for the frame. Motion is 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:
+  cream: "#EFE9D9"
+  cream-2: "#E4DCC4"
+  ink: "#0F0F0F"
+  ink-2: "#2A2A2A"
+  green: "#1F8A4C"
+  green-dark: "#136636"
+  pink: "#F06CA8"
+  pink-dark: "#D14E8B"
+  orange: "#E85A1F"
+  yellow: "#F5C518"
+
+typography:
+  # — reading ramp (px @ 1920, with cqw) —
+  body-lg:    { fontFamily: "Space Grotesk", px: 28, cqw: 1.46, weight: 400, lineHeight: 1.4 }
+  body-md:    { fontFamily: "Space Grotesk", px: 24, cqw: 1.25, weight: 400, lineHeight: 1.3 }
+  mono-label: { fontFamily: "JetBrains Mono", px: 24, cqw: 1.25, weight: 400, tracking: "0.06em", upper: true }
+  mono-kicker:{ fontFamily: "JetBrains Mono", px: 24, cqw: 1.25, weight: 400, tracking: "0.14em", upper: true }
+  table-head: { fontFamily: "Archivo Black", px: 28, cqw: 1.46, weight: 400, upper: true }
+  # — display / hero ramp (frame-native, cqw-first) —
+  step-title: { fontFamily: "Archivo Black", px: 34,  cqw: 1.77, weight: 400, lineHeight: 1.0, upper: true }
+  badge-label:{ fontFamily: "Archivo Black", px: 28,  cqw: 1.46, weight: 400, upper: true }
+  marker:     { fontFamily: "Archivo Black", cqw: 2.4, weight: 400, lineHeight: 1.0, upper: true }
+  stamp-num:  { fontFamily: "Archivo Black", cqw: 2.2, weight: 400, lineHeight: 0.9 }
+  stat-num:   { fontFamily: "Archivo Black", cqw: 6.4, weight: 400, lineHeight: 0.88 }
+  step-num:   { fontFamily: "Archivo Black", cqw: 7.0, weight: 400, lineHeight: 0.85 }
+  display-head: { fontFamily: "Archivo Black", cqw: 4.2, weight: 400, lineHeight: 0.92, tracking: "-0.01em", upper: true }
+  display-lg: { fontFamily: "Archivo Black", cqw: 8.0,  weight: 400, lineHeight: 0.9,  tracking: "-0.01em", upper: true }
+  display-xl: { fontFamily: "Archivo Black", cqw: 11.0, weight: 400, lineHeight: 0.9,  tracking: "-0.01em", upper: true }
+  display-hero:{ fontFamily: "Archivo Black", cqw: 15.5,weight: 400, lineHeight: 0.84, tracking: "-0.02em", upper: true }
+
+spacing:
+  frame-pad: "3.3cqw"        # 64px chrome gutter @1920
+  content-gutter: "5cqw"     # 96px content gutter @1920
+  grid-gap: "1.5cqw"         # 28px
+  cell-pad: "1.7cqw"         # 32px
+
+components:
+  frame-chrome:
+    typography: "{typography.mono-label}"
+    placement: "topbar 2.5cqw from top, meta 2.5cqw from bottom, both inset {spacing.frame-pad}"
+    rounded: "0"
+    shadow: "none"
+    description: "Mono topbar (section label left + 999px ink-stroked pill right) + meta footer (descriptor left + NN • NN counter right, 0.5cqw ink dot divider). Present on most frames."
+  stat-cell:
+    backgroundColor: "{colors.green} · {colors.pink} · {colors.orange} · {colors.cream}"
+    textColor: "{colors.cream} on accent · {colors.ink} on cream"
+    border: "0.4cqw solid {colors.ink}"
+    rounded: "0"
+    padding: "{spacing.cell-pad}"
+    typography: "{typography.stat-num} + {typography.mono-label}"
+    shadow: "none"
+    description: "Flat accent/cream stat tile, square corners, no shadow."
+  step-card:
+    backgroundColor: "{colors.cream} · {colors.pink} · {colors.yellow} · {colors.green}"
+    border: "0.4cqw solid {colors.ink}"
+    rounded: "0"
+    padding: "{spacing.cell-pad}"
+    typography: "{typography.step-num} + {typography.step-title} + {typography.body-md}"
+    shadow: "none"
+    description: "Ink-bordered card; giant step-num top. Sequence alternates cream with accents and ENDS on green."
+  marker-block:
+    backgroundColor: "{colors.pink}"
+    textColor: "{colors.ink}"
+    border: "0.4cqw solid {colors.ink}"
+    rounded: "0"
+    typography: "{typography.marker}"
+    shadow: "1.25cqw 1.25cqw 0 {colors.orange}, 1.25cqw 1.25cqw 0 0.2cqw {colors.ink}"
+    description: "The one hard-offset featured callout per frame."
+  kicker-block:
+    backgroundColor: "{colors.ink}"
+    textColor: "{colors.cream}"
+    typography: "{typography.mono-kicker}"
+    padding: "0.5cqw 1cqw"
+    rounded: "0"
+    description: "Inverted eyebrow chip."
+  badge-rotated:
+    backgroundColor: "{colors.yellow}"
+    border: "0.4cqw solid {colors.ink}"
+    typography: "{typography.badge-label}"
+    rounded: "0"
+    transform: "rotate(-4deg)"
+    description: "Deliberate-imperfection annotation."
+  pill-badge:
+    backgroundColor: "{colors.cream}"
+    border: "0.2cqw solid {colors.ink}"
+    rounded: "999px"
+    typography: "{typography.mono-label}"
+    description: "The ONLY rounded element; reads as a chip, not a card."
+  stamp:
+    backgroundColor: "{colors.pink}"
+    border: "0.4cqw solid {colors.cream}"
+    size: "~18cqw square"
+    rounded: "0"
+    transform: "rotate(-6deg)"
+    typography: "{typography.stamp-num}"
+    description: "Closing seal with a cream circular inner ring."
+  comparison-table:
+    backgroundColor: "{colors.cream-2}"
+    border: "0.4cqw solid {colors.ink}"
+    rule: "0.3cqw solid {colors.ink}"
+    rounded: "0"
+    typography: "{typography.table-head} + {typography.body-md}"
+    shadow: "none"
+    description: "Ink head row with cream Archivo labels; pink/green column-fill variants."
+  decorative-circle:
+    backgroundColor: "{colors.yellow}"
+    border: "0.4cqw solid {colors.ink}"
+    rounded: "50%"
+    description: "Decorative figure; pairs with a green panel for shape contrast."
+---
+
+# Creative Mode — Frame (video / frame layer)
+
+## Overview
+
+Creative Mode at frame scale is a **neo-brutalist editorial poster in motion's clothing** — warm
+cream paper, near-black ink, and four accents that collide at full saturation. Every frame is one
+flat color-blocked composition: no gradients, no blurred shadows, no rounded cards (save the one
+pill chip). Depth is **hard offset shadow** (a solid same-direction duplicate) or **color-block
+contrast**, never light.
+
+The display voice is **Archivo Black in strict uppercase at 0.92 line-height** — letters overlap
+their own cap height; that tightness is the brand. **JetBrains Mono** carries every label, kicker,
+counter, and axis as a "technical artifact" register. **Space Grotesk** carries the few body lines.
+The frame is loud by construction and calm by restraint: two or three accents per frame, the green
+ground reserved for a single closing plate, the hard shadow spent on one featured element only.
+
+**Key characteristics at frame scale:**
+
+- **Cream ground** (`{colors.cream}`) on nearly every frame; `{colors.green}` reserved for the closing plate.
+- **0.4cqw (4px @1920) ink borders** on every structural element; 0.3cqw internal rules.
+- **Hard offset shadow** (≈1.25cqw, orange+ink) on one featured block per frame — never blurred.
+- **Archivo Black uppercase**, 0.92 line-height, always; sentence-case Archivo Black does not exist.
+- **Two or three accents per frame**, never all four; collisions are the design.
+- **One pill chip** (999px) per frame as the sole rounded element.
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — exactly one element dominates, at **3–6× its nearest neighbor** (a chasm, not a ramp): the `display-hero`/`display-xl` claim or the `stat-num` figure, never two rival headlines.
+- **Silence** — sparse frames (cover, claim, closer) read **45–60% empty**; the **stat grid and comparison ledger are the one dense exception**. Never fill a sparse frame to look complete.
+- **Restraint** — the scarce gestures fire **once per frame**: at most one hard-offset shadow, two-to-three accents (never all four), the green ground reserved for the single closing plate.
+- **Reference** — aim at a **Risograph editorial poster / punk-zine spread** (flat ink-bordered blocks, one big claim, vast cream); failure looks like a **rounded, soft-shadowed SaaS feature grid**.
+
+## The Frame
+
+- **Primary:** 1920×1080 (16:9). All display sizes authored in **`cqw`** (`px ÷ 1920 × 100 = cqw`).
+- **Vertical:** 1080×1920 (9:16). **Square:** 1080×1080 (1:1).
+- **Safe area:** chrome at `3.3cqw` (64px) inset; content at `5cqw` (96px) gutter. No load-bearing element crosses the `3.3cqw` line.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`. ALL
+frame-relative units are `cqw`/`cqh` (1cqw = 1% of the frame's width), resolved against that
+ground — **never `vw`.** `vw` measures the page viewport, so a frame inflates whenever it isn't
+rendered full-screen; `cqw` resolves against the frame at any render size. This is why every size
+in the display ramp is `cqw`.
+
+## Colors
+
+Tokens identical to the source. At frame scale: `{colors.cream}` is the **ground**, `{colors.ink}`
+is borders + type, and the four accents (`green` / `pink` / `orange` / `yellow`) are **flat fills
+rationed two-to-three per frame.** `{colors.orange}` is also the hard-shadow color. `{colors.green}`
+doubles as the single closing-plate ground — its rarity is the impact. Never introduce a fifth
+accent; never use pure white; never gradient.
+
+## Typography
+
+Two ramps. The **reading ramp** (body, mono labels, table heads) holds px+cqw for chrome and copy.
+The **display/hero ramp** is frame-native and authored in `cqw` — from `display-head` (4.2cqw) up
+to `display-hero` (15.5cqw) for a wordmark cover.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw (≈27px@1920)**. Mono chrome at 1.15cqw is colophon only.
+- **Fit-to-measure:** a headline's size tracks its line length. Cap the headline block at **≤ 78cqw** and never touch the safe margin. ≤3 words → `display-hero`/`display-xl`; 4–6 words → `display-lg`; 7+ words → `display-head`. Short lines go big; long lines step down.
+- **Uppercase + 0.92 line-height on all Archivo Black**, always. Mono carries 0.06–0.14em tracking. Never letter-space Archivo Black beyond the encoded −0.01em; never set body centered.
+
+## Depth & Surface
+
+Zero blur. Two depth devices only:
+
+- **Hard offset shadow** — a solid duplicate offset ≈1.25cqw in X and Y (`box-shadow: 1.25cqw 1.25cqw 0 {colors.orange}, 1.25cqw 1.25cqw 0 0.2cqw {colors.ink}`). **One featured block per frame** (marker, stamp). Diagram stacks may use a 0.95cqw ink-only offset.
+- **Color-block contrast** — cream on cream-2, ink on cream, accent on cream. No shadow needed when contrast carries.
+
+**Ceiling:** no blurred shadow, no gradient, no glow, anywhere.
+
+## Shapes
+
+- **0 radius** on every structural element — stat cells, step cards, table cells, markers, panels.
+- **50%** on decorative circles, stamp inner ring, the meta dot.
+- **999px** on the topbar pill chip only — the single rounded exception.
+- **Rotation** only at the fixed brand angles: badge −4deg, stamp −6deg.
+
+## Components
+
+- **frame-chrome** — the mono topbar + meta footer. Present on most frames; dropped only on a pure full-bleed wordmark beat if it competes.
+- **stat-cell / step-card** — ink-bordered flat-fill blocks; step sequences end on green.
+- **marker-block** — the one hard-shadow featured callout per frame.
+- **kicker-block** — inverted ink eyebrow chip; **badge-rotated** — −4deg yellow annotation; **pill-badge** — the lone rounded chip.
+- **stamp** — the −6deg closing seal. **comparison-table** — cream-2 ledger with ink head row.
+- **decorative-circle** — yellow disc for shape contrast against a green panel.
+
+## Frame Treatments
+
+> Recipe per plate: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> Authored at 1920×1080. Lean centered; vary the anchor; one idea per frame.
+
+### 1 · Wordmark Cover (identity · move: full-frame lockup · centered)
+
+**Ground** `{colors.cream}`, `frame-pad`. **Container** grid, chrome top/bottom, focal centered.
+**Composes** frame-chrome, the wordmark. **Focal** the two-line wordmark at `display-hero`
+(15.5cqw), centered, second line in an accent (`{colors.pink}`/`orange`). **Chrome** mono topbar
+(section label + pill) and meta footer (descriptor + 01•NN). **Accent** the second-line color only;
+optionally one corner decorative-circle bleeding off an edge. **Silence** ~55% empty cream.
+**Fixed** Archivo Black uppercase 0.84 lh, one accent on the wordmark, square corners. **Free** which
+accent, line break, whether a circle bleeds a corner. **Density** sparse.
+
+### 2 · Big Claim (oversized statement · move: scale · left)
+
+**Ground** one full-bleed accent (`{colors.pink}`/`green`/`orange`), `content-gutter`. **Container**
+flex, claim left-anchored and vertically centered. **Composes** kicker-block, the claim. **Focal**
+a 2–3 line claim at `display-xl`/`display-lg`, ink on the accent (ink-on-fire — never white).
+**Chrome** small ink kicker-block above the claim; mono meta footer. **Accent** the ground IS the
+accent; no second accent competes. **Silence** ~45% of the colored field empty. **Fixed** ink type
+on accent, fit-to-measure sizing, no shadow on type. **Free** the claim, which accent ground, which
+word breaks. **Density** sparse — one idea.
+
+### 3 · Stat Grid (catalog · move: density — the one dense frame · centered)
+
+**Ground** `{colors.cream}`, `content-gutter`. **Container** grid: a centered `display-head` over a
+3-up row of stat-cells. **Composes** frame-chrome, 3× stat-cell. **Focal** the row of three
+ink-bordered cells (green / pink / orange), each a `stat-num` + mono label. **Chrome** mono topbar +
+meta. **Accent** the three cell fills (the named density exception — three accents allowed here).
+**Silence** ~25% — tight by design. **Fixed** 0.4cqw borders, square corners, no per-cell shadow,
+mono labels. **Free** the three figures+labels, head copy, which three accents. **Density** dense-exception.
+
+### 4 · Closing Plate (closer · move: ground-swap · centered)
+
+**Ground** `{colors.green}` (the single green frame of the run), `frame-pad`. **Focal** a 2-line
+sign-off at `display-lg` in `{colors.cream}`, centered. **Composes** frame-chrome (cream variant),
+stamp. **Chrome** cream mono topbar + meta. **Accent** one `{colors.pink}` stamp rotated −6deg in
+a corner, cream ring + stamp-num. **Silence** ~55% empty green. **Fixed** green ground reserved to
+this beat, cream-on-green type, one stamp. **Free** sign-off copy, stamp text, stamp corner. **Density** sparse.
+
+### 5 · Featured Marker (callout · move: hard-shadow focal · left/asymmetric)
+
+**Ground** `{colors.cream}`. **Composes** frame-chrome, marker-block, optional body-md support line.
+**Focal** the pink marker-block with the signature orange+ink hard offset shadow, set asymmetrically.
+**Accent** pink block + orange shadow (two accents). **Silence** ~50%. **Fixed** exactly one hard
+shadow on the frame, 0.4cqw borders. **Free** marker copy, block position, optional support line.
+**Density** sparse.
+
+### 6 · Comparison Ledger (data · move: matrix · left)
+
+**Ground** `{colors.cream}`, `content-gutter`. **Composes** frame-chrome, comparison-table.
+**Focal** the cream-2 table with ink head row; one column fill (pink or green) marks the winner.
+**Accent** the single column fill. **Silence** tight — the second density exception. **Fixed**
+cream-2 fill, 0.3cqw internal rules, ink head row with cream Archivo labels. **Free** rows, which
+column fills, copy. **Density** dense-exception.
+
+## Composition Rules
+
+### Do
+
+- Compose around **one idea per frame**, focal element **3–5× its neighbors** (squint test).
+- **Lean centered** — cover, claim, stat grid, and closer all center their focal element; reserve left/asymmetric for the marker and ledger.
+- Keep sparse frames **45–60% empty**; only the stat grid and ledger run dense.
+- Use **two or three accents per frame**; reserve `{colors.green}` ground for the closing plate.
+- Spend the hard offset shadow on **one featured block per frame**.
+- Size headlines **fit-to-measure**; render Archivo Black uppercase at 0.92 lh.
+
+### Don't
+
+- Don't round corners (except the pill chip); don't gradient, blur, or glow.
+- Don't set Archivo Black in sentence case or letter-space it beyond −0.01em.
+- Don't use all four accents on one frame, a fifth accent, or pure white.
+- Don't center body copy or set labels in anything but JetBrains Mono.
+- Don't blow a headline edge-to-edge — step the ramp down for long lines.
+- Don't put two hard shadows on one frame.
+
+## Aspect-Ratio Behavior
+
+| Treatment         | 16:9                            | 9:16                         | 1:1                      |
+| ----------------- | ------------------------------- | ---------------------------- | ------------------------ |
+| Wordmark Cover    | two lines centered              | stacked taller, circle top   | centered, tighter        |
+| Big Claim         | claim left, full accent         | claim top, accent full       | claim centered           |
+| Stat Grid         | head over 3-up row              | head top, 3 stacked          | head top, 2×2 (4th cell) |
+| Closing Plate     | sign-off centered, stamp corner | stacked, stamp below         | centered, stamp corner   |
+| Featured Marker   | marker asymmetric               | marker centered, shadow down | marker centered          |
+| Comparison Ledger | full-width table                | table scrolls to fewer cols  | 2-col table              |
+
+Safe area holds the `3.3cqw` chrome inset on the short edge for every ratio; re-step display per
+ratio so no load-bearing line drops below the 1.4cqw floor.
+
+## Approved Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Products/sections are content-agnostic; the system supplies geometry, not brands.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, percentages, counts, or dates at frame scale. Render data slots as
+`— figure —`, `{metric}`, `N×`. Real numerals appear only when the script supplies them — the stat
+grid and ledger especially carry placeholders, not fabricated values.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one element dominates at 3–5× its neighbor, else rescale.
+- **Silence** — sparse frames 45–60% empty; only stat grid / ledger run dense.
+- **Accents** — two or three per frame, never all four; green ground only on the closer.
+- **Depth** — 0 blur; at most one hard offset shadow; color-block contrast otherwise.
+- **Geometry** — square corners except the pill; rotation only at −4/−6deg.
+- **Type** — Archivo Black uppercase 0.92 lh, fit-to-measure, ≥1.4cqw on load-bearing lines.
+- **Anchor** — centered default; left/asymmetric only on marker + ledger; no 3 consecutive frames share an anchor.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; timing and transitions are a later stage. The closing green is described as a _plate_, not a transition.
+- **Archivo Black requires Google Fonts**; fallback is `sans-serif`. CJK pairing (Noto Serif SC 900 / NSC 400) carries over from the source's CJK section.
+- **9:16 / 1:1 are guidance**, not pixel-locked; verify the legibility floor per ratio.
+- Decorative geometry (circle, stamp, stacked blocks) is CSS-only; no external imagery is required.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/creative-mode/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/creative-mode/caption-skin.html
new file mode 100644
index 0000000..246cb38
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/creative-mode/caption-skin.html
@@ -0,0 +1,226 @@
+<!--
+  Creative Mode — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a creative-mode
+  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 on a thick 4px ink border with a HARD offset shadow (a solid
+  same-direction ink+orange duplicate, no blur — creative-mode's only depth device),
+  square corners. Archivo Black, UPPERCASE, 0.92 line-height, ink glyphs. Upcoming words
+  sit in faint ink; the current word becomes a solid yellow inked block (the brand's
+  signature hard-offset-shadow accent block, no blur) with ink reading on top; spoken
+  words settle to solid ink, the accent block cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 cream card — thick 4px ink border + the signature HARD offset shadow
+     (a solid same-direction orange+ink duplicate, no blur), square corners */
+  .caption-pill {
+    max-width: 80%;
+    padding: 18px 40px 22px;
+    background: var(--cap-canvas, #efe9d9);
+    border: 4px solid var(--cap-ink, #0f0f0f);
+    border-radius: 0;
+    box-shadow:
+      14px 14px 0 var(--cap-accent-2, #e85a1f),
+      14px 14px 0 4px var(--cap-ink, #0f0f0f);
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.16em 0.3em;
+    font-family: var(--font-display, "Archivo Black"), sans-serif;
+    font-weight: 400;
+    text-transform: uppercase;
+    font-size: clamp(34px, 3.8vw, 52px);
+    line-height: 0.92;
+    letter-spacing: -0.01em;
+  }
+
+  /* upcoming — faint ink, no accent block */
+  .caption-word {
+    display: inline-block;
+    padding: 0.02em 0.1em;
+    color: color-mix(in srgb, var(--cap-ink, #0f0f0f) 38%, var(--cap-canvas, #efe9d9));
+  }
+  /* current word — THE hard yellow inked block (box-shadow spread = a hard square
+     block w/o layout shift; no blur), ink reading on top */
+  .caption-word.is-active {
+    color: var(--cap-ink, #0f0f0f);
+    background: var(--cap-accent, #f5c518);
+    box-shadow: 0 0 0 0.08em var(--cap-accent, #f5c518);
+  }
+  /* already spoken — solid ink, accent block cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #0f0f0f);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — an inverted ink chip (the kicker-block voice) */
+  .caption-word.cap-brand {
+    color: var(--cap-canvas, #efe9d9);
+    background: var(--cap-ink, #0f0f0f);
+    box-shadow: 0 0 0 0.08em var(--cap-ink, #0f0f0f);
+  }
+  /* numerals / data — the mono voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Space Grotesk"), ui-monospace, monospace;
+    color: color-mix(in srgb, var(--cap-ink, #0f0f0f) 72%, var(--cap-canvas, #efe9d9));
+  }
+  /* emphasis — a thick orange underline (the counter accent) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-decoration-color: var(--cap-accent-2, #e85a1f);
+    text-underline-offset: 0.12em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(30px, 5vw, 44px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.92 }, { scale: 1, duration: 0.16, ease: "back.out(2.2)" }, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/creative-mode/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/creative-mode/frame-showcase.html
new file mode 100644
index 0000000..e540e40
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/creative-mode/frame-showcase.html
@@ -0,0 +1,1330 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Creative Mode</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --cream: #efe9d9;
+        --cream-2: #e4dcc4;
+        --ink: #0f0f0f;
+        --ink-2: #2a2a2a;
+        --green: #1f8a4c;
+        --green-dark: #136636;
+        --pink: #f06ca8;
+        --pink-dark: #d14e8b;
+        --orange: #e85a1f;
+        --yellow: #f5c518;
+        --display: "Archivo Black", sans-serif;
+        --body: "Space Grotesk", sans-serif;
+        --mono: "JetBrains Mono", monospace;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: var(--ink-2);
+      }
+      body {
+        background: var(--cream);
+        color: var(--ink);
+        font-family: var(--body);
+        -webkit-font-smoothing: antialiased;
+      }
+      .disp {
+        font-family: var(--display);
+        text-transform: uppercase;
+        line-height: 0.92;
+        letter-spacing: -0.01em;
+      }
+      .mono {
+        font-family: var(--mono);
+        text-transform: uppercase;
+      }
+
+      /* ---------- doc rhythm ---------- */
+      section {
+        padding: 120px 96px;
+        border-bottom: 4px solid var(--ink);
+      }
+      .sec-head {
+        display: flex;
+        align-items: baseline;
+        gap: 24px;
+        margin-bottom: 64px;
+      }
+      .sec-head .idx {
+        font-family: var(--mono);
+        font-size: 18px;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        background: var(--ink);
+        color: var(--cream);
+        padding: 8px 14px;
+      }
+      .sec-head h2 {
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 52px;
+        line-height: 0.92;
+        letter-spacing: -0.01em;
+      }
+      .sec-head .rule {
+        flex: 1;
+        height: 4px;
+        background: var(--ink);
+        align-self: center;
+      }
+
+      /* ---------- COVER ---------- */
+      .cover {
+        min-height: 100vh;
+        padding: 64px;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        gap: 40px;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .topbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 24px;
+        font-family: var(--mono);
+        font-size: 20px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .cover .topbar span:first-child {
+        white-space: nowrap;
+      }
+      .cover .stage {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+        z-index: 2;
+      }
+      .cover .pill {
+        border: 2px solid var(--ink);
+        border-radius: 999px;
+        padding: 6px 18px;
+        white-space: nowrap;
+      }
+      .cover h1 {
+        font-family: var(--display);
+        text-transform: uppercase;
+        line-height: 0.86;
+        letter-spacing: -0.02em;
+        font-size: clamp(72px, 13vw, 210px);
+      }
+      .cover h1 .pink {
+        color: var(--pink);
+      }
+      .cover .sub {
+        display: flex;
+        gap: 18px;
+        align-items: center;
+        margin-top: 48px;
+        flex-wrap: wrap;
+      }
+      .cover .chip {
+        font-family: var(--mono);
+        font-size: 16px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        border: 4px solid var(--ink);
+        padding: 12px 18px;
+        background: var(--cream);
+        white-space: nowrap;
+      }
+      .cover .chip.g {
+        background: var(--green);
+        color: var(--cream);
+      }
+      .cover .chip.y {
+        background: var(--yellow);
+      }
+      .cover .footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        font-family: var(--mono);
+        font-size: 20px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        position: relative;
+        z-index: 2;
+        padding-left: 200px;
+      }
+      .cover .dot {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--ink);
+        margin: 0 12px;
+        vertical-align: middle;
+      }
+      /* cover decor */
+      .cover .badge {
+        position: absolute;
+        top: 44%;
+        right: 6%;
+        width: 260px;
+        height: 260px;
+        background: var(--pink);
+        border: 4px solid var(--ink);
+        transform: rotate(-6deg);
+        display: grid;
+        place-items: center;
+        z-index: 1;
+        box-shadow:
+          24px 24px 0 var(--orange),
+          24px 24px 0 4px var(--ink);
+      }
+      .cover .badge .ring {
+        width: 84%;
+        height: 84%;
+        border: 4px solid var(--ink);
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        text-align: center;
+      }
+      .cover .badge .ring span {
+        font-family: var(--display);
+        text-transform: uppercase;
+        line-height: 0.9;
+        font-size: 34px;
+      }
+      .cover .circle {
+        position: absolute;
+        left: -120px;
+        bottom: -120px;
+        width: 300px;
+        height: 300px;
+        border-radius: 50%;
+        background: var(--yellow);
+        border: 4px solid var(--ink);
+        z-index: 0;
+      }
+
+      /* ---------- PALETTE ---------- */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 24px;
+      }
+      .sw {
+        border: 4px solid var(--ink);
+      }
+      .sw .chip {
+        height: 150px;
+      }
+      .sw .meta {
+        padding: 16px 18px;
+        border-top: 4px solid var(--ink);
+        background: var(--cream);
+      }
+      .sw .name {
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 22px;
+        line-height: 1;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 16px;
+        letter-spacing: 0.04em;
+        margin-top: 8px;
+        color: var(--ink-2);
+      }
+      .sw .role {
+        font-size: 15px;
+        line-height: 1.4;
+        margin-top: 10px;
+        color: var(--ink-2);
+      }
+
+      /* ---------- TYPE ---------- */
+      .type-row {
+        border: 4px solid var(--ink);
+        margin-bottom: 24px;
+        display: grid;
+        grid-template-columns: 280px 1fr;
+        background: var(--cream);
+      }
+      .type-row .lbl {
+        border-right: 4px solid var(--ink);
+        padding: 24px;
+        background: var(--cream-2);
+      }
+      .type-row .lbl .tok {
+        font-family: var(--mono);
+        font-size: 16px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+      }
+      .type-row .lbl .meta {
+        font-family: var(--mono);
+        font-size: 13px;
+        color: var(--ink-2);
+        margin-top: 10px;
+        line-height: 1.6;
+        text-transform: none;
+        letter-spacing: 0;
+      }
+      .type-row .spec {
+        padding: 28px 32px;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      /* ---------- COMPONENTS ---------- */
+      .comp-grid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 28px;
+      }
+      .stat-cell {
+        border: 4px solid var(--ink);
+        padding: 28px 32px;
+      }
+      .stat-cell .n {
+        font-family: var(--display);
+        font-size: 84px;
+        line-height: 0.9;
+      }
+      .stat-cell .l {
+        font-family: var(--mono);
+        font-size: 18px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        margin-top: 12px;
+      }
+      .stat-cell.green {
+        background: var(--green);
+        color: var(--cream);
+      }
+      .stat-cell.pink {
+        background: var(--pink);
+        color: var(--ink);
+      }
+      .stat-cell.orange {
+        background: var(--orange);
+        color: var(--cream);
+      }
+      .stat-cell.cream {
+        background: var(--cream);
+      }
+      .step-card {
+        border: 4px solid var(--ink);
+        padding: 28px;
+        height: 300px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+      .step-card .num {
+        font-family: var(--display);
+        font-size: 120px;
+        line-height: 0.85;
+      }
+      .step-card .t {
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 28px;
+        line-height: 1;
+      }
+      .step-card .d {
+        font-size: 18px;
+        line-height: 1.4;
+        margin-top: 10px;
+      }
+      .step-card.cream {
+        background: var(--cream);
+      }
+      .step-card.yellow {
+        background: var(--yellow);
+      }
+      .step-card.pink {
+        background: var(--pink);
+      }
+      .step-card.green {
+        background: var(--green);
+        color: var(--cream);
+      }
+      .marker {
+        background: var(--pink);
+        border: 4px solid var(--ink);
+        padding: 36px 44px;
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 46px;
+        line-height: 1;
+        box-shadow:
+          24px 24px 0 var(--orange),
+          24px 24px 0 4px var(--ink);
+        align-self: flex-start;
+      }
+      .kicker-block {
+        background: var(--ink);
+        color: var(--cream);
+        font-family: var(--mono);
+        font-size: 20px;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        padding: 10px 18px;
+        align-self: flex-start;
+      }
+      .badge-rot {
+        background: var(--yellow);
+        border: 4px solid var(--ink);
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 26px;
+        padding: 14px 22px;
+        transform: rotate(-4deg);
+        align-self: flex-start;
+      }
+      .pill-badge {
+        border: 2px solid var(--ink);
+        border-radius: 999px;
+        font-family: var(--mono);
+        font-size: 18px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        padding: 8px 18px;
+        align-self: flex-start;
+      }
+      .span-3 {
+        grid-column: span 3;
+      }
+      .span-4 {
+        grid-column: span 4;
+      }
+      .span-6 {
+        grid-column: span 6;
+      }
+      .span-12 {
+        grid-column: span 12;
+      }
+      .comp-note {
+        font-family: var(--mono);
+        font-size: 14px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--ink-2);
+        margin-bottom: 14px;
+      }
+
+      /* table */
+      .cm-table {
+        border: 4px solid var(--ink);
+        background: var(--cream-2);
+        width: 100%;
+        border-collapse: collapse;
+      }
+      .cm-table th,
+      .cm-table td {
+        border: 3px solid var(--ink);
+        padding: 18px 26px;
+        text-align: left;
+        font-size: 20px;
+      }
+      .cm-table thead th {
+        background: var(--ink);
+        color: var(--cream);
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 22px;
+        border-color: var(--cream);
+      }
+      .cm-table td.k {
+        font-family: var(--mono);
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        font-size: 17px;
+      }
+      .cm-table .col-pink {
+        background: var(--pink);
+      }
+      .cm-table .col-green {
+        background: var(--green);
+        color: var(--cream);
+      }
+
+      /* ---------- COMPOSITIONS (frame scale) ---------- */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .frame-wrap .flabel {
+        display: flex;
+        gap: 16px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        font-size: 15px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--ink-2);
+      }
+      .frame-wrap .flabel b {
+        color: var(--ink);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        border: 4px solid var(--ink);
+        background: var(--cream);
+      }
+      .frame .chrome-top,
+      .frame .chrome-bot {
+        position: absolute;
+        left: 3.3cqw;
+        right: 3.3cqw;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-family: var(--mono);
+        text-transform: uppercase;
+        font-size: 1.15cqw;
+        letter-spacing: 0.08em;
+        color: var(--ink);
+        z-index: 5;
+      }
+      .frame .chrome-top {
+        top: 2.5cqw;
+      }
+      .frame .chrome-bot {
+        bottom: 2.5cqw;
+      }
+      .frame .chrome-top .pill {
+        border: 0.2cqw solid var(--ink);
+        border-radius: 999px;
+        padding: 0.3cqw 0.9cqw;
+        white-space: nowrap;
+      }
+      .frame > .f-cover,
+      .frame > .f-claim,
+      .frame > .f-stats,
+      .frame > .f-close {
+        position: absolute;
+        inset: 0;
+      }
+      .frame .cdot {
+        display: inline-block;
+        width: 0.5cqw;
+        height: 0.5cqw;
+        border-radius: 50%;
+        background: var(--ink);
+        margin: 0 0.6cqw;
+        vertical-align: middle;
+      }
+
+      /* frame 1 — cover */
+      .f-cover {
+        display: grid;
+        place-items: center;
+      }
+      .f-cover h3 {
+        font-family: var(--display);
+        text-transform: uppercase;
+        line-height: 0.84;
+        letter-spacing: -0.02em;
+        font-size: 15.5cqw;
+        text-align: center;
+      }
+      .f-cover h3 .o {
+        color: var(--orange);
+      }
+
+      /* frame 2 — big claim on pink */
+      .f-claim {
+        background: var(--pink);
+        display: flex;
+        align-items: center;
+        padding: 0 8cqw;
+      }
+      .f-claim .stack h3 {
+        font-family: var(--display);
+        text-transform: uppercase;
+        line-height: 0.9;
+        letter-spacing: -0.01em;
+        font-size: 11cqw;
+        color: var(--ink);
+      }
+      .f-claim .ek {
+        font-family: var(--mono);
+        font-size: 1.3cqw;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        background: var(--ink);
+        color: var(--cream);
+        padding: 0.5cqw 1cqw;
+        display: inline-block;
+        margin-bottom: 2.4cqw;
+      }
+
+      /* frame 3 — stat grid */
+      .f-stats {
+        display: grid;
+        place-content: center;
+        gap: 3cqw;
+        padding: 0 7cqw;
+      }
+      .f-stats .head {
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 4.2cqw;
+        line-height: 0.92;
+        text-align: center;
+      }
+      .f-stats .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2cqw;
+      }
+      .f-stats .cell {
+        border: 0.4cqw solid var(--ink);
+        padding: 2.2cqw 2.4cqw;
+      }
+      .f-stats .cell .n {
+        font-family: var(--display);
+        font-size: 6.4cqw;
+        line-height: 0.88;
+      }
+      .f-stats .cell .l {
+        font-family: var(--mono);
+        font-size: 1.2cqw;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        margin-top: 0.8cqw;
+      }
+      .f-stats .green {
+        background: var(--green);
+        color: var(--cream);
+      }
+      .f-stats .pink {
+        background: var(--pink);
+      }
+      .f-stats .orange {
+        background: var(--orange);
+        color: var(--cream);
+      }
+
+      /* frame 4 — closing green */
+      .f-close {
+        color: var(--cream);
+        display: grid;
+        place-items: center;
+        position: relative;
+      }
+      .f-close h3 {
+        font-family: var(--display);
+        text-transform: uppercase;
+        line-height: 0.86;
+        letter-spacing: -0.01em;
+        font-size: 10cqw;
+        text-align: center;
+      }
+      .f-close .stamp {
+        position: absolute;
+        right: 7cqw;
+        top: 18cqw;
+        width: 18cqw;
+        height: 18cqw;
+        background: var(--pink);
+        border: 0.5cqw solid var(--cream);
+        transform: rotate(-6deg);
+        display: grid;
+        place-items: center;
+      }
+      .f-close .stamp .ring {
+        width: 84%;
+        height: 84%;
+        border: 0.4cqw solid var(--cream);
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+      }
+      .f-close .stamp span {
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 2.2cqw;
+        line-height: 0.9;
+        text-align: center;
+        color: var(--cream);
+      }
+      .frame.f-close {
+        background: var(--green);
+      }
+      .frame.f-close .chrome-top,
+      .frame.f-close .chrome-bot {
+        color: var(--cream);
+      }
+      .f-close .chrome-top .pill {
+        border-color: var(--cream);
+      }
+      .f-close .cdot {
+        background: var(--cream);
+      }
+
+      /* ---------- principles ---------- */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 28px;
+      }
+      .do-card {
+        border: 4px solid var(--ink);
+        padding: 32px;
+      }
+      .do-card.do {
+        background: var(--green);
+        color: var(--cream);
+      }
+      .do-card.dont {
+        background: var(--cream);
+      }
+      .do-card h4 {
+        font-family: var(--display);
+        text-transform: uppercase;
+        font-size: 26px;
+        margin-bottom: 18px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-size: 18px;
+        line-height: 1.5;
+        padding-left: 28px;
+        position: relative;
+        margin-bottom: 12px;
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--display);
+      }
+      .do-card.do li::before {
+        content: "+";
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--orange);
+      }
+
+      .foot {
+        padding: 64px 96px;
+        background: var(--ink);
+        color: var(--cream);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-family: var(--mono);
+        font-size: 16px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      @media (max-width: 1100px) {
+        .gallery,
+        .swatches {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #efe9d9 !important;
+        --secondary: #0f0f0f !important;
+        --tertiary: #e4dcc4 !important;
+        --accent: #f06ca8 !important;
+        --f-disp: "Archivo Black", sans-serif !important;
+        --f-body: "Space Grotesk", sans-serif !important;
+        --cream: #efe9d9 !important;
+        --cream-2: #e4dcc4 !important;
+        --ink: #0f0f0f !important;
+        --pink: #f06ca8 !important;
+        --display: "Archivo Black", sans-serif !important;
+        --body: "Space Grotesk", sans-serif !important;
+        --ink-2: #2a2a2a !important;
+        --green: #1f8a4c !important;
+        --green-dark: #136636 !important;
+        --pink-dark: #d14e8b !important;
+        --orange: #e85a1f !important;
+        --yellow: #f5c518 !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- ============ COVER ============ -->
+    <section class="cover">
+      <div class="topbar">
+        <span>Creative Mode — Frame System</span>
+        <span class="pill">Video / Frame Layer</span>
+      </div>
+      <div class="stage">
+        <h1>Creative<br /><span class="pink">Mode.</span></h1>
+        <div class="sub">
+          <span class="chip g">Neo-Brutalist</span>
+          <span class="chip">Archivo Black · JetBrains Mono</span>
+          <span class="chip y">4 Accents · Hard Shadow</span>
+        </div>
+      </div>
+      <div class="footer">
+        <span>Editorial · Punk-Zine · Swiss Grid</span>
+        <span>Frame Showcase<span class="dot"></span>1920 × 1080</span>
+      </div>
+      <div class="badge">
+        <div class="ring">
+          <span>Frame<br />Spec</span>
+        </div>
+      </div>
+      <div class="circle"></div>
+    </section>
+
+    <!-- ============ PALETTE ============ -->
+    <section>
+      <div class="sec-head">
+        <span class="idx">01</span>
+        <h2>Palette</h2>
+        <span class="rule"></span>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--cream)"></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#EFE9D9</div>
+            <div class="role">Universal canvas. Warm, never white.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="meta">
+            <div class="name">Ink</div>
+            <div class="hex">#0F0F0F</div>
+            <div class="role">Borders, type, rules, chrome.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--green)"></div>
+          <div class="meta">
+            <div class="name">Green</div>
+            <div class="hex">#1F8A4C</div>
+            <div class="role">Dominant accent + closing ground.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--pink)"></div>
+          <div class="meta">
+            <div class="name">Pink</div>
+            <div class="hex">#F06CA8</div>
+            <div class="role">High-energy fills, markers, stamp.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--orange)"></div>
+          <div class="meta">
+            <div class="name">Orange</div>
+            <div class="hex">#E85A1F</div>
+            <div class="role">The hard-shadow color. Stat fills.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--yellow)"></div>
+          <div class="meta">
+            <div class="name">Yellow</div>
+            <div class="hex">#F5C518</div>
+            <div class="role">Warm punctuation. Badges, circles.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream-2)"></div>
+          <div class="meta">
+            <div class="name">Cream 2</div>
+            <div class="hex">#E4DCC4</div>
+            <div class="role">Recessed table fill.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink-2)"></div>
+          <div class="meta">
+            <div class="name">Ink 2</div>
+            <div class="hex">#2A2A2A</div>
+            <div class="role">Secondary body text.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--green-dark)"></div>
+          <div class="meta">
+            <div class="name">Green Dk</div>
+            <div class="hex">#136636</div>
+            <div class="role">Depth on decorative levers.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--pink-dark)"></div>
+          <div class="meta">
+            <div class="name">Pink Dk</div>
+            <div class="hex">#D14E8B</div>
+            <div class="role">Shadow-side accent.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ TYPOGRAPHY ============ -->
+    <section>
+      <div class="sec-head">
+        <span class="idx">02</span>
+        <h2>Typography</h2>
+        <span class="rule"></span>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">display-hero</div>
+          <div class="meta">Archivo Black · 160px<br />line 0.92 · upper · −.01em</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 128px">LOUD</span></div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">display-md</div>
+          <div class="meta">Archivo Black · 96px<br />section headline</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 80px">MAKE IT MOVE</span></div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">stat-num</div>
+          <div class="meta">Archivo Black · 96px<br />line 0.9</div>
+        </div>
+        <div class="spec">
+          <span class="disp" style="font-size: 88px"
+            >240<span style="color: var(--orange)">%</span></span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">body-lg</div>
+          <div class="meta">Space Grotesk · 28px<br />line 1.4 · left-aligned</div>
+        </div>
+        <div class="spec">
+          <p style="font-size: 24px; line-height: 1.4; max-width: 760px">
+            Body copy sits in Space Grotesk — left-aligned, never centered. It explains while the
+            display type declares.
+          </p>
+        </div>
+      </div>
+      <div class="type-row">
+        <div class="lbl">
+          <div class="tok">mono-kicker</div>
+          <div class="meta">JetBrains Mono · 24px<br />.14em · upper</div>
+        </div>
+        <div class="spec">
+          <span class="mono" style="font-size: 22px; letter-spacing: 0.14em"
+            >FIG. 02 — TYPE SPECIMEN</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ COMPONENTS ============ -->
+    <section>
+      <div class="sec-head">
+        <span class="idx">03</span>
+        <h2>Components</h2>
+        <span class="rule"></span>
+      </div>
+
+      <div class="comp-note">Stat cells — 4px ink border, flat accent fills</div>
+      <div class="comp-grid" style="margin-bottom: 48px">
+        <div class="stat-cell green span-3">
+          <div class="n">240%</div>
+          <div class="l">Output Lift</div>
+        </div>
+        <div class="stat-cell pink span-3">
+          <div class="n">12K</div>
+          <div class="l">Frames Shipped</div>
+        </div>
+        <div class="stat-cell orange span-3">
+          <div class="n">3.4×</div>
+          <div class="l">Faster Cuts</div>
+        </div>
+        <div class="stat-cell cream span-3">
+          <div class="n">98</div>
+          <div class="l">Templates</div>
+        </div>
+      </div>
+
+      <div class="comp-note">Step cards — sequence ending on green</div>
+      <div class="comp-grid" style="margin-bottom: 48px">
+        <div class="step-card cream span-3">
+          <div class="num">01</div>
+          <div>
+            <div class="t">Block</div>
+            <div class="d">Lay the color planes.</div>
+          </div>
+        </div>
+        <div class="step-card yellow span-3">
+          <div class="num">02</div>
+          <div>
+            <div class="t">Set</div>
+            <div class="d">Lock the display caps.</div>
+          </div>
+        </div>
+        <div class="step-card pink span-3">
+          <div class="num">03</div>
+          <div>
+            <div class="t">Stamp</div>
+            <div class="d">Drop the hard shadow.</div>
+          </div>
+        </div>
+        <div class="step-card green span-3">
+          <div class="num">04</div>
+          <div>
+            <div class="t">Cut</div>
+            <div class="d">Swap the ground.</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="comp-grid">
+        <div class="span-6" style="display: flex; flex-direction: column; gap: 28px">
+          <div class="comp-note">Featured marker — 24px hard offset shadow</div>
+          <div class="marker">Make It Loud</div>
+          <div class="comp-note" style="margin-top: 14px">Chrome atoms</div>
+          <div style="display: flex; gap: 18px; flex-wrap: wrap">
+            <span class="kicker-block">Section / 01</span>
+            <span class="badge-rot">New</span>
+            <span class="pill-badge">Topbar Pill</span>
+          </div>
+        </div>
+        <div class="span-6">
+          <div class="comp-note">Comparison table — cream-2 fill, ink head row</div>
+          <table class="cm-table">
+            <thead>
+              <tr>
+                <th>Spec</th>
+                <th class="col-pink">Frame</th>
+                <th class="col-green">Slide</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td class="k">Border</td>
+                <td>4px ink</td>
+                <td>4px ink</td>
+              </tr>
+              <tr>
+                <td class="k">Shadow</td>
+                <td>24px hard</td>
+                <td>none</td>
+              </tr>
+              <tr>
+                <td class="k">Accents</td>
+                <td>2–3 / frame</td>
+                <td>2–3 / slide</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ COMPOSITIONS ============ -->
+    <section>
+      <div class="sec-head">
+        <span class="idx">04</span>
+        <h2>Frame Compositions</h2>
+        <span class="rule"></span>
+      </div>
+      <div class="gallery">
+        <div class="frame-wrap">
+          <div class="flabel"><b>Wordmark Cover</b><span>· identity · centered</span></div>
+          <div class="frame">
+            <div class="chrome-top">
+              <span>Creative Mode</span><span class="pill">01 — Cover</span>
+            </div>
+            <div class="f-cover">
+              <h3>Creative<br /><span class="o">Mode.</span></h3>
+            </div>
+            <div class="chrome-bot">
+              <span>Editorial System</span><span>01<span class="cdot"></span>04</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="frame-wrap">
+          <div class="flabel"><b>Big Claim</b><span>· oversized statement · left</span></div>
+          <div class="frame">
+            <div class="chrome-top"><span>Statement</span><span class="pill">02 — Claim</span></div>
+            <div class="f-claim">
+              <div class="stack">
+                <span class="ek">The Thesis</span>
+                <h3>Make<br />it move.</h3>
+              </div>
+            </div>
+            <div class="chrome-bot">
+              <span>One Idea / Frame</span><span>02<span class="cdot"></span>04</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="frame-wrap">
+          <div class="flabel"><b>Stat Grid</b><span>· catalog · the density frame</span></div>
+          <div class="frame">
+            <div class="chrome-top">
+              <span>By The Numbers</span><span class="pill">03 — Data</span>
+            </div>
+            <div class="f-stats">
+              <div class="head">The Numbers Don't Whisper</div>
+              <div class="row">
+                <div class="cell green">
+                  <div class="n">240%</div>
+                  <div class="l">Output Lift</div>
+                </div>
+                <div class="cell pink">
+                  <div class="n">3.4×</div>
+                  <div class="l">Faster Cuts</div>
+                </div>
+                <div class="cell orange">
+                  <div class="n">12K</div>
+                  <div class="l">Frames Shipped</div>
+                </div>
+              </div>
+            </div>
+            <div class="chrome-bot">
+              <span>Stat Cells</span><span>03<span class="cdot"></span>04</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="frame-wrap">
+          <div class="flabel">
+            <b>Closing Plate</b><span>· closer · green ground · centered</span>
+          </div>
+          <div class="frame f-close">
+            <div class="chrome-top">
+              <span>Creative Mode</span><span class="pill">04 — End</span>
+            </div>
+            <h3>That's<br />the mode.</h3>
+            <div class="stamp">
+              <div class="ring">
+                <span>Cut<br />Print</span>
+              </div>
+            </div>
+            <div class="chrome-bot">
+              <span>Thank You</span><span>04<span class="cdot"></span>04</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ PRINCIPLES ============ -->
+    <section style="border-bottom: none">
+      <div class="sec-head">
+        <span class="idx">05</span>
+        <h2>Frame Rules</h2>
+        <span class="rule"></span>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <ul>
+            <li>One idea per frame — two things means two frames.</li>
+            <li>Lean centered; reserve the green ground for the closing plate.</li>
+            <li>Two or three accents per frame, never all four.</li>
+            <li>4px ink borders, 24px hard offset on featured blocks only.</li>
+            <li>Archivo Black uppercase, 0.92 line-height, always.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <ul>
+            <li>No rounded corners except the topbar pill.</li>
+            <li>No gradients, no blurred shadows, no glow.</li>
+            <li>No Archivo Black in sentence case, ever.</li>
+            <li>No fifth accent; no pure-white background.</li>
+            <li>No headline blown edge-to-edge — size to the line.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- ============ CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) ============ -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--cream);
+        --cap-accent: var(--yellow);
+        --cap-accent-2: var(--orange);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 82cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 0.4cqw solid var(--cap-ink);
+        border-radius: 0;
+        box-shadow:
+          1cqw 1cqw 0 var(--cap-accent-2),
+          1cqw 1cqw 0 0.3cqw var(--cap-ink);
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.16em 0.3em;
+        font-family: var(--display);
+        font-weight: 400;
+        text-transform: uppercase;
+        font-size: 3.2cqw;
+        line-height: 0.92;
+        letter-spacing: -0.01em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0.02em 0.1em;
+        color: color-mix(in srgb, var(--cap-ink) 38%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.08em var(--cap-accent);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 0.15cqw dashed color-mix(in srgb, var(--ink) 38%, var(--cream));
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3.3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-size: 1cqw;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--ink-2);
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="idx">06</span>
+        <h2>Captions</h2>
+        <span class="rule"></span>
+      </div>
+      <div class="gallery">
+        <div class="frame-wrap">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="chrome-top"><span>Captions</span><span class="pill">Karaoke</span></div>
+            <div class="bandline"></div>
+            <div class="bandtag">Caption Band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="frame-wrap">
+          <div class="flabel">
+            <b>Settled line</b><span>· all spoken · accent block cleared</span>
+          </div>
+          <div class="frame capdemo">
+            <div class="chrome-top"><span>Captions</span><span class="pill">Lower-Third</span></div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span>Creative Mode · Frame Showcase</span>
+      <span>Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#EFE9D9" />
+        <rect
+          x="30"
+          y="30"
+          width="40"
+          height="40"
+          fill="#F06CA8"
+          stroke="#0F0F0F"
+          stroke-width="4"
+        />
+        <rect x="36" y="36" width="40" height="40" fill="none" stroke="#0F0F0F" stroke-width="4" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/daisy-days/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/daisy-days/FRAME.md
new file mode 100644
index 0000000..ed3ebf4
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/daisy-days/FRAME.md
@@ -0,0 +1,274 @@
+---
+version: alpha
+name: Daisy Days — Frame (video / frame layer)
+description: >
+  Video-first companion to Daisy Days' design.md. The unit is the frame (1920×1080). Atoms are
+  identical and sacred — the sunny-garden pastel palette (cream + turquoise/pink/butter/mint/
+  lavender/peach/sky + coral accent), charcoal 3px outlines, hard offset shadows (6/4px, no blur),
+  the Fredoka + Quicksand pairing, generous radii, headline text-shadow on color, dot bullets, and
+  the hand-drawn SVG ornament layer. 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:
+  cream: "#F5F0E6"
+  turquoise: "#7ECDC0"
+  soft-pink: "#F7C8D4"
+  butter: "#FDE68A"
+  mint: "#A8E6CF"
+  lavender: "#D4A5E8"
+  peach: "#FFCBA4"
+  sky: "#A8D8F0"
+  coral: "#F8635F"
+  text-dark: "#2D2D2D"
+  text-muted: "#6B6B6B"
+  white: "#FFFFFF"
+
+borders: { primary: "3px solid text-dark", thin: "2px solid text-dark" }
+shadows: { default: "6px 6px 0 text-dark", small: "4px 4px 0 text-dark", text-headline: "3px 3px 0 text-dark", text-headline-soft: "3px 3px 0 rgba(0,0,0,0.2)" }
+
+typography:
+  # — reading ramp (Quicksand) —
+  body:    { fontFamily: "Quicksand", cqw: 0.95, weight: 500, lineHeight: 1.6 }
+  body-strong:{ fontFamily: "Quicksand", cqw: 0.95, weight: 600, lineHeight: 1.5 }
+  meta:    { fontFamily: "Quicksand", cqw: 0.78, weight: 600, lineHeight: 1.45 }
+  # — display ramp (Fredoka One / Fredoka 600 — single weight, never italic) —
+  badge:   { fontFamily: "Fredoka One", cqw: 0.9, tracking: "0.02em" }
+  label-display:{ fontFamily: "Fredoka One", cqw: 1.3, lineHeight: 1.3, tracking: "0.02em" }
+  subtitle:{ fontFamily: "Fredoka One", cqw: 1.8, lineHeight: 1.2, tracking: "0.02em" }
+  quote:   { fontFamily: "Fredoka One", cqw: 2.6, lineHeight: 1.35 }
+  title:   { fontFamily: "Fredoka One", cqw: 3.0, lineHeight: 1.15, tracking: "0.02em" }
+  headline:{ fontFamily: "Fredoka One", cqw: 4.5, lineHeight: 1.1, tracking: "0.02em" }
+  display: { fontFamily: "Fredoka One", cqw: 6.5, lineHeight: 1.1, tracking: "0.02em" }
+
+spacing:
+  pad-slide: "3cqw"
+  radius: "20px"
+  radius-lg: "28px"
+  radius-pill: "50px"
+  radius-round: "50%"
+
+components:
+  card:
+    backgroundColor: "{colors.white}"
+    border: "3px solid {colors.text-dark}"
+    rounded: "{spacing.radius} (28px featured)"
+    shadow: "6px 6px 0 {colors.text-dark}"
+    description: "The universal container; white-on-pastel is standard."
+  framed-header:
+    backgroundColor: "pastel cap + {colors.white} body"
+    border: "3px solid {colors.text-dark} (one continuous)"
+    rounded: "{spacing.radius-lg}"
+    shadow: "6px 6px 0 {colors.text-dark}"
+    description: "Pastel header strip flush above a white body — one unit, one shadow."
+  badge-pill:
+    backgroundColor: "{colors.butter}"
+    border: "3px solid {colors.text-dark}"
+    rounded: "{spacing.radius-pill}"
+    typography: "{typography.badge}"
+    shadow: "4px 4px 0 {colors.text-dark}"
+    description: "Section tag. white-space:nowrap."
+  circle-marker:
+    backgroundColor: "any pastel"
+    textColor: "{colors.white} (dark on butter)"
+    border: "3px solid {colors.text-dark}"
+    rounded: "50%"
+    size: "bullet 20 / icon 44 / dot 48 / step 90"
+    typography: "Fredoka numeral"
+    description: "Steps carry a small shadow."
+  bullet-dot:
+    backgroundColor: "{colors.butter}"
+    border: "2px solid {colors.text-dark}"
+    rounded: "50%"
+    size: "20px (::before, 4px from line top)"
+    description: "Lists never use glyph bullets."
+  ornament:
+    type: "hand-drawn SVG (daisy, star, sun, cloud, rainbow)"
+    stroke: "2.1px {colors.text-dark}"
+    placement: "z-index:1 behind content (z-index:2), cropping past the frame edge"
+    description: "3–7 per frame, clustered at corners/edges."
+  quote-mark:
+    typography: "oversized Fredoka quote glyph"
+    color: "{colors.soft-pink} (charcoal stroke)"
+    description: "Above a quote body."
+  text-headline-shadow:
+    shadow: "3px 3px 0 {colors.text-dark} (soft 20% variant on pink/mint)"
+    appliesTo: "Fredoka headlines on saturated surfaces (cream headlines sit flat)"
+    description: "Makes the headline read 'outlined' like the shapes."
+---
+
+# Daisy Days — Frame (video / frame layer)
+
+## Overview
+
+Daisy Days at frame scale is a **cheerful, childlike system** — picture-book illustration meets
+sticker-sheet kawaii. Every shape carries a **3px charcoal outline**, every elevated element a
+**solid hard offset shadow** (no blur), every surface a sunny-garden pastel. The voice is one
+pairing: **Fredoka One** (chunky rounded, single weight) for every headline, **Quicksand** for
+every body and meta line. The signature is the **hand-drawn SVG ornament layer** — daisies, stars,
+suns, clouds, rainbows clustering at corners and cropping past the edge.
+
+The palette is **multi-pastel with one warm pop**: cream canvas, seven pastel surfaces, and
+`{colors.coral}` reserved for small high-attention markers only. Headlines on a saturated surface
+get a 3px charcoal text-shadow (so they read "outlined" like the shapes) and switch to white;
+headlines on cream sit flat in charcoal. Depth is 2D and graphic — thick outline + hard offset =
+sticker-on-paper.
+
+**Key characteristics at frame scale:**
+
+- **Cream default + rotating pastel surfaces**; `{colors.coral}` is a marker accent, never a surface.
+- **Fredoka One** headlines + **Quicksand 500/600** body — strict by role, never crossed.
+- **3px charcoal outline + hard offset shadow** (6/4px, zero blur) on every elevated shape.
+- **Generous radii** — 20px cards, 28px featured, pill badges, full-circle markers; no square corners.
+- **Headline text-shadow on saturated surfaces** (white text); flat charcoal on cream.
+- **Dot bullets** (outlined butter discs, never glyphs) + a **3–7 ornament wreath** per frame.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one Fredoka headline or content card dominates at 3–6× its neighbor.
+- **Silence** — **one content container per frame** surrounded by an ornament wreath; the **info-card grid is the one dense exception**. Empty corners read as broken.
+- **Restraint** — cream or **one** pastel surface; coral is a small-marker accent (never a surface); charcoal borders + hard offset shadows only; no ninth color.
+- **Reference** — aim at a **children's picture-book / sticker-sheet kawaii zine**; failure looks like a **flat, square-cornered, blurred-shadow corporate slide**.
+
+- **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:** `pad-slide` ~3cqw; ornaments deliberately bleed past the edge.
+
+**The container law (load-bearing).** Every frame ground sets `container-type: size`; ALL
+frame-relative units are `cqw`/`cqh` against it — never `vw`. Borders stay 3px/2px; radii stay
+20/28/50px; shadow offsets scale in `cqw` so the sticker offset holds proportionally.
+
+## Colors
+
+Tokens identical to the source. Default ground `{colors.cream}`; rotate saturated pastels
+(turquoise / soft-pink / butter / mint / lavender / peach / sky) for tonal mood. **Cards are white**
+on any surface. **Borders + shadows are always `{colors.text-dark}` charcoal** — never colored,
+never blurred, never `rgba` (save the soft text-shadow variant). `{colors.coral}` is the lone
+high-saturation accent — small markers (step circles, dots, headers) **only**, never a surface.
+Body is charcoal/muted; pastels carry **no semantic meaning**. No ninth color.
+
+## Typography
+
+Two ramps. The **reading ramp** (Quicksand 500 body 0.95cqw, 600 emphasis, meta) carries copy; the
+**display ramp** (Fredoka One `label-display` 1.3cqw → `display` 6.5cqw, single weight) carries
+every headline, title, quote, and marker numeral.
+
+- **Legibility floor:** any load-bearing line ≥ **1.4cqw**; meta is chrome only.
+- **Fit-to-measure:** size the headline to its length. Cap the block at **≤ 78cqw**; ≤3 words → `display`; 4–6 → `headline`; 7+ → `title`.
+- **Fredoka One for all display, Quicksand for all body — never crossed.** Fredoka is single-weight (no italic, no underline, no alt weights); Quicksand stays 500/600/700. Fredoka tracking 0.02em; Quicksand body never uppercase.
+
+## Depth & Surface
+
+2D graphic depth — hard offset shadow, solid charcoal, zero blur, bottom-right:
+
+- **`shadows.default` 6px** cards, frames, badges, chart containers.
+- **`shadows.small` 4px** small cards, step circles, avatars.
+- **Text-headline shadow** — 3px charcoal on Fredoka headlines over saturated surfaces (20% soft variant on pink/mint); cream headlines flat.
+- **Outline + offset** together are the sticker-on-paper signature.
+
+**Ceiling:** no blurred shadow, no `rgba` (except the soft text-shadow), no gradient, no glow; an element either casts a hard charcoal offset or none.
+
+## Shapes
+
+- **20px** cards, **28px** featured, **50px** pill (badges, counter), **50%** all circles, **4px** legend swatch. Zero square corners — every region is rounded.
+
+## Components
+
+- **card / framed-header** — the white-fill bordered containers (one shadow). **badge-pill** — butter section tag.
+- **circle-marker** family (bullet 20 / icon 44 / dot 48 / step 90) + **bullet-dot** — outlined pastel discs, Fredoka numerals.
+- **ornament** — the hand-drawn SVG sticker layer (3–7 per frame). **quote-mark** — soft-pink Fredoka anchor. **text-headline-shadow** — the on-color headline treatment.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> One content container per frame + a 3–7 ornament wreath; empty corners read as broken.
+
+### 1 · Cover (identity · move: ornament wreath · saturated · centered)
+
+**Ground** a saturated pastel (e.g. `{colors.turquoise}`). **Composes** badge-pill, display, body sub, 3–7 ornaments, counter. **Focal** a 1–2 line Fredoka `display` in **white with the 3px charcoal text-shadow**, centered, under a butter badge-pill. **Chrome** counter pill. **Accent** the ornament wreath (daisies + stars at corners, cropping past edges). **Silence** content centered; ornaments fill the edges. **Fixed** text-shadow on color, 3px outlines, charcoal shadows. **Free** surface color, ornament mix/positions, copy. **Density** full-but-not-crowded.
+
+### 2 · Info Cards (catalog · move: 3-up white cards · cream · the dense frame)
+
+**Ground** `{colors.cream}`, `pad-slide`. **Composes** headline (flat charcoal), 3× card (circle-icon + Fredoka title + Quicksand body), a couple ornaments. **Focal** three white 3px-bordered cards with 6px shadows. **Chrome** flat headline. **Accent** the pastel circle-icons (rotate turquoise/coral/lavender). **Silence** tight — the density exception (fewer ornaments here). **Fixed** white cards, 3px + 6px, 20px radius. **Free** card content, icon hues. **Density** dense-exception.
+
+### 3 · Process Steps (sequence · move: rotating circle markers · peach · centered)
+
+**Ground** `{colors.peach}` (or another pastel). **Composes** headline (white + text-shadow), 3–4 step circles + `→` arrows, ornaments. **Focal** a row of 90px outlined step circles, fills **rotating coral → mint → sky → lavender**, Fredoka white numerals, linked by Fredoka arrows. **Chrome** white headline with text-shadow. **Accent** the rotating circle fills. **Silence** moderate. **Fixed** 3px circles + small shadow, rotating fills, arrow glyphs. **Free** step count, labels. **Density** standard.
+
+### 4 · Quote (quote · move: quote-mark anchor · soft-pink · centered)
+
+**Ground** `{colors.soft-pink}`. **Composes** a white quote card (28px radius, 6px shadow), quote-mark, Fredoka quote, Quicksand attribution, ornaments. **Focal** a Fredoka `quote` in charcoal inside the white card, under an oversized soft-pink quote-mark. **Chrome** Quicksand 700 attribution. **Accent** the quote-mark + a star or two. **Silence** card centered, ornaments at corners. **Fixed** quote-mark anchor, white card. **Free** quote, attribution. **Density** moderate.
+
+### 5 · Framed Section (feature · move: cap+body card · cream)
+
+**Ground** `{colors.cream}`. **Composes** framed-header (pastel cap + white body), bullet-dot list, ornaments. **Focal** a framed-header — a pastel cap strip (Fredoka title, optional text-shadow) above a white body with a butter-dot bullet list. **Accent** the cap color + bullet dots. **Silence** moderate. **Fixed** one continuous 3px border + one shadow, butter dot bullets. **Free** cap color, list. **Density** standard.
+
+### 6 · Closing (closer · move: ornament wreath · saturated · centered)
+
+**Ground** a saturated pastel (e.g. `{colors.lavender}`). **Composes** badge-pill, display (white + text-shadow), 3–7 ornaments. **Focal** a Fredoka `display` sign-off in white with the charcoal text-shadow, centered. **Accent** the ornament wreath. **Silence** content centered. **Fixed** text-shadow on color, ornaments fill corners. **Free** sign-off, surface, ornaments. **Density** full.
+
+## Composition Rules
+
+### Do
+
+- Pair **Fredoka One headlines + Quicksand body** strictly by role.
+- Outline every shape **3px charcoal + a hard offset shadow** (6/4px, no blur); white card fills on any surface.
+- Give Fredoka headlines on **saturated surfaces a 3px charcoal text-shadow + white text**; flat charcoal on cream.
+- Use **outlined butter-disc bullets** (never glyphs); cluster **3–7 hand-drawn ornaments** per frame (corners, cropping past edges).
+- Keep **one content container per frame**; rotate marker colors (coral → mint → sky → lavender → butter); reserve coral for small markers.
+- Center most frames; lean cream for content-dense frames, saturated for cover/closer/quote.
+
+### Don't
+
+- No square corners; no blurred or `rgba` shadows (save the soft text-shadow).
+- No colored borders (charcoal only); no coral surface; no ninth color.
+- No third font; no Quicksand headline or Fredoka body; no italic/underline Fredoka; no uppercase Quicksand body.
+- No glyph bullets; no empty corners (ornaments fill them); no two competing content panels.
+- Don't blow a headline edge-to-edge — fit to measure.
+
+## Aspect-Ratio Behavior
+
+| Treatment      | 16:9                       | 9:16                             | 1:1        |
+| -------------- | -------------------------- | -------------------------------- | ---------- |
+| Cover          | centered, corner ornaments | centered, taller, more ornaments | centered   |
+| Info Cards     | 3 across                   | stacked                          | 2+1        |
+| Process Steps  | horizontal + arrows        | vertical, arrows rotate down     | 2×2        |
+| Quote          | centered card              | centered, taller                 | centered   |
+| Framed Section | cap + body                 | cap + body taller                | cap + body |
+| Closing        | centered, wreath           | centered, wreath                 | centered   |
+
+`pad-slide` holds on the short edge; re-step display above the 1.4cqw floor. On tighter ratios keep
+the ornament count toward the upper end (5–7) so corners never read empty.
+
+## Approved Real Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. Ornaments and pastels are content-agnostic; counters/badges carry per-deck text.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, dates, or counts at frame scale. Render slots as `— figure —`, `{metric}`,
+`N`. Step numbers and any chart values carry placeholders until the script supplies them; the slide
+counter is decorative chrome.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one Fredoka headline or content card dominates per frame.
+- **Silence** — one container per frame surrounded by an ornament wreath; only the info-card grid runs dense.
+- **Color** — cream or one pastel surface; coral markers only; charcoal borders/shadows; no ninth hue.
+- **Type** — Fredoka headlines (text-shadow + white on saturated, flat charcoal on cream), Quicksand body; ≥1.4cqw floor.
+- **Depth** — 3px outline + hard offset (no blur, no rgba save soft text-shadow); rounded corners only.
+- **Ornaments** — 3–7 per frame, cropping past edges; no empty corners. **Bullets** — outlined discs, never glyphs.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the source uses scroll-snap nav, no transition spec.
+- **Fonts:** the source names _Fredoka One_; Google now serves the **Fredoka** variable family — request `Fredoka:wght@500;600;700` and set display weight 600 (visually equal to Fredoka One), with `Fredoka One` kept first in the stack for environments that still serve it. Quicksand loads normally. CJK: ZCOOL XiaoWei (display) / Yozai (body).
+- **9:16 / 1:1 are guidance**; keep ornament count high so corners stay filled per ratio.
+- Ornaments (daisy/star/sun/cloud/rainbow), markers, and framed headers are CSS/SVG-only; recoloring SVG ornaments requires editing their stroke values.
+- **Contrast:** keep `{colors.text-muted}` off pastel surfaces (cream/white cards only); small text on saturated grounds should be charcoal or white.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/daisy-days/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/daisy-days/caption-skin.html
new file mode 100644
index 0000000..6a5141e
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/daisy-days/caption-skin.html
@@ -0,0 +1,229 @@
+<!--
+  Daisy Days — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has a daisy-days 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 cheerful picture-book card — a cream surface inside a 3px charcoal outline
+  with a hard 6px charcoal offset shadow (no blur) and a generous 24px radius, the
+  sticker-on-paper signature. Fredoka One glyphs, sentence case, charcoal ink. Upcoming
+  words sit in muted charcoal; the current word pops into a rounded sunny-pastel candy
+  block (coral fill, 3px charcoal outline, hard 3px offset shadow, 12px radius) with a
+  bouncy scale pop; spoken words settle to solid charcoal, the candy block cleared.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 picture-book card — cream surface, 3px charcoal outline, generous 24px radius,
+     a hard 6px charcoal offset shadow (no blur): the sticker-on-paper signature */
+  .caption-pill {
+    max-width: 80%;
+    padding: 18px 40px 22px;
+    background: var(--cap-canvas, #f5f0e6);
+    border: 3px solid var(--cap-ink, #2d2d2d);
+    border-radius: 24px;
+    box-shadow: 6px 6px 0 var(--cap-ink, #2d2d2d);
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.18em 0.32em;
+    font-family: var(--font-display, "Fredoka One"), "Baloo 2", sans-serif;
+    font-weight: 600;
+    font-size: clamp(38px, 4.2vw, 56px);
+    line-height: 1.22;
+    letter-spacing: 0.02em;
+  }
+
+  /* upcoming — muted charcoal, no candy block */
+  .caption-word {
+    display: inline-block;
+    padding: 0.02em 0.16em;
+    border-radius: 12px;
+    color: color-mix(in srgb, var(--cap-ink, #2d2d2d) 52%, var(--cap-canvas, #f5f0e6));
+  }
+  /* current word — THE sunny-pastel candy block: a rounded coral chip with a 3px
+     charcoal outline + a hard 3px charcoal offset shadow (no blur), charcoal on top */
+  .caption-word.is-active {
+    color: var(--cap-ink, #2d2d2d);
+    background: var(--cap-accent, #f8635f);
+    border-radius: 12px;
+    box-shadow:
+      0 0 0 3px var(--cap-ink, #2d2d2d),
+      3px 5px 0 0 var(--cap-ink, #2d2d2d);
+  }
+  /* already spoken — solid charcoal, candy block cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #2d2d2d);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — a butter candy chip, the cheerful second pastel */
+  .caption-word.cap-brand {
+    color: var(--cap-ink, #2d2d2d);
+    background: var(--cap-accent-2, #fde68a);
+    border-radius: 12px;
+    box-shadow: 0 0 0 3px var(--cap-ink, #2d2d2d);
+  }
+  /* numerals / data — Quicksand, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "Quicksand"), system-ui, sans-serif;
+    font-weight: 700;
+    color: color-mix(in srgb, var(--cap-ink, #2d2d2d) 78%, var(--cap-canvas, #f5f0e6));
+  }
+  /* emphasis — a butter underline rule (the second sunny pastel) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 3px;
+    text-decoration-color: var(--cap-accent-2, #fde68a);
+    text-underline-offset: 0.12em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(32px, 5.2vw, 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>
+  // the scene-aware word groups + real duration go 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.82 }, { scale: 1, duration: 0.2, ease: "back.out(2.6)" }, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/daisy-days/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/daisy-days/frame-showcase.html
new file mode 100644
index 0000000..c577bdb
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/daisy-days/frame-showcase.html
@@ -0,0 +1,1444 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Daisy Days</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --cream: #f5f0e6;
+        --turquoise: #7ecdc0;
+        --soft-pink: #f7c8d4;
+        --butter: #fde68a;
+        --mint: #a8e6cf;
+        --lavender: #d4a5e8;
+        --peach: #ffcba4;
+        --sky: #a8d8f0;
+        --coral: #f8635f;
+        --text-dark: #2d2d2d;
+        --text-muted: #6b6b6b;
+        --white: #ffffff;
+        --disp: "Fredoka", "Fredoka One", "Baloo 2", sans-serif;
+        --body: "Quicksand", sans-serif;
+        --shadow: 6px 6px 0 var(--text-dark);
+        --shadow-sm: 4px 4px 0 var(--text-dark);
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #1d1d1a;
+      }
+      body {
+        background: var(--cream);
+        color: var(--text-dark);
+        font-family: var(--body);
+        font-weight: 500;
+        -webkit-font-smoothing: antialiased;
+      }
+      .disp {
+        font-family: var(--disp);
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        line-height: 1.1;
+      }
+      .sec-head h2,
+      .sec-head .badge,
+      .cover h1,
+      .cover .badge,
+      .cover .counter,
+      .sw .name,
+      .card .ic,
+      .card .t,
+      .framed .cap,
+      .step .c,
+      .step .t,
+      .chip-b,
+      .do-card h4,
+      .do-card .badge,
+      .foot .l,
+      .df1 .badge,
+      .df1 h3,
+      .df2 h3,
+      .df2 .c .ic,
+      .df2 .c .t,
+      .df3 h3,
+      .df3 .st .c,
+      .df3 .st .t,
+      .df3 .ar,
+      .df4 .qm,
+      .df4 .q {
+        font-family: var(--disp);
+        font-weight: 600;
+      }
+      .tshadow {
+        text-shadow: 3px 3px 0 var(--text-dark);
+      }
+      .tshadow-soft {
+        text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
+      }
+
+      section {
+        padding: 90px 80px;
+        position: relative;
+        overflow: hidden;
+      }
+      .sec-head {
+        display: flex;
+        align-items: center;
+        gap: 18px;
+        margin-bottom: 48px;
+        position: relative;
+        z-index: 2;
+      }
+      .sec-head .badge {
+        font-family: var(--disp);
+        font-size: 0.95rem;
+        background: var(--butter);
+        border: 3px solid var(--text-dark);
+        border-radius: 50px;
+        padding: 8px 22px;
+        box-shadow: var(--shadow-sm);
+      }
+      .sec-head h2 {
+        font-family: var(--disp);
+        font-size: 46px;
+      }
+
+      /* daisy/star CSS ornaments */
+      .daisy {
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+      }
+      .daisy .p {
+        position: absolute;
+        width: 34%;
+        height: 50%;
+        background: var(--white);
+        border: 2.4px solid var(--text-dark);
+        border-radius: 50%;
+        left: 33%;
+        top: 0;
+        transform-origin: 50% 100%;
+      }
+      .daisy .c {
+        position: absolute;
+        width: 38%;
+        height: 38%;
+        border-radius: 50%;
+        background: var(--butter);
+        border: 2.4px solid var(--text-dark);
+        left: 31%;
+        top: 31%;
+        z-index: 2;
+      }
+      .star {
+        position: absolute;
+        z-index: 1;
+        pointer-events: none;
+        border: 2.2px solid var(--text-dark);
+        clip-path: polygon(
+          50% 0,
+          63% 38%,
+          100% 38%,
+          69% 61%,
+          82% 100%,
+          50% 76%,
+          18% 100%,
+          31% 61%,
+          0 38%,
+          37% 38%
+        );
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        background: var(--turquoise);
+        padding: 60px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        position: relative;
+        overflow: hidden;
+      }
+      .cover .badge {
+        font-family: var(--disp);
+        font-size: 0.95rem;
+        background: var(--butter);
+        border: 3px solid var(--text-dark);
+        border-radius: 50px;
+        padding: 10px 26px;
+        box-shadow: var(--shadow-sm);
+        margin-bottom: 32px;
+        position: relative;
+        z-index: 3;
+        white-space: nowrap;
+      }
+      .cover h1 {
+        font-family: var(--disp);
+        font-size: clamp(64px, 10vw, 150px);
+        line-height: 1.05;
+        color: var(--white);
+        text-shadow: 4px 4px 0 var(--text-dark);
+        position: relative;
+        z-index: 3;
+      }
+      .cover .sub {
+        font-family: var(--body);
+        font-weight: 600;
+        font-size: 22px;
+        line-height: 1.5;
+        color: var(--text-dark);
+        max-width: 680px;
+        margin-top: 28px;
+        position: relative;
+        z-index: 3;
+      }
+      .cover .counter {
+        position: fixed;
+        bottom: 24px;
+        left: 50%;
+        transform: translateX(-50%);
+        background: var(--white);
+        border: 3px solid var(--text-dark);
+        border-radius: 50px;
+        padding: 6px 22px;
+        font-family: var(--disp);
+        font-size: 0.9rem;
+        box-shadow: var(--shadow-sm);
+        z-index: 5;
+        white-space: nowrap;
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: 22px;
+        position: relative;
+        z-index: 2;
+      }
+      .sw {
+        background: var(--white);
+        border: 3px solid var(--text-dark);
+        border-radius: 20px;
+        overflow: hidden;
+        box-shadow: var(--shadow-sm);
+      }
+      .sw .chip {
+        height: 90px;
+        border-bottom: 3px solid var(--text-dark);
+      }
+      .sw .meta {
+        padding: 12px 14px;
+      }
+      .sw .name {
+        font-family: var(--disp);
+        font-size: 1rem;
+      }
+      .sw .hex {
+        font-family: var(--body);
+        font-weight: 600;
+        font-size: 11px;
+        color: var(--text-muted);
+        margin-top: 4px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        align-items: center;
+        padding: 22px 0;
+        border-bottom: 3px solid rgba(45, 45, 45, 0.12);
+      }
+      .type-row .tok {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 12px;
+        color: var(--text-muted);
+      }
+      .type-row .m {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 11px;
+        color: var(--text-muted);
+        margin-top: 8px;
+        line-height: 1.5;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 12px;
+        color: var(--text-muted);
+        margin-bottom: 20px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 28px;
+        margin-bottom: 48px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .card {
+        background: var(--white);
+        border: 3px solid var(--text-dark);
+        border-radius: 20px;
+        box-shadow: var(--shadow);
+        padding: 30px;
+      }
+      .card .ic {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: 3px solid var(--text-dark);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-size: 1.6rem;
+        margin-bottom: 18px;
+      }
+      .card .t {
+        font-family: var(--disp);
+        font-size: 1.5rem;
+      }
+      .card .x {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 1.6;
+        color: var(--text-muted);
+        margin-top: 8px;
+      }
+      .framed {
+        border: 3px solid var(--text-dark);
+        border-radius: 28px;
+        overflow: hidden;
+        box-shadow: var(--shadow);
+      }
+      .framed .cap {
+        padding: 18px 28px;
+        font-family: var(--disp);
+        font-size: 1.4rem;
+        color: var(--white);
+        text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
+      }
+      .framed .bd {
+        background: var(--white);
+        padding: 28px;
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 1.6;
+      }
+      .steps {
+        display: flex;
+        gap: 20px;
+        align-items: flex-start;
+      }
+      .step {
+        flex: 1;
+        text-align: center;
+      }
+      .step .c {
+        width: 90px;
+        height: 90px;
+        border-radius: 50%;
+        border: 3px solid var(--text-dark);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-size: 2.2rem;
+        color: var(--white);
+        box-shadow: var(--shadow-sm);
+        margin: 0 auto;
+      }
+      .step .t {
+        font-family: var(--disp);
+        font-size: 1.2rem;
+        margin-top: 14px;
+      }
+      .step .x {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 13px;
+        color: var(--text-muted);
+        margin-top: 6px;
+      }
+      .bullets {
+        list-style: none;
+      }
+      .bullets li {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 15px;
+        line-height: 1.6;
+        padding-left: 32px;
+        position: relative;
+        margin-bottom: 12px;
+      }
+      .bullets li::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 5px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        border: 2px solid var(--text-dark);
+        background: var(--butter);
+      }
+      .chips {
+        display: flex;
+        gap: 14px;
+        flex-wrap: wrap;
+      }
+      .chip-b {
+        font-family: var(--disp);
+        font-size: 0.85rem;
+        border: 3px solid var(--text-dark);
+        border-radius: 50px;
+        padding: 8px 20px;
+        box-shadow: var(--shadow-sm);
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+        position: relative;
+        z-index: 2;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 12px;
+        color: var(--text-muted);
+      }
+      .fw .flabel b {
+        color: var(--text-dark);
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        border: 3px solid var(--text-dark);
+        border-radius: 16px;
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        padding: 0 6cqw;
+      }
+
+      /* f1 cover */
+      .df1 {
+        background: var(--turquoise);
+      }
+      .df1 .badge {
+        font-family: var(--disp);
+        font-size: 1.1cqw;
+        background: var(--butter);
+        border: 0.22cqw solid var(--text-dark);
+        border-radius: 50px;
+        padding: 0.6cqw 1.6cqw;
+        box-shadow: 0.3cqw 0.3cqw 0 var(--text-dark);
+        margin-bottom: 2cqw;
+        white-space: nowrap;
+      }
+      .df1 h3 {
+        font-family: var(--disp);
+        font-size: 9cqw;
+        line-height: 1.05;
+        color: var(--white);
+        text-shadow: 0.4cqw 0.4cqw 0 var(--text-dark);
+      }
+      .df1 .sub {
+        font-family: var(--body);
+        font-weight: 600;
+        font-size: 1.5cqw;
+        color: var(--text-dark);
+        margin-top: 2cqw;
+        max-width: 60cqw;
+      }
+
+      /* f2 info cards */
+      .df2 {
+        background: var(--cream);
+      }
+      .df2 .body {
+        justify-content: flex-start;
+        align-items: stretch;
+        text-align: left;
+        padding: 6cqw 5cqw;
+      }
+      .df2 h3 {
+        font-family: var(--disp);
+        font-size: 4.4cqw;
+        text-align: center;
+        margin-bottom: 2.4cqw;
+      }
+      .df2 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 2cqw;
+        flex: 1;
+      }
+      .df2 .c {
+        background: var(--white);
+        border: 0.25cqw solid var(--text-dark);
+        border-radius: 1.6cqw;
+        box-shadow: 0.5cqw 0.5cqw 0 var(--text-dark);
+        padding: 2cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .df2 .c .ic {
+        width: 4.5cqw;
+        height: 4.5cqw;
+        border-radius: 50%;
+        border: 0.22cqw solid var(--text-dark);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-size: 1.8cqw;
+        color: var(--white);
+        margin-bottom: 1.2cqw;
+      }
+      .df2 .c .t {
+        font-family: var(--disp);
+        font-size: 1.8cqw;
+      }
+      .df2 .c .x {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 1cqw;
+        line-height: 1.5;
+        color: var(--text-muted);
+        margin-top: 0.6cqw;
+      }
+
+      /* f3 process steps */
+      .df3 {
+        background: var(--peach);
+      }
+      .df3 .body {
+        padding: 6cqw 5cqw;
+      }
+      .df3 h3 {
+        font-family: var(--disp);
+        font-size: 4.4cqw;
+        color: var(--white);
+        text-shadow: 0.3cqw 0.3cqw 0 var(--text-dark);
+        margin-bottom: 3cqw;
+      }
+      .df3 .row {
+        display: flex;
+        gap: 2cqw;
+        align-items: flex-start;
+        justify-content: center;
+      }
+      .df3 .st {
+        flex: 1;
+        text-align: center;
+        max-width: 18cqw;
+      }
+      .df3 .st .c {
+        width: 7cqw;
+        height: 7cqw;
+        border-radius: 50%;
+        border: 0.3cqw solid var(--text-dark);
+        display: grid;
+        place-items: center;
+        font-family: var(--disp);
+        font-size: 2.6cqw;
+        color: var(--white);
+        box-shadow: 0.4cqw 0.4cqw 0 var(--text-dark);
+        margin: 0 auto;
+      }
+      .df3 .st .t {
+        font-family: var(--disp);
+        font-size: 1.5cqw;
+        margin-top: 1cqw;
+        color: var(--text-dark);
+      }
+      .df3 .ar {
+        font-family: var(--disp);
+        font-size: 2.4cqw;
+        color: var(--text-dark);
+        align-self: center;
+        margin-top: 2cqw;
+      }
+
+      /* f4 quote */
+      .df4 {
+        background: var(--soft-pink);
+      }
+      .df4 .qbox {
+        background: var(--white);
+        border: 0.25cqw solid var(--text-dark);
+        border-radius: 2cqw;
+        box-shadow: 0.6cqw 0.6cqw 0 var(--text-dark);
+        padding: 4cqw 5cqw;
+        max-width: 72cqw;
+      }
+      .df4 .qm {
+        font-family: var(--disp);
+        font-size: 6cqw;
+        line-height: 0.6;
+        color: var(--soft-pink);
+        -webkit-text-stroke: 0.15cqw var(--text-dark);
+      }
+      .df4 .q {
+        font-family: var(--disp);
+        font-size: 3.2cqw;
+        line-height: 1.35;
+        color: var(--text-dark);
+        margin-top: 0.5cqw;
+      }
+      .df4 .at {
+        font-family: var(--body);
+        font-weight: 700;
+        font-size: 1.2cqw;
+        color: var(--text-muted);
+        margin-top: 1.6cqw;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 28px;
+        position: relative;
+        z-index: 2;
+      }
+      .do-card {
+        background: var(--white);
+        border: 3px solid var(--text-dark);
+        border-radius: 24px;
+        box-shadow: var(--shadow);
+        padding: 34px;
+      }
+      .do-card h4 {
+        font-family: var(--disp);
+        font-size: 1.7rem;
+        margin-bottom: 8px;
+      }
+      .do-card .badge {
+        display: inline-block;
+        font-family: var(--disp);
+        font-size: 0.8rem;
+        border: 3px solid var(--text-dark);
+        border-radius: 50px;
+        padding: 5px 16px;
+        margin-bottom: 18px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--body);
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 1.55;
+        padding-left: 26px;
+        position: relative;
+        margin-bottom: 12px;
+        color: var(--text-dark);
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        top: 4px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        border: 2px solid var(--text-dark);
+        content: "";
+      }
+      .do-card.do li::before {
+        background: var(--mint);
+      }
+      .do-card.dont li::before {
+        background: var(--coral);
+      }
+
+      .foot {
+        padding: 48px 80px;
+        background: var(--lavender);
+        border-top: 3px solid var(--text-dark);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--disp);
+        font-size: 1.7rem;
+        color: var(--white);
+        text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
+      }
+      .foot .r {
+        font-family: var(--body);
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        font-size: 11px;
+        color: var(--text-dark);
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Fredoka+One&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #f5f0e6 !important;
+        --secondary: #2d2d2d !important;
+        --tertiary: #7ecdc0 !important;
+        --accent: #f8635f !important;
+        --f-disp: "Fredoka", sans-serif !important;
+        --f-body: "Quicksand", sans-serif !important;
+        --cream: #f5f0e6 !important;
+        --turquoise: #7ecdc0 !important;
+        --coral: #f8635f !important;
+        --text-dark: #2d2d2d !important;
+        --disp: "Fredoka", sans-serif !important;
+        --body: "Quicksand", sans-serif !important;
+        --soft-pink: #f7c8d4 !important;
+        --butter: #fde68a !important;
+        --mint: #a8e6cf !important;
+        --lavender: #d4a5e8 !important;
+        --peach: #ffcba4 !important;
+        --sky: #a8d8f0 !important;
+        --text-muted: #6b6b6b !important;
+        --white: #ffffff !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="daisy" style="width: 140px; height: 140px; top: -30px; left: -20px">
+        <div class="p" style="transform: rotate(0deg)"></div>
+        <div class="p" style="transform: rotate(60deg)"></div>
+        <div class="p" style="transform: rotate(120deg)"></div>
+        <div class="p" style="transform: rotate(180deg)"></div>
+        <div class="p" style="transform: rotate(240deg)"></div>
+        <div class="p" style="transform: rotate(300deg)"></div>
+        <div class="c"></div>
+      </div>
+      <div
+        class="star"
+        style="
+          width: 70px;
+          height: 70px;
+          background: var(--soft-pink);
+          top: 18%;
+          right: 10%;
+          transform: rotate(12deg);
+        "
+      ></div>
+      <div
+        class="star"
+        style="
+          width: 50px;
+          height: 50px;
+          background: var(--butter);
+          bottom: 20%;
+          left: 12%;
+          transform: rotate(-8deg);
+        "
+      ></div>
+      <div class="daisy" style="width: 100px; height: 100px; bottom: -26px; right: -16px">
+        <div class="p" style="transform: rotate(0deg)"></div>
+        <div class="p" style="transform: rotate(60deg)"></div>
+        <div class="p" style="transform: rotate(120deg)"></div>
+        <div class="p" style="transform: rotate(180deg)"></div>
+        <div class="p" style="transform: rotate(240deg)"></div>
+        <div class="p" style="transform: rotate(300deg)"></div>
+        <div class="c"></div>
+      </div>
+      <div class="badge">Frame System · Vol. 01</div>
+      <h1>Hello,<br />sunshine!</h1>
+      <div class="sub">
+        A cheerful childlike frame system — chunky Fredoka One headlines, friendly Quicksand body, a
+        sunny garden palette, charcoal outlines, hard offset shadows, and hand-drawn ornaments.
+      </div>
+      <div class="counter">01 / 06</div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="sec-head">
+        <span class="badge">Palette</span>
+        <h2>A Sunny Garden</h2>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--turquoise)"></div>
+          <div class="meta">
+            <div class="name">Turquoise</div>
+            <div class="hex">#7ECDC0</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--soft-pink)"></div>
+          <div class="meta">
+            <div class="name">Soft Pink</div>
+            <div class="hex">#F7C8D4</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--butter)"></div>
+          <div class="meta">
+            <div class="name">Butter</div>
+            <div class="hex">#FDE68A</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--mint)"></div>
+          <div class="meta">
+            <div class="name">Mint</div>
+            <div class="hex">#A8E6CF</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--lavender)"></div>
+          <div class="meta">
+            <div class="name">Lavender</div>
+            <div class="hex">#D4A5E8</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--peach)"></div>
+          <div class="meta">
+            <div class="name">Peach</div>
+            <div class="hex">#FFCBA4</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--sky)"></div>
+          <div class="meta">
+            <div class="name">Sky</div>
+            <div class="hex">#A8D8F0</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--coral)"></div>
+          <div class="meta">
+            <div class="name">Coral</div>
+            <div class="hex">#F8635F · accent</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--cream); border-bottom: 3px solid var(--text-dark)"
+          ></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#F5F0E6 · canvas</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--text-dark)"></div>
+          <div class="meta">
+            <div class="name">Charcoal</div>
+            <div class="hex">#2D2D2D · outline</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--text-muted)"></div>
+          <div class="meta">
+            <div class="name">Muted</div>
+            <div class="hex">#6B6B6B</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div
+            class="chip"
+            style="background: var(--white); border-bottom: 3px solid var(--text-dark)"
+          ></div>
+          <div class="meta">
+            <div class="name">White</div>
+            <div class="hex">#FFFFFF · cards</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="sec-head">
+        <span class="badge" style="background: var(--soft-pink)">Type</span>
+        <h2>Fredoka × Quicksand</h2>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display</div>
+          <div class="m">Fredoka One · chunky · on-color gets text-shadow</div>
+        </div>
+        <div class="spec">
+          <span
+            class="disp"
+            style="
+              font-size: 72px;
+              color: var(--turquoise);
+              -webkit-text-stroke: 2px var(--text-dark);
+            "
+            >Hooray!</span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">headline</div>
+          <div class="m">Fredoka One · primary slide voice</div>
+        </div>
+        <div class="spec"><span class="disp" style="font-size: 54px">Let's Play</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Quicksand 500 · line 1.6 · never uppercase</div>
+        </div>
+        <div class="spec">
+          <p
+            style="
+              font-family: var(--body);
+              font-weight: 500;
+              font-size: 17px;
+              line-height: 1.6;
+              max-width: 640px;
+            "
+          >
+            Quicksand carries every paragraph and label — friendly, rounded, and calm against the
+            chunky display.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">badge</div>
+          <div class="m">Fredoka One · pill chip · butter fill</div>
+        </div>
+        <div class="spec"><span class="chip-b" style="background: var(--butter)">New!</span></div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="sec-head">
+        <span class="badge" style="background: var(--mint)">Components</span>
+        <h2>Outlined & Shadowed</h2>
+      </div>
+
+      <div class="cgrid">
+        <div class="s4">
+          <div class="cnote">Info card + circle icon</div>
+          <div class="card">
+            <div class="ic" style="background: var(--turquoise)">A</div>
+            <div class="t">Bordered Card</div>
+            <div class="x">3px charcoal outline + 6px hard offset shadow, generous radius.</div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Framed header — cap + body</div>
+          <div class="framed">
+            <div class="cap" style="background: var(--lavender)">A Tonal Cap</div>
+            <div class="bd">
+              A colored header strip sits flush above a white body — one unit, one shadow.
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Dot bullets + chips</div>
+          <ul class="bullets">
+            <li>Outlined disc bullets, never glyphs</li>
+            <li>Butter fill by default</li>
+            <li>4px from the line top</li>
+          </ul>
+          <div class="chips" style="margin-top: 18px">
+            <span class="chip-b" style="background: var(--mint)">Mint</span
+            ><span class="chip-b" style="background: var(--peach)">Peach</span
+            ><span class="chip-b" style="background: var(--sky)">Sky</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s8">
+          <div class="cnote">Process steps — circles rotate the pastel set</div>
+          <div class="steps">
+            <div class="step">
+              <div class="c" style="background: var(--coral)">1</div>
+              <div class="t">Sprout</div>
+              <div class="x">Plant the idea.</div>
+            </div>
+            <div class="step">
+              <div class="c" style="background: var(--mint)">2</div>
+              <div class="t">Grow</div>
+              <div class="x">Water it daily.</div>
+            </div>
+            <div class="step">
+              <div class="c" style="background: var(--sky)">3</div>
+              <div class="t">Bloom</div>
+              <div class="x">Watch it open.</div>
+            </div>
+            <div class="step">
+              <div class="c" style="background: var(--lavender)">4</div>
+              <div class="t">Share</div>
+              <div class="x">Pass it on.</div>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Quote mark + avatar</div>
+          <div style="display: flex; align-items: center; gap: 20px">
+            <span
+              class="disp"
+              style="
+                font-size: 60px;
+                color: var(--soft-pink);
+                -webkit-text-stroke: 2px var(--text-dark);
+                line-height: 0.6;
+              "
+              >&ldquo;</span
+            >
+            <span
+              style="
+                width: 80px;
+                height: 80px;
+                border-radius: 50%;
+                border: 3px solid var(--text-dark);
+                background: var(--butter);
+                box-shadow: var(--shadow-sm);
+                display: grid;
+                place-items: center;
+                font-family: var(--disp);
+                font-size: 1.8rem;
+              "
+              >:)</span
+            >
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section>
+      <div class="sec-head">
+        <span class="badge" style="background: var(--peach)">Frames</span>
+        <h2>Frame Compositions</h2>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel">
+            <b>Cover</b><span>· identity · turquoise · ornament wreath</span>
+          </div>
+          <div class="frame df1">
+            <div class="daisy" style="width: 11cqw; height: 11cqw; top: -2.5cqw; left: -2cqw">
+              <div class="p" style="transform: rotate(0)"></div>
+              <div class="p" style="transform: rotate(60deg)"></div>
+              <div class="p" style="transform: rotate(120deg)"></div>
+              <div class="p" style="transform: rotate(180deg)"></div>
+              <div class="p" style="transform: rotate(240deg)"></div>
+              <div class="p" style="transform: rotate(300deg)"></div>
+              <div class="c"></div>
+            </div>
+            <div
+              class="star"
+              style="
+                width: 5cqw;
+                height: 5cqw;
+                background: var(--soft-pink);
+                top: 16%;
+                right: 9%;
+                transform: rotate(12deg);
+              "
+            ></div>
+            <div
+              class="star"
+              style="
+                width: 4cqw;
+                height: 4cqw;
+                background: var(--butter);
+                bottom: 16%;
+                left: 9%;
+                transform: rotate(-8deg);
+              "
+            ></div>
+            <div class="body">
+              <div class="badge">Frame System</div>
+              <h3>Hello,<br />sunshine!</h3>
+              <div class="sub">A cheerful frame system in a sunny garden palette.</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Info Cards</b><span>· catalog · cream · 3-up · the dense frame</span>
+          </div>
+          <div class="frame df2">
+            <div
+              class="star"
+              style="
+                width: 4cqw;
+                height: 4cqw;
+                background: var(--mint);
+                top: 5%;
+                right: 6%;
+                transform: rotate(10deg);
+              "
+            ></div>
+            <div class="body">
+              <h3>Three Little Things</h3>
+              <div class="row">
+                <div class="c">
+                  <div class="ic" style="background: var(--turquoise)">A</div>
+                  <div class="t">Outline</div>
+                  <div class="x">3px charcoal on all.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--coral)">B</div>
+                  <div class="t">Shadow</div>
+                  <div class="x">Hard offset, no blur.</div>
+                </div>
+                <div class="c">
+                  <div class="ic" style="background: var(--lavender)">C</div>
+                  <div class="t">Round</div>
+                  <div class="x">Generous radius.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Process Steps</b><span>· sequence · peach · rotating dots</span>
+          </div>
+          <div class="frame df3">
+            <div class="body">
+              <h3>How It Grows</h3>
+              <div class="row">
+                <div class="st">
+                  <div class="c" style="background: var(--coral)">1</div>
+                  <div class="t">Sprout</div>
+                </div>
+                <div class="ar">&rarr;</div>
+                <div class="st">
+                  <div class="c" style="background: var(--mint)">2</div>
+                  <div class="t">Grow</div>
+                </div>
+                <div class="ar">&rarr;</div>
+                <div class="st">
+                  <div class="c" style="background: var(--sky)">3</div>
+                  <div class="t">Bloom</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Quote</b><span>· quote · soft-pink · quote-mark anchor</span></div>
+          <div class="frame df4">
+            <div
+              class="star"
+              style="
+                width: 4cqw;
+                height: 4cqw;
+                background: var(--butter);
+                top: 10%;
+                left: 8%;
+                transform: rotate(-10deg);
+              "
+            ></div>
+            <div class="body">
+              <div class="qbox">
+                <div class="qm">&ldquo;</div>
+                <div class="q">Every day is a daisy day.</div>
+                <div class="at">— The Garden Club</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="sec-head">
+        <span class="badge" style="background: var(--sky)">Rules</span>
+        <h2>Frame Rules</h2>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <span class="badge" style="background: var(--mint)">Do</span>
+          <ul>
+            <li>Fredoka headlines, Quicksand body — strict by role.</li>
+            <li>Outline every shape 3px charcoal + hard offset shadow (6/4px, no blur).</li>
+            <li>Headlines on saturated surfaces get a 3px charcoal text-shadow + white text.</li>
+            <li>Bullets are outlined butter discs; cluster 3–7 ornaments per frame.</li>
+            <li>One content container per frame; rotate marker colors through the pastels.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <span class="badge" style="background: var(--coral)">Don't</span>
+          <ul>
+            <li>No square corners; no blurred or rgba shadows.</li>
+            <li>No colored borders (charcoal only); no coral surface.</li>
+            <li>No third font; no Quicksand headline or Fredoka body.</li>
+            <li>No glyph bullets; no empty corners (ornaments fill them).</li>
+            <li>Don't blow a headline edge-to-edge — fit to measure.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--text-dark);
+        --cap-canvas: var(--cream);
+        --cap-accent: var(--coral);
+        --cap-accent-2: var(--butter);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.6cqw 3.4cqw 1.9cqw;
+        background: var(--cap-canvas);
+        border: 0.3cqw solid var(--cap-ink);
+        border-radius: 2.2cqw;
+        box-shadow: 0.6cqw 0.6cqw 0 var(--cap-ink);
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.18em 0.32em;
+        font-family: var(--disp);
+        font-weight: 600;
+        font-size: 3.2cqw;
+        line-height: 1.22;
+        letter-spacing: 0.02em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0.02em 0.16em;
+        border-radius: 1.1cqw;
+        color: color-mix(in srgb, var(--cap-ink) 52%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        border-radius: 1.1cqw;
+        box-shadow:
+          0 0 0 0.3cqw var(--cap-ink),
+          0.3cqw 0.5cqw 0 0 var(--cap-ink);
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 0.2cqw dashed rgba(45, 45, 45, 0.4);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 3cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--body);
+        font-weight: 600;
+        font-size: 1cqw;
+        letter-spacing: 0.04em;
+        color: var(--text-muted);
+        z-index: 4;
+      }
+    </style>
+    <section>
+      <div class="sec-head">
+        <span class="badge" style="background: var(--coral)">Captions</span>
+        <h2>Lower-Third Karaoke</h2>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo df1">
+            <div class="daisy" style="width: 9cqw; height: 9cqw; top: -2cqw; left: -1.6cqw">
+              <div class="p" style="transform: rotate(0)"></div>
+              <div class="p" style="transform: rotate(60deg)"></div>
+              <div class="p" style="transform: rotate(120deg)"></div>
+              <div class="p" style="transform: rotate(180deg)"></div>
+              <div class="p" style="transform: rotate(240deg)"></div>
+              <div class="p" style="transform: rotate(300deg)"></div>
+              <div class="c"></div>
+            </div>
+            <div
+              class="star"
+              style="
+                width: 4cqw;
+                height: 4cqw;
+                background: var(--soft-pink);
+                top: 14%;
+                right: 8%;
+                transform: rotate(12deg);
+              "
+            ></div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Settled line</b><span>· all spoken · candy block cleared</span>
+          </div>
+          <div class="frame capdemo df1">
+            <div
+              class="star"
+              style="
+                width: 4cqw;
+                height: 4cqw;
+                background: var(--butter);
+                bottom: 18%;
+                left: 8%;
+                transform: rotate(-8deg);
+              "
+            ></div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Daisy Days</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#7ECDC0" />
+        <g stroke="#2D2D2D" stroke-width="2.4">
+          <circle cx="30" cy="34" r="7" fill="#fff" />
+          <circle cx="44" cy="34" r="7" fill="#fff" />
+          <circle cx="37" cy="27" r="7" fill="#fff" />
+          <circle cx="37" cy="41" r="7" fill="#fff" />
+          <circle cx="37" cy="34" r="6" fill="#FDE68A" />
+        </g>
+        <rect
+          x="20"
+          y="60"
+          width="56"
+          height="9"
+          rx="4"
+          fill="#fff"
+          stroke="#2D2D2D"
+          stroke-width="2"
+        />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/FRAME.md b/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/FRAME.md
new file mode 100644
index 0000000..83e2594
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/FRAME.md
@@ -0,0 +1,265 @@
+---
+version: alpha
+name: Editorial Forest — Frame (video / frame layer)
+description: >
+  Video-first companion to Editorial Forest's design.md. The unit is the frame (1920×1080). Atoms
+  are identical and sacred — the green/pink/cream editorial triad, Source Serif 4 at weight 500
+  (optical-size axis) for all display + JetBrains Mono 500 uppercase chrome, flat paper depth (no
+  shadows), 2px hairline rules, 6/8px card radii, and the monogram circle stamp. 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:
+  green: "#2e4a2a"
+  green-deep: "#243a21"
+  green-lite: "#3a5a36"
+  pink: "#e89cb1"
+  pink-deep: "#d27e96"
+  cream: "#efe7d4"
+  cream-2: "#e6dcc4"
+  ink: "#1a1a17"
+
+typography:
+  # — reading + chrome ramp —
+  body:    { fontFamily: "Source Serif 4", cqw: 1.56, weight: 400, lineHeight: 1.38 }
+  body-card:{ fontFamily: "Source Serif 4", cqw: 1.35, weight: 400, lineHeight: 1.34 }
+  label:   { fontFamily: "JetBrains Mono", px: 26, cqw: 1.35, weight: 500, tracking: "0.18em", upper: true }
+  caption-mono:{ fontFamily: "JetBrains Mono", px: 24, cqw: 1.25, weight: 500, tracking: "0.14em", upper: true }
+  # — display ramp (Source Serif 4 weight 500, opsz, negative tracking) —
+  title-card-sm:{ fontFamily: "Source Serif 4", cqw: 2.9, weight: 500, lineHeight: 0.98, tracking: "-0.01em" }
+  title-card:{ fontFamily: "Source Serif 4", cqw: 3.5, weight: 500, lineHeight: 0.96, tracking: "-0.01em" }
+  headline:{ fontFamily: "Source Serif 4", cqw: 4.4, weight: 500, lineHeight: 1.0, tracking: "-0.02em" }
+  headline-xl:{ fontFamily: "Source Serif 4", cqw: 5.0, weight: 500, lineHeight: 0.96, tracking: "-0.02em" }
+  display:{ fontFamily: "Source Serif 4", cqw: 7.3, weight: 500, lineHeight: 1.02, tracking: "-0.02em" }
+  display-hero:{ fontFamily: "Source Serif 4", cqw: 11.5, weight: 500, lineHeight: 0.92, tracking: "-0.02em" }
+  stat-figure:{ fontFamily: "Source Serif 4", cqw: 11.5, weight: 500, lineHeight: 0.92, tracking: "-0.03em" }
+  stat-figure-unit:{ fontFamily: "Source Serif 4", cqw: 5.7, weight: 500, lineHeight: 0.92 }
+  name:    { fontFamily: "Source Serif 4", cqw: 2.3, weight: 600, lineHeight: 1.0 }
+
+spacing:
+  slide-pad: "5cqw"
+  rule: "2px"
+  rule-card: "2.5px"
+  radius-card: "6px"
+  radius-step: "8px"
+
+components:
+  topbar:
+    typography: "{typography.label} (JetBrains Mono) + monogram-circle or counter"
+    placement: "top edge, label left, mark right"
+    description: "On EVERY frame — the system's spine; a frame without it reads untreated."
+  footline:
+    typography: "{typography.caption-mono} ×2, space-between"
+    placement: "absolute bottom edge"
+    description: "On cover/data/summary frames."
+  monogram-circle:
+    border: "2px solid {colors.pink}"
+    rounded: "50%"
+    size: "130px"
+    typography: "mono monogram"
+    description: "The identity stamp. Cover/summary only."
+  topic-tile:
+    backgroundColor: "{colors.green} (pink text) / {colors.pink} (green-deep) / {colors.green-lite} (pink) / {colors.cream-2} + 2px {colors.green} border (green)"
+    rounded: "{spacing.radius-card}"
+    shadow: "none"
+    typography: "{typography.caption-mono} ordinal + {typography.title-card-sm} + mono foot"
+    description: "Fills rotate; never repeat one across a grid."
+  step-tile:
+    backgroundColor: "{colors.cream} + green border / {colors.green} / {colors.pink}"
+    border: "2.5px solid"
+    rounded: "{spacing.radius-step}"
+    typography: "mono ordinal + {typography.title-card} + {typography.body-card} + mono marker over a top rule"
+    description: "Framework/process card."
+  kpi-block:
+    typography: "{typography.caption-mono} tag → {typography.stat-figure} (+{typography.stat-figure-unit}) → {typography.body}"
+    rule: "2px accent rule above"
+    description: "Oversized serif figure."
+  meta-dl:
+    borderTop: "2px solid {colors.green}"
+    typography: "{typography.caption-mono} dt + {typography.meta-value} dd"
+    description: "3-column dt/dd grid."
+  bar:
+    backgroundColor: "{colors.pink} / {colors.cream} / {colors.green}"
+    rounded: "3px 3px 0 0"
+    size: "56px wide"
+    typography: "mono value above"
+    description: "Vertical chart bar."
+  rule-thin:
+    rule: "2px solid (green on cream / pink on green / green-deep on pink)"
+    description: "The only separator. Never 1px, never 3px+."
+---
+
+# Editorial Forest — Frame (video / frame layer)
+
+## Overview
+
+Editorial Forest at frame scale is a **serif-led literary-editorial system** — the register of a
+Penguin classic or a quiet annual report. One confident voice, **Source Serif 4 at weight 500**
+(optical-size axis engaged), carries every headline and stat up to ~12cqw; **JetBrains Mono** at
+weight 500 uppercase is the editorial chrome (labels, captions, axis ticks, footlines). Three
+surfaces — forest green, dusty rose, oat cream — and nothing else. Depth is **flat and paper-based**:
+no shadows, no gradients; elevation is color-block contrast + 2px hairlines + border-vs-fill.
+
+The unmistakable signature is **weight 500** (never 400 display, never 700) and the **mono/serif
+role inversion** (mono for chrome, serif for body and display). Body text drops to serif weight
+400 — that 500→400 step is the reading rhythm. Every frame carries a mono topbar; the monogram
+circle is the identity stamp.
+
+**Key characteristics at frame scale:**
+
+- **Green / pink / cream triad** — two surface tones per frame is typical, three is loud.
+- **Source Serif 4 weight 500** (opsz, negative tracking) for all display; **serif 400** body; **JetBrains Mono 500** uppercase chrome.
+- **Flat — no shadows, no gradients**; elevation is color-block + 2px hairline + border-vs-fill.
+- **2px hairline rules** are the only separator (2.5px on step tiles); 6/8px card radii; the monogram circle is the only full round.
+- **Topbar on every frame** (mono label + monogram/counter); footline on data/cover frames.
+- **Spacious & committed** — one subject per frame in deep negative space; fewer elements at larger sizes.
+
+## The Frame
+
+### Frame Craft Bar
+
+Three eyeball tests gate every frame before any structural check:
+
+- **Squint** — one Source Serif 4 moment dominates at 3–6× its neighbor; the surface block centers the eye.
+- **Silence** — one subject per frame in deep negative space; the **topic-tile and step grids are the one dense exception**.
+- **Restraint** — **two surface tones max** per frame (three is loud); serif **weight 500** display / **400** body; green ground reserved for gravity moments.
+- **Reference** — aim at a **Penguin classic / quiet annual report / art-book spread**; failure looks like a **shadowed, multi-color web dashboard**.
+
+- **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` 5cqw (the source's generous 96–140px); the topbar/footline 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` (the source is a fixed 1920 canvas, so
+its px map cleanly: `px ÷ 1920 × 100`). Hairlines stay 2px; card radii stay 6/8px.
+
+## Colors
+
+Tokens identical to the source. Default ground `{colors.cream}` for content; `{colors.green}` for
+cover/statement/summary gravity. **Headlines:** green on cream, cream (or pink at hero scale) on
+green, green-deep on pink. **Body:** ink on cream, cream on green, green-deep on pink. Labels/rules
+take the region's accent (pink on green, green on cream, green-deep on pink). Tile fills rotate
+green / pink / green-lite / cream-2-with-green-border. **No fourth color family** — the triad +
+near-duplicates is the whole palette; never `rgba` transparency on a surface.
+
+## Typography
+
+Two ramps. The **reading/chrome ramp** (Source Serif 4 **400** body 1.56cqw; JetBrains Mono labels
+in px) carries copy + chrome; the **display ramp** (Source Serif 4 **500** `title-card-sm` 2.9cqw →
+`display-hero`/`stat-figure` 11.5cqw, opsz, negative-tracked) carries every headline + figure.
+
+- **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-hero`; 4–6 → `headline-xl`; 7+ → `headline`. Reserve the 7.3–11.5cqw tier for statement/stat/cover.
+- **Serif is weight 500 for display, 400 for body** (the rhythm), 600 only for an attribution name. Negative tracking (−0.01..−0.03em), tight line-height (0.92–1.02). **Mono uppercase, 0.08–0.18em.** No italic, no underline, no third face, no serif body at 500.
+
+## Depth & Surface
+
+Flat, paper-based. Elevation from:
+
+- **Color-block contrast** — a green tile on cream reads elevated by ink-block separation.
+- **2px hairline rules** — section separators in the region's accent.
+- **Border vs fill** — a cream-2 tile + 2px green border reads a different elevation than a solid tile.
+
+**Ceiling:** zero shadow (none — adding `box-shadow` shatters the paper feel), no gradient, no glow; surfaces are solid ink-on-paper.
+
+## Shapes
+
+- **6px** topic tiles, **8px** step tiles, **2px** legend swatch, **3px 3px 0 0** bar tops, **50%** monogram circle. No square corners, no heavy rounding.
+
+## Components
+
+- **topbar** (the spine) + **footline** + **monogram-circle** (identity stamp) — the chrome set.
+- **topic-tile** (6px, rotating fills) / **step-tile** (8px, 2.5px border) — the catalog + framework patterns.
+- **kpi-block** (oversized serif figure) / **meta-dl** (3-col, 2px rule) / **bar** / **rule-thin** — data + structure.
+
+## Frame Treatments
+
+> Recipe: ground · container · composes · focal · chrome · accent · silence · Fixed/Free · density.
+> Topbar on every frame; one subject per frame in deep negative space.
+
+### 1 · Cover (identity · move: oversized serif · green · left)
+
+**Ground** `{colors.green}`, `slide-pad`. **Composes** topbar (mono label + monogram-circle), display-hero, body lede, footline. **Focal** a 2-line Source Serif 4 `display-hero` in pink (one word in cream), left. **Chrome** mono topbar; mono footline. **Accent** pink display + the monogram circle. **Silence** ~50%. **Fixed** serif 500, flat, monogram 2px pink. **Free** title, which word is cream. **Density** low.
+
+### 2 · Topic Tiles (catalog · move: rotating-fill grid · cream · the dense frame)
+
+**Ground** `{colors.cream}`, `slide-pad`. **Composes** topbar, headline-xl, 3–4× topic-tile. **Focal** a row of 6px tiles, fills rotating green / pink / cream-2-with-border, each a mono ordinal + serif title. **Chrome** mono topbar. **Accent** the tile fills (mix 3 of 4, never repeat one). **Silence** tight — the density exception. **Fixed** 6px radius, rotating fills, no shadow. **Free** tile titles, which fills. **Density** dense-exception.
+
+### 3 · KPI Stat (data · move: oversized figure · green)
+
+**Ground** `{colors.green}`, `slide-pad`. **Composes** topbar, kpi-block (mono tag + 220px stat-figure + serif description), footline. **Focal** a Source Serif 4 `stat-figure` (~11.5cqw, +unit) in pink over a 2px pink rule. **Chrome** mono topbar + footline. **Accent** the pink figure. **Silence** ~55%. **Fixed** serif 500 figure, 2px accent rule, flat. **Free** the figure (from script), tag, description. **Density** low.
+
+### 4 · Statement (quote · move: display serif · cream · left)
+
+**Ground** `{colors.cream}`, generous pad. **Composes** topbar, display, name (600), caption-mono role. **Focal** a 2-line Source Serif 4 `display` (~7.3cqw) in green; a 600-weight attribution name + mono role beneath. **Chrome** mono topbar. **Accent** none — the serif carries it. **Silence** ~55%. **Fixed** serif 500 display + 600 name only, no italic. **Free** quote, name, role. **Density** low.
+
+### 5 · Step Framework (process · move: 8px step tiles · cream/green)
+
+**Ground** `{colors.cream}` (or green), `slide-pad`. **Composes** topbar, headline, 3–4× step-tile. **Focal** a row of 8px step tiles (2.5px border) — mono ordinal + serif 68px title + body + mono marker over a top rule; fills rotate cream-with-green-border / green / pink. **Accent** the tile fills. **Silence** moderate. **Fixed** 8px radius, 2.5px border, mono markers. **Free** steps, fills. **Density** standard.
+
+### 6 · Chart (data · move: bars + meta · green)
+
+**Ground** `{colors.green}`, `slide-pad`. **Composes** topbar, headline, bars + 2px axis rules, meta-dl. **Focal** 56px pink/cream/green bars on inner-edge 2px rules with mono ticks; an optional 3-col meta-dl beneath. **Chrome** mono topbar. **Accent** the bar fills. **Silence** moderate. **Fixed** 56px bars, 3px tops, 2px axes, mono ticks. **Free** values (from script), labels. **Density** standard.
+
+## Composition Rules
+
+### Do
+
+- Run every display in **Source Serif 4 weight 500**, opsz, negative-tracked, tight line-height; **body at 400**.
+- Set every label/caption/axis/footline in **JetBrains Mono 500 uppercase, 0.08–0.18em**.
+- Give every frame a **topbar** (mono label + monogram or counter); footline on data/cover.
+- Pick **one dominant surface per frame** (max two tones); **rotate tile fills**, never repeat one across a grid.
+- Separate sections with **2px hairlines** in the region's accent; reserve the monogram circle for cover/summary.
+- Scale display aggressively (7.3–11.5cqw) for statement/stat/cover; lean left/editorial, one subject per frame.
+
+### Don't
+
+- No box-shadow, gradient, or glow — flat, paper-based depth only.
+- No third typeface; no italic/underline; no serif body at 500; no mono at headline scale.
+- No fourth color family; no `rgba` surfaces; no 1px or 4px+ rules (2px / 2.5px only).
+- No two competing content blocks; don't omit the topbar.
+- Don't blow a headline edge-to-edge — step the ramp down.
+
+## Aspect-Ratio Behavior
+
+| Treatment      | 16:9                             | 9:16                        | 1:1                      |
+| -------------- | -------------------------------- | --------------------------- | ------------------------ |
+| Cover          | display left, monogram top-right | display top, monogram below | display, monogram corner |
+| Topic Tiles    | 3–4 across                       | stacked                     | 2×2                      |
+| KPI Stat       | figure left                      | figure centered, taller     | centered                 |
+| Statement      | quote left                       | quote stacked               | centered                 |
+| Step Framework | 3–4 across                       | stacked                     | 2×2                      |
+| Chart          | bars + meta                      | bars taller, meta stacks    | square chart             |
+
+`slide-pad` holds on the short edge; re-step display above the 1.4cqw floor. Topbar spans the top
+on every ratio; the monogram may drop to a corner.
+
+## Approved Real Entities
+
+No real customers, logos, or vendors are defined in the source — render any such mark as a
+placeholder. The monogram, footline strings, and tile counters carry per-deck identity; figures are content.
+
+## Numerals & Claims (hard rule)
+
+Never invent figures, KPIs, dates, or counts at frame scale. Render slots as `— figure —`,
+`{metric}`, `— %`. KPI blocks, bars, and meta values especially carry placeholders until the script
+supplies them. Issue numbers / counters are decorative chrome.
+
+## Pre-Render Self-Audit
+
+- **Squint** — one serif moment dominates; the surface block centers the eye.
+- **Silence** — one subject per frame in deep negative space; only the topic-tile/step grids run dense.
+- **Triad** — two surface tones max; headlines/body/labels use the correct per-surface color; no fourth family.
+- **Type** — Source Serif 4 **500** display (opsz, negative-tracked) / **400** body; mono uppercase 0.08–0.18em; ≥1.4cqw floor.
+- **Depth** — 0 shadow, 0 gradient; 2px hairlines; 6/8px radii; monogram the only full round.
+- **Chrome** — topbar present on every frame; footline on data/cover.
+- **Fabrication** — every numeral traces to the script, else placeholder.
+
+## Known Gaps
+
+- **Motion intentionally out of scope.** frame.md specifies composition only; the source relies on `deck-stage.js` for scaling/nav, no transition spec.
+- **Source Serif 4 (opsz 8..60) + JetBrains Mono via Google Fonts** — the optical-size axis is critical; a non-opsz fallback flattens the size-aware letterforms. CJK: LXGW WenKai (display) / Noto Serif SC (body) / Noto Sans Mono CJK (chrome).
+- **9:16 / 1:1 are guidance**; verify the floor and that two-tone discipline holds per ratio.
+- Bars, hairlines, tiles, and the monogram circle are CSS-only; no external imagery is required.
+- **Contrast:** green-on-pink / pink-on-green only at display scale (84px+); keep small text cream-on-green or ink-on-cream.
diff --git a/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/caption-skin.html b/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/caption-skin.html
new file mode 100644
index 0000000..7b79f3f
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/caption-skin.html
@@ -0,0 +1,222 @@
+<!--
+  Editorial Forest — caption skin (preset-local source).
+
+  This is the preset's own lower-third karaoke caption look: a caption skin to read or
+  copy, not to mount as is. A copy used as compositions/captions.html fills its three
+  reserved holes and wraps the fragment in a <template>:
+    · 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 (set it from the
+  project's frame.md; each var has an editorial-forest
+  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: an oat-cream card on a single 2px green hairline border — the system's only
+  separator — with a 6px card radius and NO shadow (editorial-forest is flat, paper-based;
+  depth is color-block + hairline, never cast). Source Serif 4 weight 500, sentence case,
+  warm-ink glyphs. Upcoming words sit in faint ink; the current word gets a quiet
+  dusty-rose panel (a soft 6px-radius block, no blur — editorial restraint, not a loud
+  block) with ink reading on top; spoken words settle to solid ink, panel cleared. The
+  per-word emphasis accent is a 2px green hairline underline, never heavy.
+-->
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+
+<!-- the project's :root tokens go 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 oat-cream card — single 2px green hairline border (the system's only
+     separator), 6px card radius, NO shadow (flat, paper-based) */
+  .caption-pill {
+    max-width: 78%;
+    padding: 20px 44px 24px;
+    background: var(--cap-canvas, #efe7d4);
+    border: 2px solid var(--cap-accent, #d27e96);
+    border-radius: 6px;
+  }
+  .caption-line {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.1em 0.34em;
+    font-family: var(--font-display, "Source Serif 4"), Georgia, serif;
+    font-weight: 500;
+    font-size: clamp(40px, 4.4vw, 58px);
+    line-height: 1.16;
+    letter-spacing: -0.02em;
+  }
+
+  /* upcoming — faint warm ink, no panel */
+  .caption-word {
+    display: inline-block;
+    padding: 0 0.06em;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a17) 42%, var(--cap-canvas, #efe7d4));
+  }
+  /* current word — a quiet dusty-rose panel (box-shadow spread = a soft 6px block w/o
+     layout shift; no blur — editorial restraint, not a loud block), warm ink on top */
+  .caption-word.is-active {
+    color: var(--cap-ink, #1a1a17);
+    background: var(--cap-accent, #d27e96);
+    box-shadow: 0 0 0 0.05em var(--cap-accent, #d27e96);
+    border-radius: 6px;
+  }
+  /* already spoken — solid warm ink, panel cleared */
+  .caption-word.is-spoken {
+    color: var(--cap-ink, #1a1a17);
+    background: transparent;
+    box-shadow: none;
+  }
+
+  /* optional per-word accents (dormant until a word-classer tags them) */
+  /* brand / key term — heavier serif weight, editorial-forest's only display inflection */
+  .caption-word.cap-brand {
+    font-weight: 600;
+  }
+  /* numerals / data — the mono chrome voice, slightly recessed */
+  .caption-word.cap-num {
+    font-family: var(--font-body, "JetBrains Mono"), ui-monospace, monospace;
+    color: color-mix(in srgb, var(--cap-ink, #1a1a17) 72%, var(--cap-canvas, #efe7d4));
+  }
+  /* emphasis — a 2px green hairline underline (the system's only separator, never heavy) */
+  .caption-word.cap-cta {
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-decoration-color: var(--cap-accent-2, #e89cb1);
+    text-underline-offset: 0.1em;
+  }
+
+  @media (max-aspect-ratio: 9/16) {
+    .caption-pill {
+      max-width: 92%;
+    }
+    .caption-line {
+      font-size: clamp(34px, 5.4vw, 48px);
+    }
+  }
+</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>
+  // the scene-aware word groups + real duration go 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.985 }, { scale: 1, duration: 0.18, 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>
diff --git a/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/frame-showcase.html b/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/frame-showcase.html
new file mode 100644
index 0000000..c5c0871
--- /dev/null
+++ b/.claude/skills/hyperframes/assets/frame-presets/editorial-forest/frame-showcase.html
@@ -0,0 +1,1273 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Editorial Forest</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=JetBrains+Mono:wght@400;500&display=swap"
+      rel="stylesheet"
+    />
+    <style id="ds-tokens">
+      :root {
+        --green: #2e4a2a;
+        --green-deep: #243a21;
+        --green-lite: #3a5a36;
+        --pink: #e89cb1;
+        --pink-deep: #d27e96;
+        --cream: #efe7d4;
+        --cream-2: #e6dcc4;
+        --ink: #1a1a17;
+        --serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
+        --mono: "JetBrains Mono", ui-monospace, monospace;
+      }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html {
+        background: #14140f;
+      }
+      body {
+        background: var(--cream);
+        color: var(--ink);
+        font-family: var(--serif);
+        -webkit-font-smoothing: antialiased;
+      }
+      .serif {
+        font-family: var(--serif);
+        font-weight: 500;
+        letter-spacing: -0.02em;
+        line-height: 0.96;
+      }
+      .mono {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+      }
+
+      section {
+        padding: 110px 120px;
+        position: relative;
+      }
+      .topbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 2px solid var(--green);
+        padding-bottom: 18px;
+        margin-bottom: 56px;
+      }
+      .topbar .lbl {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        font-size: 15px;
+        color: var(--green);
+      }
+      .topbar h2 {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 48px;
+        letter-spacing: -0.02em;
+        line-height: 1;
+      }
+
+      /* COVER */
+      .cover {
+        min-height: 100vh;
+        background: var(--green);
+        color: var(--cream);
+        padding: 100px 140px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        position: relative;
+      }
+      .cover .top {
+        position: absolute;
+        top: 64px;
+        left: 140px;
+        right: 140px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .cover .top .lbl {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.18em;
+        font-size: 15px;
+        color: var(--pink);
+      }
+      .cover .mono-circle {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        border: 2px solid var(--pink);
+        display: grid;
+        place-items: center;
+        font-family: var(--mono);
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        font-size: 24px;
+        color: var(--pink);
+      }
+      .cover h1 {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: clamp(96px, 15vw, 210px);
+        line-height: 0.92;
+        letter-spacing: -0.02em;
+        color: var(--pink);
+      }
+      .cover h1 .cr {
+        color: var(--cream);
+      }
+      .cover .lede {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 28px;
+        line-height: 1.4;
+        color: var(--cream);
+        max-width: 760px;
+        margin-top: 36px;
+      }
+      .cover .footline {
+        position: absolute;
+        bottom: 64px;
+        left: 140px;
+        right: 140px;
+        display: flex;
+        justify-content: space-between;
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 14px;
+        color: var(--pink);
+      }
+
+      /* PALETTE */
+      .swatches {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 0;
+        border: 2px solid var(--green);
+      }
+      .sw {
+        border-right: 2px solid var(--green);
+        border-bottom: 2px solid var(--green);
+      }
+      .sw:nth-child(4n) {
+        border-right: 0;
+      }
+      .sw:nth-child(n + 5) {
+        border-bottom: 0;
+      }
+      .sw .chip {
+        height: 130px;
+        border-bottom: 2px solid var(--green);
+      }
+      .sw .meta {
+        padding: 18px 20px;
+        background: var(--cream);
+      }
+      .sw .name {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 24px;
+      }
+      .sw .hex {
+        font-family: var(--mono);
+        font-size: 12px;
+        letter-spacing: 0.04em;
+        color: var(--ink);
+        opacity: 0.65;
+        margin-top: 6px;
+      }
+      .sw .role {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 1.4;
+        color: var(--ink);
+        margin-top: 10px;
+      }
+
+      /* TYPE */
+      .type-row {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+        align-items: center;
+        padding: 26px 0;
+        border-bottom: 2px solid rgba(46, 74, 42, 0.25);
+      }
+      .type-row .tok {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 13px;
+        color: var(--green);
+      }
+      .type-row .m {
+        font-family: var(--mono);
+        font-size: 11px;
+        color: var(--ink);
+        opacity: 0.6;
+        margin-top: 8px;
+        line-height: 1.5;
+        letter-spacing: 0.02em;
+      }
+      .type-row .spec {
+        overflow: hidden;
+      }
+
+      /* COMPONENTS */
+      .cnote {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 12px;
+        color: var(--green);
+        margin-bottom: 22px;
+      }
+      .cgrid {
+        display: grid;
+        grid-template-columns: repeat(12, 1fr);
+        gap: 28px;
+        margin-bottom: 52px;
+      }
+      .s3 {
+        grid-column: span 3;
+      }
+      .s4 {
+        grid-column: span 4;
+      }
+      .s5 {
+        grid-column: span 5;
+      }
+      .s6 {
+        grid-column: span 6;
+      }
+      .s7 {
+        grid-column: span 7;
+      }
+      .s8 {
+        grid-column: span 8;
+      }
+      .tile {
+        border-radius: 6px;
+        padding: 34px 32px;
+        min-height: 240px;
+        display: flex;
+        flex-direction: column;
+      }
+      .tile .ord {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 14px;
+      }
+      .tile .ti {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 40px;
+        line-height: 0.98;
+        letter-spacing: -0.01em;
+        margin-top: auto;
+      }
+      .tile .ft {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 12px;
+        margin-top: 14px;
+      }
+      .tile.green {
+        background: var(--green);
+        color: var(--cream);
+      }
+      .tile.green .ord,
+      .tile.green .ft {
+        color: var(--pink);
+      }
+      .tile.pink {
+        background: var(--pink);
+        color: var(--green-deep);
+      }
+      .tile.pink .ord,
+      .tile.pink .ft {
+        color: var(--green-deep);
+      }
+      .tile.lite {
+        background: var(--green-lite);
+        color: var(--pink);
+      }
+      .tile.lite .ti {
+        color: var(--cream);
+      }
+      .tile.cream2 {
+        background: var(--cream-2);
+        border: 2px solid var(--green);
+        color: var(--green);
+      }
+      .tile.cream2 .ord,
+      .tile.cream2 .ft {
+        color: var(--green);
+      }
+      .kpi {
+        border-top: 2px solid var(--green);
+        padding-top: 22px;
+      }
+      .kpi .tag {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 13px;
+        color: var(--green);
+      }
+      .kpi .fig {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 128px;
+        line-height: 0.92;
+        letter-spacing: -0.03em;
+        color: var(--ink);
+      }
+      .kpi .fig .u {
+        font-size: 64px;
+      }
+      .kpi .d {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 1.35;
+        color: var(--ink);
+        margin-top: 10px;
+        max-width: 280px;
+      }
+      .monobig {
+        width: 130px;
+        height: 130px;
+        border-radius: 50%;
+        border: 2px solid var(--pink);
+        display: grid;
+        place-items: center;
+        font-family: var(--mono);
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        font-size: 26px;
+        color: var(--green);
+      }
+      .bars {
+        display: flex;
+        align-items: flex-end;
+        gap: 24px;
+        height: 200px;
+        border-bottom: 2px solid var(--green);
+        border-left: 2px solid var(--green);
+        padding: 0 8px;
+      }
+      .bars .bar {
+        width: 56px;
+        border-radius: 3px 3px 0 0;
+        position: relative;
+      }
+      .bars .bar .v {
+        position: absolute;
+        top: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        font-family: var(--mono);
+        font-weight: 500;
+        font-size: 14px;
+        color: var(--ink);
+      }
+
+      /* COMPOSITIONS */
+      .gallery {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .fw .flabel {
+        display: flex;
+        gap: 14px;
+        align-items: baseline;
+        margin-bottom: 16px;
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 12px;
+        color: var(--ink);
+        opacity: 0.55;
+      }
+      .fw .flabel b {
+        color: var(--green);
+        opacity: 1;
+      }
+      .frame {
+        aspect-ratio: 16/9;
+        container-type: size;
+        position: relative;
+        overflow: hidden;
+        background: var(--cream);
+        box-shadow: 0 0 0 1px rgba(46, 74, 42, 0.2);
+      }
+      .frame > .body {
+        position: absolute;
+        inset: 0;
+        z-index: 3;
+      }
+      .frame .tb {
+        position: absolute;
+        left: 5cqw;
+        right: 5cqw;
+        top: 3cqw;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        z-index: 4;
+      }
+      .frame .tb .l {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 0.95cqw;
+      }
+      .frame .fl {
+        position: absolute;
+        left: 5cqw;
+        right: 5cqw;
+        bottom: 2.8cqw;
+        display: flex;
+        justify-content: space-between;
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.14em;
+        font-size: 0.85cqw;
+        z-index: 4;
+      }
+
+      /* f1 cover green */
+      .ef1 {
+        background: var(--green);
+      }
+      .ef1 .tb .l {
+        color: var(--pink);
+      }
+      .ef1 .mc {
+        width: 7cqw;
+        height: 7cqw;
+        border-radius: 50%;
+        border: 0.13cqw solid var(--pink);
+        display: grid;
+        place-items: center;
+        font-family: var(--mono);
+        font-weight: 500;
+        letter-spacing: 0.1em;
+        font-size: 1.3cqw;
+        color: var(--pink);
+      }
+      .ef1 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .ef1 h3 {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 13cqw;
+        line-height: 0.9;
+        letter-spacing: -0.02em;
+        color: var(--pink);
+      }
+      .ef1 h3 .cr {
+        color: var(--cream);
+      }
+      .ef1 .fl .l {
+        color: var(--pink);
+      }
+
+      /* f2 topic tiles */
+      .ef2 .body {
+        padding: 7cqw 5cqw 6cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .ef2 h3 {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 5cqw;
+        line-height: 0.96;
+        letter-spacing: -0.02em;
+        color: var(--green);
+        margin-bottom: 2.4cqw;
+      }
+      .ef2 .row {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1.5cqw;
+        flex: 1;
+      }
+      .ef2 .t {
+        border-radius: 0.6cqw;
+        padding: 1.8cqw;
+        display: flex;
+        flex-direction: column;
+      }
+      .ef2 .t .o {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 0.85cqw;
+      }
+      .ef2 .t .ti {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 2.6cqw;
+        line-height: 0.98;
+        letter-spacing: -0.01em;
+        margin-top: auto;
+      }
+      .ef2 .green {
+        background: var(--green);
+        color: var(--cream);
+      }
+      .ef2 .green .o {
+        color: var(--pink);
+      }
+      .ef2 .pink {
+        background: var(--pink);
+        color: var(--green-deep);
+      }
+      .ef2 .pink .o {
+        color: var(--green-deep);
+      }
+      .ef2 .cream2 {
+        background: var(--cream-2);
+        border: 0.13cqw solid var(--green);
+        color: var(--green);
+      }
+      .ef2 .cream2 .o {
+        color: var(--green);
+      }
+
+      /* f3 KPI green */
+      .ef3 {
+        background: var(--green);
+      }
+      .ef3 .tb .l {
+        color: var(--pink);
+      }
+      .ef3 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 5cqw;
+      }
+      .ef3 .tag {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 1cqw;
+        color: var(--pink);
+        border-top: 0.12cqw solid var(--pink);
+        padding-top: 1.2cqw;
+        display: inline-block;
+      }
+      .ef3 .fig {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 18cqw;
+        line-height: 0.9;
+        letter-spacing: -0.03em;
+        color: var(--pink);
+      }
+      .ef3 .fig .u {
+        font-size: 9cqw;
+      }
+      .ef3 .d {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 1.7cqw;
+        line-height: 1.35;
+        color: var(--cream);
+        max-width: 40cqw;
+        margin-top: 1cqw;
+      }
+      .ef3 .fl .l {
+        color: var(--pink);
+      }
+
+      /* f4 statement quote */
+      .ef4 .body {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: 0 8cqw;
+      }
+      .ef4 h3 {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 6.4cqw;
+        line-height: 1.02;
+        letter-spacing: -0.02em;
+        color: var(--green);
+      }
+      .ef4 .at {
+        font-family: var(--serif);
+        font-weight: 600;
+        font-size: 1.9cqw;
+        color: var(--ink);
+        margin-top: 2cqw;
+      }
+      .ef4 .ro {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 0.95cqw;
+        color: var(--green);
+        margin-top: 0.5cqw;
+      }
+
+      /* PRINCIPLES */
+      .dos {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 48px;
+      }
+      .do-card h4 {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 34px;
+        color: var(--green);
+        margin-bottom: 6px;
+        letter-spacing: -0.02em;
+      }
+      .do-card .rule {
+        height: 2px;
+        background: var(--green);
+        margin-bottom: 22px;
+      }
+      .do-card ul {
+        list-style: none;
+      }
+      .do-card li {
+        font-family: var(--serif);
+        font-weight: 400;
+        font-size: 17px;
+        line-height: 1.5;
+        padding-left: 24px;
+        position: relative;
+        margin-bottom: 13px;
+      }
+      .do-card li::before {
+        position: absolute;
+        left: 0;
+        font-family: var(--mono);
+      }
+      .do-card.do li::before {
+        content: "+";
+        color: var(--green);
+      }
+      .do-card.dont li::before {
+        content: "\00d7";
+        color: var(--pink-deep);
+      }
+
+      .foot {
+        padding: 60px 120px;
+        border-top: 2px solid var(--green);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .foot .l {
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 30px;
+        color: var(--green);
+      }
+      .foot .r {
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.16em;
+        font-size: 11px;
+        color: var(--ink);
+        opacity: 0.55;
+      }
+      @media (max-width: 1100px) {
+        .gallery {
+          grid-template-columns: 1fr;
+        }
+        .swatches {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+    </style>
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
+    />
+    <style id="ft-override">
+      :root {
+        --primary: #efe7d4 !important;
+        --secondary: #2e4a2a !important;
+        --tertiary: #e6dcc4 !important;
+        --accent: #e89cb1 !important;
+        --f-disp: "Source Serif 4", sans-serif !important;
+        --f-body: "JetBrains Mono", sans-serif !important;
+        --green: #2e4a2a !important;
+        --pink: #e89cb1 !important;
+        --cream: #efe7d4 !important;
+        --cream-2: #e6dcc4 !important;
+        --serif: "Source Serif 4", sans-serif !important;
+        --mono: "JetBrains Mono", sans-serif !important;
+        --green-deep: #243a21 !important;
+        --green-lite: #3a5a36 !important;
+        --pink-deep: #d27e96 !important;
+        --ink: #1a1a17 !important;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- COVER -->
+    <section class="cover">
+      <div class="top">
+        <span class="lbl">Frame System · Vol. 01</span>
+        <div class="mono-circle">EF</div>
+      </div>
+      <h1>Paper,<br />ink &amp; <span class="cr">leaf.</span></h1>
+      <div class="lede">
+        A serif-led editorial frame system — Source Serif 4 at weight 500, a forest-green /
+        dusty-rose / oat-cream triad, and JetBrains Mono as the editorial chrome.
+      </div>
+      <div class="footline">
+        <span>Source Serif 4 · JetBrains Mono</span><span>1920 × 1080</span>
+      </div>
+    </section>
+
+    <!-- PALETTE -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">01 — Palette</span>
+        <h2>Three Surfaces</h2>
+      </div>
+      <div class="swatches">
+        <div class="sw">
+          <div class="chip" style="background: var(--green)"></div>
+          <div class="meta">
+            <div class="name">Green</div>
+            <div class="hex">#2e4a2a</div>
+            <div class="role">Forest primary — surface, fill, rule.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--pink)"></div>
+          <div class="meta">
+            <div class="name">Pink</div>
+            <div class="hex">#e89cb1</div>
+            <div class="role">Dusty rose — the accent + on-green text.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream)"></div>
+          <div class="meta">
+            <div class="name">Cream</div>
+            <div class="hex">#efe7d4</div>
+            <div class="role">Oat paper — the default ground.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--ink)"></div>
+          <div class="meta">
+            <div class="name">Ink</div>
+            <div class="hex">#1a1a17</div>
+            <div class="role">Warm near-black body on cream.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--green-deep)"></div>
+          <div class="meta">
+            <div class="name">Green Deep</div>
+            <div class="hex">#243a21</div>
+            <div class="role">Text on pink surfaces.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--green-lite)"></div>
+          <div class="meta">
+            <div class="name">Green Lite</div>
+            <div class="hex">#3a5a36</div>
+            <div class="role">Second green for tile pairs.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--pink-deep)"></div>
+          <div class="meta">
+            <div class="name">Pink Deep</div>
+            <div class="hex">#d27e96</div>
+            <div class="role">Pink-on-pink borders.</div>
+          </div>
+        </div>
+        <div class="sw">
+          <div class="chip" style="background: var(--cream-2)"></div>
+          <div class="meta">
+            <div class="name">Cream 2</div>
+            <div class="hex">#e6dcc4</div>
+            <div class="role">Tiles on the cream ground.</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">02 — Typography</span>
+        <h2>Serif 500 · Mono Chrome</h2>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">display-hero</div>
+          <div class="m">Source Serif 4 · 500 · 220px · −0.02em · opsz</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 120px; line-height: 0.92">Quarterly</span>
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">headline-xl</div>
+          <div class="m">Source Serif 4 · 500 · 96px</div>
+        </div>
+        <div class="spec"><span class="serif" style="font-size: 76px">A Quiet Annual</span></div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">stat-figure</div>
+          <div class="m">Source Serif 4 · 500 · 220px · −0.03em</div>
+        </div>
+        <div class="spec">
+          <span class="serif" style="font-size: 108px; color: var(--green)"
+            >94<span style="font-size: 54px">%</span></span
+          >
+        </div>
+      </div>
+      <div class="type-row">
+        <div>
+          <div class="tok">body</div>
+          <div class="m">Source Serif 4 · 400 · line 1.38</div>
+        </div>
+        <div class="spec">
+          <p
+            style="
+              font-family: var(--serif);
+              font-weight: 400;
+              font-size: 24px;
+              line-height: 1.38;
+              max-width: 680px;
+            "
+          >
+            Body runs the serif at weight 400 — the drop from 500 display to 400 body is the
+            system's reading rhythm.
+          </p>
+        </div>
+      </div>
+      <div class="type-row" style="border-bottom: 0">
+        <div>
+          <div class="tok">label</div>
+          <div class="m">JetBrains Mono · 500 · uppercase · 0.18em</div>
+        </div>
+        <div class="spec">
+          <span class="mono" style="font-size: 16px; color: var(--green)"
+            >Editorial Chrome · Section</span
+          >
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPONENTS -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">03 — Components</span>
+        <h2>Flat · Paper-Based</h2>
+      </div>
+
+      <div class="cgrid">
+        <div class="s8">
+          <div class="cnote">Topic tiles — fills rotate green / pink / green-lite / cream-2</div>
+          <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px">
+            <div class="tile green">
+              <span class="ord">01</span>
+              <div class="ti">Paper</div>
+              <span class="ft">Ground</span>
+            </div>
+            <div class="tile pink">
+              <span class="ord">02</span>
+              <div class="ti">Ink</div>
+              <span class="ft">Type</span>
+            </div>
+            <div class="tile lite">
+              <span class="ord">03</span>
+              <div class="ti">Leaf</div>
+              <span class="ft">Surface</span>
+            </div>
+            <div class="tile cream2">
+              <span class="ord">04</span>
+              <div class="ti">Rose</div>
+              <span class="ft">Accent</span>
+            </div>
+          </div>
+        </div>
+        <div class="s4">
+          <div class="cnote">Monogram circle + KPI</div>
+          <div class="monobig">EF</div>
+          <div class="kpi" style="margin-top: 28px">
+            <div class="tag">Retention</div>
+            <div class="fig">94<span class="u">%</span></div>
+            <div class="d">Net revenue, trailing twelve months.</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cgrid" style="margin-bottom: 0">
+        <div class="s6">
+          <div class="cnote">Bar chart — pink / cream / green, mono ticks</div>
+          <div class="bars">
+            <div class="bar" style="height: 55%; background: var(--pink)">
+              <span class="v">55</span>
+            </div>
+            <div class="bar" style="height: 72%; background: var(--cream-2)">
+              <span class="v">72</span>
+            </div>
+            <div class="bar" style="height: 90%; background: var(--green)">
+              <span class="v">90</span>
+            </div>
+            <div class="bar" style="height: 64%; background: var(--pink)">
+              <span class="v">64</span>
+            </div>
+          </div>
+        </div>
+        <div class="s6">
+          <div class="cnote">Meta definition list — 2px green top rule</div>
+          <div
+            style="
+              border-top: 2px solid var(--green);
+              display: grid;
+              grid-template-columns: repeat(3, 1fr);
+              gap: 36px;
+              padding-top: 20px;
+            "
+          >
+            <div>
+              <div class="mono" style="font-size: 13px; color: var(--green)">Editor</div>
+              <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
+                A. Wren
+              </div>
+            </div>
+            <div>
+              <div class="mono" style="font-size: 13px; color: var(--green)">Issue</div>
+              <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
+                No. 12
+              </div>
+            </div>
+            <div>
+              <div class="mono" style="font-size: 13px; color: var(--green)">Season</div>
+              <div class="serif" style="font-weight: 500; font-size: 30px; margin-top: 8px">
+                Spring
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- COMPOSITIONS -->
+    <section style="background: var(--cream-2)">
+      <div class="topbar">
+        <span class="lbl">04 — Frames</span>
+        <h2>Frame Compositions</h2>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel">
+            <b>Cover</b><span>· identity · green · monogram · centered-left</span>
+          </div>
+          <div class="frame ef1">
+            <div class="tb">
+              <span class="l">Frame System · Vol. 01</span>
+              <div class="mc">EF</div>
+            </div>
+            <div class="body">
+              <h3>Paper, ink<br />&amp; <span class="cr">leaf.</span></h3>
+            </div>
+            <div class="fl">
+              <span class="l">Source Serif 4 · Mono</span><span class="l">01 / 06</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel">
+            <b>Topic Tiles</b><span>· catalog · rotating fills · the dense frame</span>
+          </div>
+          <div class="frame ef2">
+            <div class="tb">
+              <span class="l" style="color: var(--green)">Contents</span
+              ><span class="l" style="color: var(--green)">02 / 06</span>
+            </div>
+            <div class="body">
+              <h3>Four Strands</h3>
+              <div class="row">
+                <div class="t green">
+                  <span class="o">01</span>
+                  <div class="ti">On Paper</div>
+                </div>
+                <div class="t pink">
+                  <span class="o">02</span>
+                  <div class="ti">On Ink</div>
+                </div>
+                <div class="t cream2">
+                  <span class="o">03</span>
+                  <div class="ti">On Measure</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>KPI Stat</b><span>· data · green · oversized figure</span></div>
+          <div class="frame ef3">
+            <div class="tb">
+              <span class="l">By The Numbers</span><span class="l">03 / 06</span>
+            </div>
+            <div class="body">
+              <span class="tag">Retention</span>
+              <div class="fig">94<span class="u">%</span></div>
+              <div class="d">
+                Net revenue retention across the year — the figure carries the frame.
+              </div>
+            </div>
+            <div class="fl"><span class="l">Annual Report</span><span class="l">03 / 06</span></div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Statement</b><span>· quote · cream · centered-left</span></div>
+          <div class="frame ef4">
+            <div class="tb">
+              <span class="l" style="color: var(--green)">In Their Words</span
+              ><span class="l" style="color: var(--green)">04 / 06</span>
+            </div>
+            <div class="body">
+              <h3>Set it slowly,<br />and let it breathe.</h3>
+              <div class="at">Avery Wren</div>
+              <div class="ro">Editor-in-Chief</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PRINCIPLES -->
+    <section>
+      <div class="topbar">
+        <span class="lbl">05 — Rules</span>
+        <h2>Frame Rules</h2>
+      </div>
+      <div class="dos">
+        <div class="do-card do">
+          <h4>Do</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>
+              Run every display in Source Serif 4 weight 500, negative-tracked, tight line-height.
+            </li>
+            <li>Set every label/caption in JetBrains Mono 500 uppercase, 0.14–0.18em.</li>
+            <li>Give every frame a topbar (mono label + monogram or counter).</li>
+            <li>Pick one dominant surface per frame; rotate tile fills, don't repeat one.</li>
+            <li>Separate sections with 2px hairlines in the region's accent.</li>
+          </ul>
+        </div>
+        <div class="do-card dont">
+          <h4>Don't</h4>
+          <div class="rule"></div>
+          <ul>
+            <li>No drop shadows, gradients, or glows — flat, paper-based depth only.</li>
+            <li>No third typeface; no italic or underline; no serif body at 500.</li>
+            <li>No fourth color family; no 1px or 4px rules (2px / 2.5px only).</li>
+            <li>No two competing content blocks — one subject per frame.</li>
+            <li>Don't blow a headline edge-to-edge — fit to measure.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+    <!-- CAPTIONS — preview of caption-skin.html (the preset's lower-third karaoke look) -->
+    <style>
+      /* mirrors caption-skin.html; the skin's --cap-* vocab mapped to this preset's tokens */
+      .capdemo {
+        --cap-ink: var(--ink);
+        --cap-canvas: var(--cream);
+        --cap-accent: var(--pink-deep);
+        --cap-accent-2: var(--pink);
+      }
+      .capdemo .stage {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 16.67cqh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 4;
+      }
+      .capdemo .pill {
+        max-width: 80cqw;
+        padding: 1.4cqw 3cqw 1.7cqw;
+        background: var(--cap-canvas);
+        border: 0.21cqw solid var(--cap-accent);
+        border-radius: 0.6cqw;
+      }
+      .capdemo .line {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 0.1em 0.34em;
+        font-family: var(--serif);
+        font-weight: 500;
+        font-size: 3.4cqw;
+        line-height: 1.16;
+        letter-spacing: -0.02em;
+      }
+      .capdemo .w {
+        display: inline-block;
+        padding: 0 0.06em;
+        color: color-mix(in srgb, var(--cap-ink) 42%, var(--cap-canvas));
+      }
+      .capdemo .w.spoken {
+        color: var(--cap-ink);
+      }
+      .capdemo .w.active {
+        color: var(--cap-ink);
+        background: var(--cap-accent);
+        box-shadow: 0 0 0 0.05em var(--cap-accent);
+        border-radius: 0.6cqw;
+      }
+      .capdemo .bandline {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 16.67cqh;
+        border-top: 2px dashed rgba(46, 74, 42, 0.32);
+        z-index: 3;
+      }
+      .capdemo .bandtag {
+        position: absolute;
+        right: 5cqw;
+        bottom: calc(16.67cqh + 0.7cqw);
+        font-family: var(--mono);
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.12em;
+        font-size: 0.85cqw;
+        color: var(--green);
+        opacity: 0.6;
+        z-index: 4;
+      }
+    </style>
+    <section style="background: var(--cream-2)">
+      <div class="topbar">
+        <span class="lbl">06 — Captions</span>
+        <h2>Lower-Third Karaoke</h2>
+      </div>
+      <div class="gallery">
+        <div class="fw">
+          <div class="flabel"><b>Active line</b><span>· spoken · current · upcoming</span></div>
+          <div class="frame capdemo">
+            <div class="tb">
+              <span class="l" style="color: var(--green)">Captions</span
+              ><span class="l" style="color: var(--green)">05 / 06</span>
+            </div>
+            <div class="bandline"></div>
+            <div class="bandtag">caption band · 16.7%</div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Built</span>
+                  <span class="w spoken">for</span>
+                  <span class="w active">teams</span>
+                  <span class="w">who</span>
+                  <span class="w">ship.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="fw">
+          <div class="flabel"><b>Settled line</b><span>· all spoken · panel cleared</span></div>
+          <div class="frame capdemo">
+            <div class="tb">
+              <span class="l" style="color: var(--green)">Captions</span
+              ><span class="l" style="color: var(--green)">06 / 06</span>
+            </div>
+            <div class="stage">
+              <div class="pill">
+                <div class="line">
+                  <span class="w spoken">Ship</span>
+                  <span class="w spoken">faster</span>
+                  <span class="w spoken">today.</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="foot">
+      <span class="l">Editorial Forest</span>
+      <span class="r">Frame Showcase · Atoms Sacred · Composition Free</span>
+    </div>
+
+    <template id="__bundler_thumbnail">
+      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <rect width="100" height="100" fill="#2e4a2a" />
+        <text x="12" y="46" font-family="Georgia" font-weight="500" font-size="30" fill="#e89cb1">
+          Aa
+        </text>
+        <circle cx="80" cy="26" r="13" fill="none" stroke="#e89cb1" stroke-width="2" />
+        <rect x="12" y="60" width="60" height="2" fill="#e89cb1" />
+      </svg>
+    </template>
+  </body>
+</html>
diff --git a/.claude/skills/hyperframes/references/captions.md b/.claude/skills/hyperframes/references/captions.md
new file mode 100644
index 0000000..ac8e8e5
--- /dev/null
+++ b/.claude/skills/hyperframes/references/captions.md
@@ -0,0 +1,46 @@
+# Captions
+
+## Words and timings
+
+- `npx hyperframes transcribe <file> --json` and a HeyGen voiceover (`/media-use`) give every word's start and end. Work from those as `[{ "id": "w0", "text": "Hello", "start": 0.0, "end": 0.5 }, …]`.
+- Local transcription defaults to `small.en`, which **translates** non-English speech into English. Pass the model: `npx hyperframes transcribe <file> --model small.en` for English, `--model small --language <code>` otherwise, `--model medium.en` for speech over music. It writes `assets/transcript.json` (its JSON names the path) and overwrites it on the next run; `--to srt` or `--to vtt` writes a sidecar.
+- For Chinese, Japanese and other unspaced scripts, local transcription returns a whole sentence as one "word", sometimes in the other script (Traditional for Simplified speech). Split each segment's text into short phrases and spread its time across them by character count; check the characters against what is said.
+- Whisper invents "Thank you." over silence and repeats lines over a silent tail: drop words that start inside a final silence (`silencedetect=noise=-35dB:d=0.6`; real speech sits around −16 to −26 dB).
+- Never put two words in one timed entry, and match transcript words to caption words by position, not text, or a repeated word takes the wrong time.
+- Read the transcript before using it. More than 20% `♪` or `�` tokens, or nonsense words, means it failed: retry with a larger model, or take lyrics from the person. Drop non-word tokens before building groups.
+
+## Structure
+
+- One sub-composition host with `data-track-kind="captions"` holds every caption group, so Studio shows them on one captions track.
+- Ready-made styles: `npx hyperframes catalog --tag caption-style --json`. An installed one is source you can restyle.
+
+## Groups
+
+- 2–3 words for high energy, 3–5 conversational, 4–6 calm. Break at a sentence end, a pause of 150 ms or more, or the word limit.
+- One group visible at a time. A group opens at or before its first word's start and closes at or after its last word's end. A caption at exactly 0 s looks pre-existing: start 0.1–0.3 s in.
+- Every group ends with a hard kill after its exit, or a stale group can stay on screen:
+
+```js
+tl.to(group, { opacity: 0, duration: 0.12, ease: "power2.in" }, end - 0.12);
+tl.set(group, { opacity: 0, visibility: "hidden" }, end);
+```
+
+`tl.set` is an instant flip, so setting `visibility` on the group is fine; never tween it on a `.clip`.
+
+## Fit and place
+
+- Size each group to fit: `window.__hyperframes.fitTextFontSize(text, { fontFamily, fontWeight, maxWidth })` returns `{ fontSize }`. Defaults: `maxWidth` 1600 landscape, 900 portrait; base 78, minimum 42, step 2. When a word scales up for emphasis, divide `maxWidth` by that scale.
+- A full-width absolute container, centred with text alignment. Never `left: 50%; transform: translateX(-50%)`, which clips at the frame edges.
+- `overflow: visible`, not `hidden`, which cuts off scaled words and glows.
+- Landscape: 80–120 px from the bottom. Portrait: about 600–700 px from the bottom. Never over the speaker's face; inside the 80% title-safe box.
+- Position each group absolutely. In a flex column a group hidden with `visibility: hidden` still takes space, so the next one lands lower. In a stack that accumulates, groups in one block share one exit time, or the stack reflows.
+- Fade the group or its words, not both: the opacities multiply and read as a pop. A gradient or `background-clip: text` fill goes on the inner text span, not the transformed container.
+- Over footage, choose the blend by the brightness (0–255) behind the text: under 60 `screen`, 60–180 `overlay`, over 180 `normal` with opaque colour. Plain subtitles above brightness 60 get a scrim sized to the text (30–40%), never a full-width bar.
+- Footage may already carry burned-in subtitles only mid-clip: scan a 1 fps contact sheet before placing captions.
+
+## Text behind the speaker
+
+- Stack the video, then the captions, then a cutout of the person from `npx hyperframes remove-background` (`/media-use`), ordered by `z-index`. Shake or punch in the video and the cutout together in one wrapper.
+- `check` treats a `<video>` as opaque across its whole box, so a WebM cutout fails every caption behind it with `text_occluded`: put `data-layout-allow-occlusion` on the cutout and judge from `snapshot`.
+- A big word behind the head reads best 30–55% covered: under about 15% it floats, over about 65% it is eaten. Re-lay out when a content word is 80% covered, or two adjacent words 50% each. Measure the rendered word boxes against the matte over each caption's own time window (heads move: one clip went from y=224 to y=96 in 8 s); estimates from character widths were wrong both ways.
+- The matte model drops mic arms, lets large rigs near the body leak in, and flickers on held objects. Its first run downloads 168 MB, and it runs at about 2 fps at 1080p on CPU.
diff --git a/.claude/skills/hyperframes/references/film.md b/.claude/skills/hyperframes/references/film.md
new file mode 100644
index 0000000..879bc96
--- /dev/null
+++ b/.claude/skills/hyperframes/references/film.md
@@ -0,0 +1,47 @@
+# Films from a source: measured facts
+
+What is specific to HyperFrames, or was measured on shipped films, when one video is made from a website, a script, a pull request, a music track, a real place or a short motion brief. The story comes first, from `story.md`; the shape of each kind of film is in `types/`. Motion craft is in `motion.md`, look in `look.md`, sound in `sound.md`, captions in `captions.md`.
+
+## Script and pacing
+
+- TTS reads about 2.2 words a second. Keep a scene to about 19 words (9 s); at most two scenes may reach 26 words (12 s). 30–90 s is about 155 words or fewer; a whole film about 400 at most.
+- A voiceover longer than its visuals makes the visuals pad with idle drift. Trim the script; never stretch the motion.
+- Everything on screen in the first quarter of a scene, then frozen, reads as a slideshow. Reveal each piece when the voiceover names it, across the back half of the scene; write the voiceover as separate phrases so it has cue points.
+- Up to about six short scenes, build them yourself in one context (about 9 min for five, against about 21 min split across sub-agents). Beyond that, give each worker two or three scenes and start them all at once; a second wave nearly doubles the time.
+
+## From a website
+
+- `npx hyperframes capture <url> --json` writes `screenshots/full-page.png`: a 1x plate of the whole page, taken after the scroll pass with sticky and fixed elements made static, pixel-exact for a 1920-wide viewport travelling down it. It is skipped above 16384 px tall (use `scroll-*.png`); pushing in past 1:1 needs its own 2x capture of that region.
+- To show the site as it is, use its screenshots. Rebuilding the page in HTML drifts from the real layout; rebuild only the part that moves, or overlay captured assets at measured positions.
+- `--capture-budget` (default 120000 ms) bounds work after navigation; `--timeout` bounds navigation only. Videos are not downloaded: `capture --video <dir> --list`, then `--index N`. `asset-descriptions.md` has vision captions only when `OPENROUTER_API_KEY`, `GEMINI_API_KEY` or `GOOGLE_API_KEY` is set.
+- "very little text content" with an empty asset catalog means the capture is unusable even when it says `ok: true`. A `logo-*.svg` name is a guess from page structure, not proof.
+- Brand tokens: link blue `#0000EE` and status reds and greens are never the accent; the accent is the colour that recurs across the most roles. Icon fonts (Font Awesome, icomoon, webflow-icons) are never the display or body face; a captured monospace goes to the mono role. Use only weights the brand font ships, or 600/700 render as fake bold. Every preset has a light ground: for a dark brand, swap ground and ink.
+- Capture keeps each `@font-face` rule, `unicode-range` subsets included, in `extracted/page.html`; copying the font files alone loses which characters each covers. Name copied fonts by family, weight and style, or an upright and an italic "Regular" collide.
+
+## From a pull request
+
+- `gh pr view --json files` stops at about 100 files: page `gh api repos/{owner}/{repo}/pulls/N/files`.
+- The PR author only opened it: credit commit authors, by commit count (`commits[].authors[]`); skip bots, lockfiles and `dist/`. Reviewers come as logins; names via `gh api users/<login> --jq .name`. TTS reads `@handles` aloud, so speak names.
+- Never invent a version. Use the first non-draft release published at or after the merge; else the default branch's `package.json` version as "unreleased"; else only the PR URL.
+- Length from size (additions + deletions), as a ceiling: ≲50 lines 20–40 s, 50–200 40–70 s, 200–600 70–110 s, ≳600 lines or 25+ files 110–180 s.
+- Show 2–4 hunks of 4–12 lines; counts like +N/−M go on a stat card, not into the voiceover.
+- The `code-*` registry blocks (`npx hyperframes catalog --query code --json`) are 1920×1080 scenes driven by `window.__TOKENS` (Shiki tokens, `github-dark`; `fontStyle` bit 1 italic, bit 2 bold) and `window.__BLOCK` (`{id, effect, seq, line?, duration}`). `code-diff` and `code-morph` need at least two states; `code-highlight` counts lines from 0 and `code-scroll` from 1; `code-typing` types at a fixed speed, so check characters × speed against the scene's duration. They reserve no caption band: inset the panel when captions are on.
+
+## On music
+
+- Library music, HeyGen's included, comes as 15–30 s loops: loop the bed to the film with a 0.4 s fade-in and a 1.5 s fade-out. A track whose opening is a quiet build drains a short film: start from a stronger later section.
+- Trust beat times only on rhythmic stretches; on calm music the tracker invents a metronome, often at double tempo (`npx hyperframes beats` reports `bpmConfidence`). Cut there on phrase and energy changes; `npx hyperframes audio --only sections,onsets,moments --json` finds them.
+- A move that must land on a hit starts 40–190 ms early; a reaction starts 0–45 ms after. The hit itself is a 0 ms `tl.set`: easing a hit kills it. Scenes tile the track with no gaps.
+- A word meant to be read holds at least one beat. Any single treatment goes stale after about 6 s: lengthen a section with a hold or a new treatment, never by slowing tweens. On rhythmic sections give footage one clip per strong beat; on calm ones one slow push from 1.0 to 1.08.
+
+## Maps and real places
+
+- A real place (a city, a building, a route, a zoom from the globe to a street) is shown on real imagery. Vector outlines from Natural Earth or GeoJSON read as a diagram and lose the place; keep them for borders and labels drawn on top.
+- Live tiles change between renders, so bake the camera move to video with `scripts/bake-basemap.mjs` (MapLibre over Esri satellite or Carto tiles; writes an all-intra MP4 and `<NAME>-coords.json`). From space down to a street: `PROJECTION=globe FROM="lng,lat" CENTER="lng,lat" ZSTART=1.85 ZEND=16` (Earth in a starfield turns from FROM to CENTER, then dives); `--help` lists the rest. It needs network for the tiles and takes well under a second a frame, so bake once, keep the MP4, and run one bake at a time. Draw borders, pins and labels as a live SVG from those coordinates, animating them only while the camera holds.
+- Credit the imagery on screen ("Esri, Maxar, Earthstar Geographics" or "© CARTO, © OpenStreetMap") in small type on a soft dark backing, so it holds contrast over bright tiles; mark it `data-layout-ignore` so the type floor in `check` skips it.
+
+## Short motion pieces
+
+- Kinetic type takes 3–7 English words or 4–12 Chinese characters per scene. A count-up runs 1.2–1.6 s, then holds, landing on a downbeat or a hard stop.
+- A highlighter that wraps across lines: tween a custom property on a `background-size` band with `box-decoration-break: clone`. `getTotalLength()` can return 0 before layout; give line draw-ons a fallback.
+- A point in an image guessed directly misses by 16–24% of the frame. `scripts/locate.mjs` narrows it with a numbered 9×9 grid, then 6×6 on the crop, then a check render (about 2% error).
diff --git a/.claude/skills/hyperframes/references/format.md b/.claude/skills/hyperframes/references/format.md
new file mode 100644
index 0000000..1c9971d
--- /dev/null
+++ b/.claude/skills/hyperframes/references/format.md
@@ -0,0 +1,157 @@
+# Composition format
+
+The detail behind the contract in `SKILL.md`. Full references: `npx hyperframes docs compositions`, `docs data-attributes`, `docs troubleshooting`.
+
+## Shape of a project
+
+```html
+<!-- index.html: a normal document; declares variables, mounts scenes -->
+<html
+  data-composition-variables='[{"id":"headline","type":"string","label":"Headline","default":"…"}]'
+>
+  <body>
+    <div
+      id="root"
+      data-composition-id="main"
+      data-start="0"
+      data-duration="12"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="intro"
+        data-composition-id="intro"
+        data-composition-src="compositions/intro.html"
+        data-start="0"
+        data-duration="4"
+        data-track-index="1"
+        data-width="1920"
+        data-height="1080"
+      ></div>
+    </div>
+    <script>
+      window.__timelines["main"] = gsap.timeline({ paused: true });
+    </script>
+  </body>
+</html>
+```
+
+```html
+<!-- compositions/intro.html: everything inside <template> -->
+<template>
+  <style>
+    #root {
+      position: absolute;
+      inset: 0;
+    }
+  </style>
+  <div id="root" data-composition-id="intro" data-width="1920" data-height="1080">
+    <h1 id="headline" class="clip" data-start="0.4" data-duration="3" data-var-text="headline">
+      …
+    </h1>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    tl.fromTo(
+      "#headline",
+      { opacity: 0, filter: "blur(8px)" },
+      { opacity: 1, filter: "blur(0px)", duration: 0.18, ease: "power4.out" },
+      0.4,
+    );
+    window.__timelines["intro"] = tl;
+  </script>
+</template>
+```
+
+- Give the host, the scene root and the timeline key the same id. A host id that differs from its scene's makes each render wait 45 s per scene, then show static frames. Styles and scripts outside `<template>` are dropped.
+- Size the scene root with `inset: 0`, never hard-coded pixels; the canvas is `data-width` × `data-height`.
+- Keep ids unique across the assembled page (prefix them: `#intro-title`). A scene's timeline can't reach elements outside its file.
+- Use `fromTo`, not `from`, inside a scene: the host re-seeks the scene each time it shows, and `from` records its start state once, so it drifts on seek-back.
+- Never `add()` a scene's timeline to the root's; the runtime drives each scene itself, and nesting seeks it twice.
+
+## Attributes you'll use most
+
+| Attribute                                      | Meaning                                                                                             |
+| ---------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `data-start`, `data-duration`                  | Seconds, local to the file that declares the element                                                |
+| `data-track-index`                             | Studio lane only; paint order is CSS `z-index`                                                      |
+| `data-track-kind`                              | `graphics` or `captions` on scene hosts (video and audio come from the tag)                         |
+| `data-composition-src`, `data-variable-values` | Mount a scene file; per-mount variable values (a JSON object)                                       |
+| `data-media-start`                             | Offset into the source media (a trim)                                                               |
+| `data-playback-rate`                           | Constant speed, 0.1–10                                                                              |
+| `data-has-audio="true"`                        | A `<video>` keeps its own sound; a timed `<video>` with neither this nor `muted` fails lint         |
+| `data-volume`, `data-fade-in`, `data-fade-out` | Gain (1 = 0 dB, up to 3.98 = +12 dB) and edge fades; envelopes use `data-automation` (`/media-use`) |
+| `data-link`, `data-sync-origin`                | A video and audio edited as one (see Linked clips)                                                  |
+| `data-hidden`                                  | Hidden in preview and render; reversible                                                            |
+| `data-no-timeline`                             | On the root of a still composition: no timeline to wait for                                         |
+
+## Variables
+
+- Declare an array of `{id, type, label, default}`: the video's own on `index.html`'s `<html>`, a scene or block file's on that file's `<html>` (or root element), where they stay inside each mount. Types: `string` (`placeholder`, `maxLength`), `number` (`min`, `max`, `step`, `unit`), `color`, `boolean`, `enum` (`options: [{value, label}]`).
+- Bind without script: `data-var-text="id"`, `data-var-src="id"` (keep a real fallback `src` on media with audio), `var(--id)` in CSS; for logic, `window.__hyperframes.getVariables()` once at init.
+- Values are an object keyed by id. A host's `data-variable-values` sets one mount; Studio's Variables panel and batch renders set only the root's variables, so to vary a block, change its host's values. Variables can't change the root's `data-duration`.
+
+## Fonts
+
+- Bundled, so they resolve by name: Inter, Montserrat, Outfit, Nunito, Oswald, League Gothic, Archivo Black, Space Mono, IBM Plex Mono, JetBrains Mono, EB Garamond, Playfair Display, Source Code Pro, Noto Sans JP, Roboto, Open Sans, Lato, Poppins. Common system fonts (Helvetica, Arial, Times, Menlo and the like) are swapped for the nearest of these.
+- Any other family needs `@font-face` in the file that uses it, or lint fails `font_family_without_font_face`: `src: url('assets/fonts/x.woff2')` for a file in the project (a capture's own fonts, or one you download there), or `local('Exact Name')` for a font installed on this machine.
+
+## Timing and the timeline
+
+- A clip shows over `[start, start + duration)`: an end state landing exactly on its end is never rendered.
+- Only a composition's root timeline is paused; timelines nested inside it are not. Never `tl.play()`.
+- A scene's clock starts at 0 at its host's `data-start`; media `data-start` is local to its composition. `<video>` / `<audio>` without `data-duration` play their full length; an `<img>` without one lasts 3 s.
+- A host's `data-duration` is the scene's slot: a shorter scene timeline holds its last frame, and a slot shorter than the video goes blank when it ends.
+- Root children with `data-start` are laid out full-frame by the runtime; an untimed full-bleed background needs `position: absolute; inset: 0` or it collapses to nothing.
+- A fill on the composition root is dropped when the video has shader transitions or HDR media; put it on a full-bleed child.
+- `data-start="intro + 0.5"` starts after `intro` ends (spaces required). A typo, a missing id or a cycle silently resolves to 0, so snapshot what you time this way.
+- A clip nested inside another timed element counts its `data-start` from the composition, not from that element, and shows only while that element shows. `timeline` lists it under its parent and warns `never visible` when the windows miss (`lint`: `nested_clip_never_visible`).
+- `npx hyperframes timeline --json` lists every clip by kind with `absStart`, `absEnd`, `file`, `src`, `playbackRate`, `nested`, `host` and `durationSource`: read it instead of opening every file. It reads one level of nesting (a deeper scene shows `children=unread`); `laneError` means a `data-automation` or `data-fx-chain` that doesn't parse.
+
+## Adding media
+
+Write what a Studio drop writes, so the clip behaves like one the person dropped:
+
+- `id`, `class="clip"`, `data-start` (the playhead or the requested time, never a silent 0) and `data-track-index`. Video with sound: `playsinline data-has-audio="true"`; silent footage: `muted playsinline`. Audio: `data-volume="1"`.
+- Images and video fill the frame: `position: absolute; left: 0; top: 0`, width and height equal to the canvas, `object-fit: contain`.
+- `z-index` is the number of top-level clips already in that file plus one.
+- Raise the root's `data-duration` to cover the new clip's end, or it never plays.
+
+## Linked clips
+
+Studio's Detach audio writes a muted `<video>` and an `<audio>` of the same file sharing `data-link` and `data-sync-origin`; Studio moves, trims, splits and deletes them as one.
+
+- Prefer one `<video data-has-audio="true">`; link only when the sound needs its own track, volume or effects.
+- Every member keeps the same `data-start`, `data-duration`, `data-media-start` and `data-playback-rate`; retime them all together.
+- Unlink by removing `data-link` from every member. Leave `data-sync-origin` alone while they are still one source.
+
+## Layout audit opt-outs
+
+`check` measures boxes at sampled times; `overflow: hidden` does not silence a finding. Use the narrowest opt-out:
+
+| Attribute                        | Silences                                                                                                                 |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `data-layout-allow-overflow`     | Overflow on the element and every descendant, including text-clipping checks: keep it on the smallest decorative wrapper |
+| `data-layout-bleed="true"`       | One intentional crop of primary text                                                                                     |
+| `data-layout-allow-overlap`      | Deliberate text layering, on that block only (not inherited)                                                             |
+| `data-layout-allow-occlusion`    | An element meant to cover text                                                                                           |
+| `data-layout-allow-caption-zone` | Intentional copy in the caption band                                                                                     |
+| `data-layout-ignore`             | A decorative element never audited                                                                                       |
+
+## Lint errors you'll meet first
+
+| Rule                                                   | Fix                                                                                                    |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
+| `video_missing_muted`                                  | A timed `<video>` gets `data-has-audio="true"` or `muted`                                              |
+| `gsap_css_transform_conflict`                          | Set the start inside the tween (`gsap.fromTo`) instead of a CSS `transform`                            |
+| `gsap_animates_clip_element`                           | Animate a child of the `.clip`, or its `opacity`                                                       |
+| `video_nested_in_timed_element`                        | Time the `<video>` or its wrapper, not both                                                            |
+| `media_missing_id`, `media_crossorigin_breaks_preview` | Give every `<audio>` an `id`; drop `crossorigin`                                                       |
+| `gsap_timeline_registered_before_async_build`          | Register the timeline at the end of the async callback                                                 |
+| `standalone_composition_wrapped_in_template`           | Only scene files use `<template>`                                                                      |
+| `subcomposition_root_styled_by_class`                  | Style a scene's root as `#root`                                                                        |
+| `subcomposition_blanks_before_host`                    | Make the scene's slot span the time it should show                                                     |
+| `clip_ends_past_root_duration`                         | Raise the root's `data-duration`                                                                       |
+| `linked_clips_out_of_sync`, `linked_clip_orphan`       | Retime every linked member together; unlink from all of them                                           |
+| `sweep_static`                                         | A 3 s+ video with no visible change: spread the motion, or mark a still composition `data-no-timeline` |
+| `missing_data_no_timeline`                             | A root or host with no timeline: add `data-no-timeline`, or every render waits 45 s                    |
diff --git a/.claude/skills/hyperframes/references/look.md b/.claude/skills/hyperframes/references/look.md
new file mode 100644
index 0000000..b20dc14
--- /dev/null
+++ b/.claude/skills/hyperframes/references/look.md
@@ -0,0 +1,69 @@
+# The look
+
+Left alone, the same brief comes out with the same look run after run, and banning that look only moves it to the next default. Outside input breaks it, in this order: the project's design spec, a real brand, a reference image or film the person gave you, the subject's own world. Settle it before the first scene, as numbers in the LOOK line (below).
+
+## The project's design spec
+
+Read the first of `frame.md`, `design.md`, `DESIGN.md` at the project root that exists; ignore the rest.
+
+- **Frontmatter is normative**: `colors`, `typography`, `spacing`, `components`. Quote hex values, families and weights exactly; never round or invent them.
+- **The prose is intent**: what the look is for, Do's and Don'ts. Follow it for judgment, not values.
+- **Brand, not layout**: hex, fonts, weight relationships and Do's and Don'ts are strict; type sizes, spacing, border weight and decoration are yours to scale for video. A 1px border or a 6% shadow from a web page vanishes on screen.
+
+## From a brand
+
+- A website: `npx hyperframes capture <url> --json` writes screenshots, the copy (`extracted/visible-text.txt`), images, logos, `extracted/tokens.json` (colours, fonts) and `extracted/design-styles.json` under its output folder. Look at the screenshots before choosing anything. A capture that exits non-zero, prints `ok: false` or writes `BLOCKED.md` failed: take no brand data from its partial files.
+- Figma: `npx hyperframes figma tokens <fileKey>` (`/figma`).
+- Images the person attached: take palette and type from what you see.
+
+Use the brand's own fonts when the capture shipped their files or they are bundled (`format.md`); otherwise download the family's `.woff2` into `assets/fonts/` with an `@font-face`, or pick the closest bundled family and say so.
+
+## From a reference
+
+A reference film or image gives its grammar, never its content: shot lengths, how titles enter and leave, the transitions, the palette roles, the type's scale and weight. Snapshot it next to yours (`snapshot --at <t,…> --against ref.mp4`) and write the grammar down, marking what you measured apart from what you guessed.
+
+## Presets
+
+The presets are slide-deck looks: use one when the person names it, or for a deck (`/slideshow`), never as the fallback for a film without a brand. Each folder in `../assets/frame-presets/` holds a `FRAME.md` spec, a `caption-skin.html` and a `frame-showcase.html` contact sheet. To use one, copy its `FRAME.md` to the project root as `frame.md`, then read it as above; its fonts that aren't bundled need `@font-face` files. The two HTML files are reference code: read them for treatments, never mount them.
+
+| Preset              | Look                                                                                           |
+| ------------------- | ---------------------------------------------------------------------------------------------- |
+| `biennale-yellow`   | Museum catalogue: parchment, deep indigo ink, solar-yellow blooms, Instrument Serif, hairlines |
+| `blockframe`        | Loud neobrutalist: 4px black borders, hard shadows, candy pastels, Inter 900 caps              |
+| `blue-professional` | Consulting restraint: cream canvas, one cobalt accent, Space Grotesk + Inter, tinted cards     |
+| `bold-poster`       | Vintage editorial poster: Shrikhand tilted display, Baskerville, tomato red, double borders    |
+| `broadside`         | Protest poster: ink-black and fire-orange planes, giant lowercase Barlow 900, mono chrome      |
+| `capsule`           | Friendly editorial: every container a pill, cream, nine candy accents, Bodoni Moda             |
+| `cartesian`         | Quiet catalogue: warm-stone palette, Playfair + Inter, taupe hairline grid, compass rings      |
+| `cobalt-grid`       | Two-colour risograph: cream paper, cobalt ink, graph-paper grid, Newsreader serif              |
+| `code-editorial`    | Developer brand book: warm paper, scarce terracotta, EB Garamond, navy code surface            |
+| `coral`             | Bold magazine: coral, ink and cream planes at hard edges, Bebas Neue, giant numerals           |
+| `creative-mode`     | Sparse neobrutalist: cream, 4px ink borders, Archivo Black caps, rationed accents              |
+| `daisy-days`        | Picture book: charcoal outlines, sunny pastels, Fredoka One, hand-drawn ornaments              |
+| `editorial-forest`  | Literary: green, pink and cream, Source Serif display, mono chrome, flat paper                 |
+
+## The LOOK line
+
+With no design spec, the look is the LOOK line of `SPEC.md` (`spec.md`), taken from the brand, the reference or the subject itself: its era, its materials, where it would be shown. Every part is a number (hex, px, %, a named face and weight), the ground and the hero come from a medium rather than from effects, and the BANNED line keeps it off the defaults. Inter, Space Grotesk, Instrument Serif, Geist and JetBrains Mono are where generated design lands; use them when the brand does, not by default. Copy the palette and the faces into the root variables below.
+
+## Video facts
+
+- Full-screen linear gradients on dark grounds band under H.264; use a radial gradient, a solid fill or a solid plus a local glow.
+- An accent at 5% opacity disappears in compression: 15–25% for atmosphere, full saturation for the focal element.
+
+## Make it re-brandable
+
+Declare palette and fonts as variables on the root `<html>` and use them everywhere, so the person can re-brand from Studio's Variables panel:
+
+```html
+<html
+  data-composition-variables='[
+  {"id":"color-ground","type":"color","label":"Background","default":"<ground from the plan>"},
+  {"id":"color-ink","type":"color","label":"Text","default":"<ink from the plan>"},
+  {"id":"color-accent","type":"color","label":"Accent","default":"<accent from the plan>"},
+  {"id":"font-display","type":"string","label":"Display font","default":"<display face from the plan>"}
+]'
+></html>
+```
+
+Reference them as `var(--color-accent)`; point a registry item's colour and font variables at the same values.
diff --git a/.claude/skills/hyperframes/references/motion.md b/.claude/skills/hyperframes/references/motion.md
new file mode 100644
index 0000000..7595681
--- /dev/null
+++ b/.claude/skills/hyperframes/references/motion.md
@@ -0,0 +1,94 @@
+# Motion
+
+## Motion craft
+
+Measured frame by frame from the official HyperFrames launch films. These are defaults: a reference the person gave, or a Moment that does otherwise on purpose, wins for its own beat.
+
+- **Moves**: a fast move takes 0.3–0.6 s and carries motion blur on its own ease, peaking at its fastest frame: 6–12 px on text-sized elements, 15–20 px full-frame, horizontal-only on a horizontal move. One move is one tween.
+- **Arrive slow, leave clean**: long-tailed ease-outs on arrivals; landing takes longer than leaving. An exit is one smooth motion, never slide, stop, then leave. Entrances that are too snappy read as glitches; slowing the whole video by about a second often fixes it.
+- **Ease by role**: an arrival lands on a long tail (`expo.out`, `power4.out`), a camera move or a colour flood eases both ways (`power2.inOut`), a zoom through or an exit accelerates (`power3.in`). The same `power2.out` at 0.5 s on everything is the flat default that makes a film feel generated. Linear only for rotation, progress and constant speed that is the point.
+- **Springs** are named by damping ratio: 1.0 never bounces, 0.7-0.85 reads premium, 0.4-0.6 playful, under 0.3 a cartoon. Position and size may bounce; opacity and colour never do. GSAP's `elastic.out(1, 0.5)` and `back.out(1.4)` are the nearest built-ins; a closed-form spring of `t` keeps any frame renderable on its own.
+- **Exits** are 40-50% shorter than their entrances. **Overlap**: the next element starts when the previous is 30-50% done; fully sequential looks robotic, all at once looks cheap. **Stagger**: letters a frame apart, words 60-120 ms, list items 40-80 ms.
+- **Beat grid**: frames per beat = fps × 60 / BPM; compute each beat from its index and round it, never add a rounded beat repeatedly (at 128 BPM and 30 fps that drifts 2 frames in 32 beats). Cut on the beat, change the layout on the bar.
+- **Cuts**: cut at the fastest frame of a move, with matching direction and speed on both sides. A click into a new screen is a match cut on the click's rebound; the new screen comes in slightly large and settles.
+- **Titles**: a landed title is dead still; the motion moves to the next element, the camera or the world behind. Vary the entrance within a film, never a fade and slide-up for each:
+  - per word: `blur(6px)` → 0 and opacity 0 → 1 in 0.13 s, 0.067 s apart, no translate;
+  - per word from light grey to ink, 0.07–0.1 s apart, no position change;
+  - the whole line blurring in, 8 px → 0 in 0.13–0.2 s;
+  - per letter for a name, 0.1 s apart, opacity 0.3 → 1 with a slight blur;
+  - behind the subject: the title between the plate and a matte of the person;
+  - one word of the sentence rolling through options like a slot machine, about 0.1 s a roll.
+- **Holds**: a line the viewer must read holds about 0.5 s plus 0.3 s a word, the film's last line at least 2 s; a one- or two-word chapter line may hold 0.4 s. Then exit with a blur-out and fade of 0.13–0.25 s, word by word, or with the scene's move.
+- **Title size**: 4–9% of the frame height, one or two lines; quiet lines at 2.5–4% against hero words that fill 60–90% of the width. One highlighted word in the accent colour, which carries meaning.
+- **Rhythm**: contrast speeds. Montages cut every 0.13–0.8 s; a demo holds one framing for 7–10 s while the UI acts; shots average 1.8–3 s with motion inside them. Hold 0.3–0.75 s before the payoff, which plays at normal speed.
+- **Continuous motion that works**: the product's UI working, footage playing, a character acting, a 3D world turning, a slow orbit of a background stage (3–5° a second).
+- **Defaults that look generated**: breathing, floating or pulsing loops standing in for motion on titles and UI; titles that keep sliding or scaling after they land; a slow creeping scale on a title or a slow push late in a scene; bounce on UI; click rings; every scene entering the same way; every element fading and sliding up. A character's idle and overshoot are acting, not these (`types/character.md`).
+
+## Transitions with a cause
+
+Use 3–5 kinds in a film, each caused by something on screen. Hard cuts belong inside a scene (punch-ins); at most a third of the seams between beats are hard cuts, and worlds never crossfade into each other. Measured on the official films:
+
+| Transition               | How it is built                                                                                                                                                                     |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Zoom through a button    | the camera tracks to the button with blur (0.6 s), then the button scales from ~8% to ~250% of the frame in 0.35 s, strong ease-in; its fill becomes the next frame                 |
+| Object becomes the world | a pill or card grows past the frame in 0.65 s, ease-in-out, its radius shrinking; what was around it blurs ~15 px and fades in 0.3 s; the new content fades in while it still grows |
+| Morph                    | one container widens into the next (icon card → prompt box, ~110 → ~880 px in 0.2 s `power3.out`) with a horizontal blur 12 → 0                                                     |
+| Carry across             | the result shrinks 1 → 0.6 with blur peaking at 6 px mid-move and lands inside the next app as it builds around it                                                                  |
+| Colour flood             | the hero object stays while the whole ground changes colour in ~0.4 s `power2.inOut`                                                                                                |
+| Whip                     | a horizontal or vertical smear of 0.13–0.3 s; the arriving element lands blurred and sharpens in ~0.13 s                                                                            |
+| Iris from the click      | `clip-path: circle()` opens from the clicked point onto the next world in 0.15 s                                                                                                    |
+| Dip cut                  | the outgoing frame darkens ~40% for 3 frames before a hard cut, so the cut reads as meant                                                                                           |
+| Blur swap on one stage   | out: opacity → 0 with ~8 px blur in 0.13–0.2 s; in: blur → 0 in 0.13 s; the ground never cuts                                                                                       |
+
+Registry versions: `npx hyperframes catalog --tag transition --json`.
+
+| The person says        | Change                                                                         |
+| ---------------------- | ------------------------------------------------------------------------------ |
+| "too fast"             | Slow every zoom and pan to 0.7× of its speed, nothing else                     |
+| "speed this up"        | Speed the content and shorten the beat by the same amount; later beats move up |
+| "the titles move"      | Land them, then hold them dead still until they leave                          |
+| "it feels like slides" | Enter the next scene through an object on screen; cut a move mid-flight        |
+
+## The right mechanism
+
+| Request                                 | Mechanism                                                                                                                  |
+| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| Punch-in, zoom, pan, Ken Burns, reframe | Tween `scale` and `x`/`y` on a wrapper inside the clip, never on the timed media element; chain the states on one timeline |
+| Crop or mask reveal                     | Tween `clip-path` or a mask on an inner wrapper; source time is untouched                                                  |
+| Constant speed change                   | `data-playback-rate` on the media, 0.1–10 (picture and pitch-preserved sound)                                              |
+| Speed ramp                              | A `rate` lane in `data-automation` on the media (`t` in clip seconds, `v` 0.1–10); it overrides the constant rate          |
+| Hold or freeze                          | Hold a final frame or a finished scene; a freeze mid-source needs a still exported first and placed as its own clip        |
+
+Ready-made moves: `npx hyperframes catalog --tag camera --json`, or `catalog --query "<the move>" --tag motion-primitive --json`.
+
+## Seeing motion
+
+The whole-film pass (beat sheet, cuts, phone width, the craft warnings) is `review.md`. For one move:
+
+- `npx hyperframes keyframes --json [--selector '#id'] [--runtime all]` lists keyframes and motion paths (GSAP, CSS, anime.js): property, time, value, ease.
+- `npx hyperframes keyframes --shot motion.png --selector '#id'` draws the real element's samples over time with its path (9 samples; `--samples N`). `--layout strip` for motion in place, `--from`/`--to` for one stretch, `--angle iso|top|side|'yaw,pitch'` for 3D, `--ghost` for a `<canvas>`.
+- `npx hyperframes snapshot --range 2,4 --frames 8` samples one stretch; `--composition <id>` samples one scene; `--at <t,…>` exact instants; `--zoom '#id'` a sharp crop; `--angle iso` depth and overlap.
+- Against a reference video: `snapshot --at <t,…> --against ref.mp4` writes a side-by-side sheet.
+- Assert intent instead of eyeballing it: a `<name>.motion.json` next to the composition makes `check` verify it on the seeked timeline, as errors (`motion_appears_late`, `motion_out_of_order`, `motion_off_frame`, `motion_frozen`):
+
+```json
+{
+  "assertions": [
+    { "kind": "appearsBy", "selector": "#headline", "bySec": 0.5 },
+    { "kind": "before", "a": "#headline", "b": "#cta" },
+    { "kind": "staysInFrame", "selector": ".card" },
+    { "kind": "keepsMoving", "withinSelector": ".scene" }
+  ]
+}
+```
+
+## Common faults
+
+| Symptom                          | Usual cause                                                                                                                                    |
+| -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| Blank or frozen scene            | Timeline registered before an async build finished, `visibility` tweened on a `.clip`, or a host id that differs from its scene's timeline key |
+| Stutter or drift between renders | Layout measured in `onUpdate`, `requestAnimationFrame` or clock time; two timelines on one property                                            |
+| Jump at a cut                    | Outgoing and incoming states differ at the seam: snapshot just before and after it                                                             |
+| Ease looks off at a handoff      | Speeds don't match across the seam: mirror the ease (`power3.in` out, `power3.out` in)                                                         |
+
+Studio's keyframe diamonds and motion-path handles rewrite the GSAP script in the composition file, so the person may have changed motion since you wrote it.
diff --git a/.claude/skills/hyperframes/references/overlays.md b/.claude/skills/hyperframes/references/overlays.md
new file mode 100644
index 0000000..2f5f83a
--- /dev/null
+++ b/.claude/skills/hyperframes/references/overlays.md
@@ -0,0 +1,39 @@
+# Cards over talking-head footage
+
+Designed cards, lower thirds and split layouts over a person speaking. Placement numbers are for 1920×1080 and 1080×1920; scale others.
+
+## Where the video sits
+
+| Layout                       | Landscape (x, y, w×h) | Portrait (x, y, w×h) |
+| ---------------------------- | --------------------- | -------------------- |
+| Split, video beside the card | 960, 0, 960×1080      | 0, 960, 1080×960     |
+| Stack, video above           | 14, 14, 1892×548      | 0, 0, 1080×844       |
+| Overlay                      | full frame            | full frame           |
+
+Picture-in-picture, 28 px from the edges (bottom-right: y = H − h − 28):
+
+| Canvas    | Source | Rectangle         |
+| --------- | ------ | ----------------- |
+| Landscape | 16:9   | 1432, 28, 460×258 |
+| Landscape | 9:16   | 1644, 28, 248×440 |
+| Portrait  | 16:9   | 690, 28, 360×203  |
+| Portrait  | 9:16   | 738, 28, 312×555  |
+
+- Card zones: a lower third is the bottom 30%; a side panel the right 42% (landscape) or bottom 40% (portrait). Glass card slots: 48, 460, 660×540 landscape; 24, 1280, 1032×564 portrait.
+- Portrait type is landscape × 1.3 (titles × 1.35, stats × 1.4); padding drops from 40–64 px to 24–36 px.
+- Size a rectangle to its source's aspect: `object-fit: cover` crops a portrait source in a landscape box.
+
+## Timing
+
+- Cards fade in over 0.4 s (`power2.out`) and out over 0.35 s (`power2.in`). Re-frame the video (0.5–0.7 s) only in a gap between cards; move it with transforms on a wrapper, not `left`/`top`/`width`/`height`.
+- A static card goes dead after about 8 s; past about 15 s it needs a staged reveal. As a starting density: one card per 6–8 s under a minute, 8–12 s up to 3 min, 12–20 s up to 10 min.
+- A transcript's last word can end past the media: clamp card ends and the root `data-duration` to the file's ffprobe length, or the render ends in black.
+
+## Pitfalls
+
+- Lower-third, overlay and picture-in-picture scenes need a transparent root, or they hide the speaker.
+- Glass over bright footage goes white on white: put a dark scrim behind it (about `rgba(0,0,0,.55)` fading out from the top, `.72` at the bottom) and a dark glass base such as `rgba(15,16,22,.78)` with `backdrop-filter: blur(22px)`.
+- More than 3 timed elements on one track warns `timeline_track_too_dense`: give each chapter its own sub-composition.
+- Footage with keyframes more than about 1 s apart freezes on seek: re-encode with `-g <fps>`.
+
+Text behind the speaker (a caption between the footage and a cutout of the person): `captions.md`.
diff --git a/.claude/skills/hyperframes/references/plugin-installation.md b/.claude/skills/hyperframes/references/plugin-installation.md
new file mode 100644
index 0000000..ad7809b
--- /dev/null
+++ b/.claude/skills/hyperframes/references/plugin-installation.md
@@ -0,0 +1,43 @@
+# Running from an installed plugin
+
+Check the directory two levels above the loaded `SKILL.md` for `plugin.json`,
+`.claude-plugin/plugin.json`, `.codex-plugin/plugin.json`, or
+`.cursor-plugin/plugin.json` identifying `hyperframes`, or a Gemini extension manifest.
+That directory is `<PLUGIN_ROOT>`. If none exists, this is a standalone skill;
+follow the normal installation and freshness instructions.
+
+For a plugin installation, these rules replace the standalone update commands
+in every skill and reference:
+
+- Do not run `hyperframes skills update`, `skills check`, or `npx skills add`.
+  The agent's plugin manager owns installation and updates. Read the skill at
+  `<PLUGIN_ROOT>/skills/<name>/SKILL.md`; report a missing bundled skill instead
+  of downloading a different release. Resolve all skill references inside this
+  bundle, even if a standalone copy is also installed. Claude exposes the router
+  as `/hyperframes:hyperframes`; other clients may expose `/hyperframes`.
+- Replace `npx hyperframes` (or bare `hyperframes`) in command examples with:
+
+  ```bash
+  node "<PLUGIN_ROOT>/skills/hyperframes/scripts/plugin-cli.mjs" <command> <args...>
+  ```
+
+  Run in the user's project directory, never in the plugin directory. The launcher
+  selects the manifest's CLI version and disables automatic standalone skill
+  installation, including during `init`. The first call may download that exact
+  CLI version through npm. A download failure is an error, not permission to use
+  latest. Existing project dependency files and lockfiles must not be overwritten
+  to match the plugin; surface a runtime incompatibility before changing them.
+
+- For bundled Node helpers, use the same
+  launcher with `--script <absolute-script-path> <args...>`. This passes the
+  release version to their dependency loader. External providers, registry
+  downloads, and existing project dependencies have their own versions; a plugin
+  version alone does not freeze those inputs.
+- Treat the plugin directory as read-only. Put outputs and temporary work in the
+  project or a temporary directory. Pass this plugin root and launcher convention
+  to any delegated agent so it does not fall back to global skills.
+
+To get newer skills, use the client's plugin update flow and reload the session.
+Do not silently update an installed plugin during a video task.
+
+The launcher suppresses CLI update notices as well as standalone skill refreshes, including when running an older CLI with a stale notice cache. It passes the release as `HYPERFRAMES_PLUGIN_VERSION` for plugin-aware helpers and as `HYPERFRAMES_SKILL_PKG_VERSION` for the existing helper-package bootstrap. Our release process versions those packages together.
diff --git a/.claude/skills/hyperframes/references/review.md b/.claude/skills/hyperframes/references/review.md
new file mode 100644
index 0000000..9dcef20
--- /dev/null
+++ b/.claude/skills/hyperframes/references/review.md
@@ -0,0 +1,51 @@
+# Review
+
+You wrote the timeline, so you know what happens; the viewer sees it once, at full speed, often on a phone. Review is how you see the film as they will: as a harsh motion director, not a proud author. `check` catches what is broken; this pass catches what is weak. Run it after `check` passes, on every new film and on any edit that changes timing or layout, before you reply or render.
+
+## 1. Measure, then look
+
+1. `npx hyperframes check --json`. Besides errors it warns on craft it can measure: a line on screen too briefly to read (`line_unread`), more than 3 s with nothing changing (`dead_stretch`), text under 2.6% of the frame's short side (`text_below_floor`), an empty first frame (`first_frame_empty`, the thumbnail on social players), a film over 15 s with no sound (`film_silent`). A warning is a question, not a rule: fix it, or keep it on purpose and say why in the note (a deliberate hold carries `data-hold`).
+2. `npx hyperframes snapshot --review` writes three sheets: each scene just after it starts and at its middle, plus each `data-beat`, a strip across every cut (−0.2 s to +0.2 s), and the beat frames at phone width (360 px). Open all three.
+3. Motion between the beats: `snapshot --range START,END --frames 8` around the hero move and the payoff; `keyframes --shot` for a path that must arc or land.
+4. The rendered file: `npx hyperframes audio <video> --json` shows whether sound is there, where it hits and how loud it is. You cannot hear it; say so.
+
+Trust the numbers over your eye where they disagree: a clipped label or a 0.6 s line looks fine on a contact sheet.
+
+## 2. What to look for
+
+First, describe each beat frame in one sentence as a stranger would, naming every object; an object you would have to explain ("those bars are mirrors") is a P0. Then read the beat frames in order: do they tell a story a stranger follows, each one causing the next? Compare each with its shot in `SPEC.md`; what does not match is a note. Then name every default the frames show (`spec.md` "BANNED by default", or one not on the list yet), add each to the BANNED line, and fix them before anything else.
+
+Then go through the sheets once per question:
+
+| Question                      | What it catches                                                                                                                                    |
+| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Does it read as what it is?   | A shape that reads as another object, a material that reads as plastic, a product screen that reads as a mockup, a face or mascot that reads wrong |
+| Does the subject separate?    | Subject and ground too close in value, two focal points in one frame, the eye with nowhere to go                                                   |
+| Framing and contact           | Crops, text at the edge or under platform UI, collisions at a seam, things floating that should touch                                              |
+| Timing as a first-time viewer | A read shorter than its words (`story.md` §6), something that pops on with no move, a jump at a cut, everything moving at once on one curve        |
+| Tells                         | Which items of `story.md` §8 and `motion.md` "Defaults that look generated" are on screen                                                          |
+| The pictures alone            | With the words covered, do the beat frames still tell the storyline?                                                                               |
+| The phone sheet               | Can every line meant to be read be read at 360 px?                                                                                                 |
+
+## 3. Notes and fixes
+
+Write each problem as one line: `t=4.2s · where · problem → exact change · what stays`. Rank them:
+
+- **P0** breaks the read or the contract: unreadable, wrong, broken, a tell in the hero shot.
+- **P1** weakens the film: a dead stretch, a soft payoff, a seam that jumps.
+- **P2** polish.
+
+Fix every P0 and the P1s worth their time: text first, then timing, then detail. Then snapshot only what you changed, once. A second pass only when a P0 is still open. Never score the film out of 10: a score finds nothing to fix. When a fix does not hold, snapshot the frames on either side of the problem, list every difference, and change only the line that causes it. A film that feels busy: remove a third of the motion and keep the moves that lead the eye.
+
+A fresh pair of eyes, when your host can start a sub-agent: give it only `STORYBOARD.md` and the three sheets, ask for P0 and P1 lines in the format above, and keep editing to yourself. Commit or copy the project before you fix, so a fix that makes things worse can be rolled back.
+
+## 4. The delivery note
+
+Write `REVIEW.md` at the project root and put its short form in your reply:
+
+- the creative calls you made, and the storylines you did not build;
+- what you measured and what you only looked at; what nobody checked (the sound was measured, not heard);
+- the weakest shot, and what you would change with more time;
+- warnings you kept on purpose, and why.
+
+The next turn reads it before changing anything.
diff --git a/.claude/skills/hyperframes/references/runtimes.md b/.claude/skills/hyperframes/references/runtimes.md
new file mode 100644
index 0000000..dbe2755
--- /dev/null
+++ b/.claude/skills/hyperframes/references/runtimes.md
@@ -0,0 +1,43 @@
+# Animation runtimes
+
+HyperFrames seeks each frame on its own, so motion must be a function of time, never of the previous frame. Full GSAP reference: `npx hyperframes docs gsap`.
+
+## GSAP facts that bite
+
+- Register the timeline last. Building inside `document.fonts.ready.then(…)` or another async callback is fine if you register at the end of it; registering first renders blank (`gsap_timeline_registered_before_async_build`).
+- Place tweens at absolute seconds (`tl.to(el, {…}, 2.4)`). Set start states in the tween (`fromTo`), not in CSS.
+- Measure layout once before building tweens, never inside `onUpdate`.
+- Finite repeats only: `repeat: Math.max(0, Math.floor(duration / cycle) - 1)`.
+- Seed randomness with a small PRNG (mulberry32).
+- A scene's timeline can't reach elements outside its file, and two timelines must not animate the same property of one element.
+- Transforms on a `<span>` need `display: inline-block` or `block`.
+- Text that must fit a width: `window.__hyperframes.fitTextFontSize(text, { fontFamily, fontWeight, maxWidth })` returns `{ fontSize }`; `window.__hyperframes.pretext` measures text without a reflow.
+
+## Other runtimes
+
+| Runtime                      | Use for                           | How HyperFrames drives it                                                                        |
+| ---------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------ |
+| CSS `@keyframes`             | Simple loops and decoration       | Found automatically; finite iterations, `animation-fill-mode: both`, `data-start` on the element |
+| WAAPI                        | Native keyframes                  | `element.animate(…, { fill: "both" })` then `pause()`; times are document time, so use `delay`   |
+| Lottie / dotLottie           | After Effects exports, characters | `autoplay: false`, always set `loop`, push the instance to `window.__hfLottie`                   |
+| anime.js v4                  | Existing anime code               | `autoplay: false`, push to `window.__hfAnime`, `anime.createSeededRandom`                        |
+| Three.js, WebGPU, p5, canvas | 3D and generative                 | Draw from `e.detail.time` in an `hf-seek` listener; set `data-duration` on the root              |
+
+Charts and map overlays: drive them from a GSAP tween's `onUpdate`, not the library's own transitions. A real place is shown on baked imagery, not drawn (`film.md` "Maps and real places"). Heavy setup (big meshes, shader compiles) registers a `window.__hf.buildReady["<key>"]` promise.
+
+## The seek protocol
+
+```html
+<script>
+  function renderAt(t) {
+    /* draw the frame for t seconds from state derived from t alone */
+  }
+  window.addEventListener("hf-seek", (e) => {
+    renderAt(e.detail.time);
+    // async work (GPU submit, image decode): e.detail.waitUntil(promise), called synchronously
+  });
+  renderAt(0);
+</script>
+```
+
+No `requestAnimationFrame` loop or timer as the clock.
diff --git a/.claude/skills/hyperframes/references/skill-lifecycle.md b/.claude/skills/hyperframes/references/skill-lifecycle.md
new file mode 100644
index 0000000..eeaf865
--- /dev/null
+++ b/.claude/skills/hyperframes/references/skill-lifecycle.md
@@ -0,0 +1,45 @@
+# Skill installation and freshness
+
+Read this reference when installing or updating skills, diagnosing unexpected skill behavior, or running HyperFrames setup in CI.
+
+For a plugin installation, follow [plugin execution rules](plugin-installation.md); the plugin manager owns updates and every skill is bundled. The commands below apply only to standalone skills.
+
+- **Core set, installed eagerly:** `/hyperframes`, `/hyperframes-cli`, `/hyperframes-registry` and `/media-use`.
+- **On demand:** `/figma`, `/slideshow` and `/remotion-to-hyperframes`, installed with `npx hyperframes skills update <name>`.
+
+## What `init` does
+
+`npx hyperframes init` checks GitHub and refreshes the core set plus other skills already installed. A current install is a no-op. Offline or rate-limited checks degrade gracefully and do not fail project scaffolding.
+
+The `--skip-skills` CLI flag is temporarily ignored. CI and tests may opt out with `HYPERFRAMES_SKIP_SKILLS=1`.
+
+`HYPERFRAMES_SKIP_SKILLS=1` also makes `skills update` (bare or named) and bare `skills` exit 0 without installing or pruning, so an install pinned to one commit stays pinned.
+
+## Diagnose and update
+
+```bash
+npx hyperframes skills check
+npx hyperframes skills check --json
+npx hyperframes skills update
+npx hyperframes skills update <name>
+npx hyperframes skills
+```
+
+- `skills check` exits non-zero when an installed skill is stale or the core set is incomplete. Skills available on demand but not installed are not failures.
+- Bare `skills update` refreshes the core set and everything already installed, and removes skills that are no longer published.
+- Named `skills update <name...>` also installs those named skills.
+- Bare `skills` installs the full published set explicitly.
+
+If the HyperFrames CLI is unavailable, use `npx skills add heygen-com/hyperframes --skill <name>` for one skill or `npx skills add heygen-com/hyperframes --all` for the full published set.
+
+The CLI may print a one-line stale-skill reminder during `render`, `lint`, or `check`. Treat a failed update as a visible tool failure; do not continue from a remembered skill.
+
+## Keep the project's CLI current
+
+A scaffolded project pins `hyperframes@<version>` in its `package.json` scripts so renders stay reproducible; the pin never advances on its own, and a pinned run of an older CLI prints no warning about it. When resuming a project whose scripts carry a pin, probe once before the first render-affecting command:
+
+```bash
+npx hyperframes@latest upgrade --project . --check
+```
+
+The probe is read-only and reports the pin against the latest release; keep the explicit `.` — on older CLI releases a bare `--project` followed by another flag consumes that flag as its directory value. When it reports the project behind — or any CLI output already shows it (the stderr notice `This project pins hyperframes@… (latest …)`, or `_meta.updateAvailable: true` in a `--json` result from a pinned script) — apply with `npx hyperframes@latest upgrade --project .`, then verify with `npx hyperframes check`. A passing check confirms the project's compositions still validate on the new version — not that rendered output is frame-identical to the old pin — so a successful bump is never silent: name the old and new version in the run's summary. A project with no composition yet needs no verification. If the check fails, revert the `package.json` change, continue on the pinned version, and report which version the project stays on and why. Act on the signal rather than relaying it to the user; never leave a bumped pin unverified.
diff --git a/.claude/skills/hyperframes/references/sound.md b/.claude/skills/hyperframes/references/sound.md
new file mode 100644
index 0000000..8c252ca
--- /dev/null
+++ b/.claude/skills/hyperframes/references/sound.md
@@ -0,0 +1,43 @@
+# Sound
+
+Sound is half of how a film feels, and the viewer notices a silent one before any frame. Every judge of frames misses it, so plan it on purpose.
+
+## 1. The default
+
+- **A film over about 15 s that tells something** (launch, explainer, recap, PR video) gets a music bed and sounds on its visible actions, unless the person asked for silence or it is made to play muted (a looping background, a feed that autoplays without sound: then the type and the pictures carry it alone).
+- **A voiceover** only when the request or the source calls for one (`SKILL.md`).
+- **Each storyline says its sound** in one line (`story.md` §2): the bed's feel and tempo, the one moment the music changes, which actions get effects, or silence and why.
+- **Short pieces** (a title card, a sting under 10 s, captions or overlays on footage that has its own sound) follow the request and the footage.
+
+## 2. The clock
+
+- **Narrated**: the voice is the clock. Time each beat's start to its anchor word; text lands on the word that says it.
+- **Music only**: the music is the clock. Land the payoff and the mark on its strong beats (`npx hyperframes beats`, then `film.md` "On music"); cuts follow the motion, not the drums.
+- Let the sound act out the story when it fits: the old way sits near silence, the music opens when the product appears; the music holds back until the payoff.
+
+## 3. Music
+
+The person's own track first, as given. Else search the catalog (`/media-use`, `bgm`) with the film's feel and tempo, not its subject ("tense minimal pulse building to a bright drop, 120 bpm"), and read a few results before keeping one. Enter at the track's strongest bar, not a quiet intro; end on a bar line with a short fade under the end card.
+
+With no music source (no `heygen` sign-in and no local model), deliver silent and say so in one line with how to add one. Do not spend the run building an audio chain or writing music in code: nobody can hear whether it is good.
+
+## 4. Effects
+
+Few and exact: every effect has a cause on screen, and too many read as a template.
+
+| Sound             | Only on                                        |
+| ----------------- | ---------------------------------------------- |
+| click             | a real cursor click on screen                  |
+| whoosh            | a scene cut, or a large card moving fast       |
+| soft key tick     | text arriving letter by letter or line by line |
+| pop               | a badge, chip or number landing                |
+| riser into impact | the payoff or the mark, once in the film       |
+
+- Place a clip so its peak lands one frame after its picture (light arrives before sound; a sound early feels wrong sooner than one late): `npx hyperframes audio <file> --json` reports where it hits, and most files peak after their start.
+- Each hit sits 3-6 dB over the bed; a bed with most of its energy under 150 Hz plays as nothing on a phone speaker.
+- Rotate two or three takes of a repeated sound; the same whoosh on every cut is the most common tell.
+- Over strong music, a typing-heavy film can drop the clicks and keys. No synthesised tones, chimes or dings.
+
+## 5. Levels
+
+Music under a voice sits around 0.14 volume; nothing clips (AI audio often does). Keep each file's true peak at −1 dBTP or lower and the mix around −16 to −14 LUFS for social, `npx hyperframes normalize-audio` to match levels (`/media-use`). Check the rendered file with `npx hyperframes audio <video> --json`: sound present, hits where the picture hits, loudness in range. Say in the delivery note that it was measured, not heard (`review.md` §4).
diff --git a/.claude/skills/hyperframes/references/spec.md b/.claude/skills/hyperframes/references/spec.md
new file mode 100644
index 0000000..ac756a0
--- /dev/null
+++ b/.claude/skills/hyperframes/references/spec.md
@@ -0,0 +1,76 @@
+# The spec
+
+Adjectives are where the default look lives. Given "premium, modern, clean", the model fills every gap with its own defaults, and they look the same in every run: a dark void, a glow, small type floating in the middle, everything fading in. Every adjective you turn into a number is a decision taken back from those defaults.
+
+So before any scene, write `SPEC.md` at the project root: the film as a director's brief to yourself, with a number wherever you would have written an adjective. Build from it, check against it, and change it when a review changes the film.
+
+The spec serves the story, never the other way round (`story.md`). A look that turns the story's things into abstract shapes has failed, however striking the frame.
+
+## The template
+
+```text
+GOAL:    what the viewer feels or does at the end, one sentence
+OUTPUT:  HyperFrames, W x H, fps
+TIME:    seconds x fps = frames; BPM and frames per beat when there is music
+LOOK:    ground (hex, texture and its amount), ink, one accent and where it may appear;
+         display face + weight + size in px + tracking, body face the same;
+         the medium (paper and ink, photographs, product UI, glass, clay, 3D studio) with its numbers;
+         light and depth: shadow offset, blur and opacity, grain %, vignette %
+OBJECTS: every thing the story needs the viewer to recognise (a mirror, a clock, a phone, a person),
+         drawn with the material and details that make it read without a label: a mirror is
+         silvered glass with a bright edge and a mount, not a bar
+MOTION:  eases by role as named curves (enter, move, exit, camera); springs as damping ratio;
+         durations and staggers in frames
+SHOTS:   one line per shot: frame range, the one hero move, what the viewer reads (with its window),
+         the sound, and how it hands off to the next shot
+BANNED:  the defaults below, plus anything this film must not become
+QA:      the frames to check, and what each must show
+```
+
+## Turning words into numbers
+
+| The word  | Becomes                                                                                                                                |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| premium   | a material with numbers: satin paper with 2% grain, a product on a seamless sweep with a 0.55 contact shadow, chrome at roughness 0.05 |
+| modern    | a camera and a type system: a 30-frame push on one ease, a display face at 9% of the frame height with -2% tracking                    |
+| clean     | a grid and a ration: 12 columns, 96 px margins, the accent on one word per shot                                                        |
+| dynamic   | cuts on the beat, a layout change on the bar (every 4 beats), one hero move per shot                                                   |
+| playful   | springs at damping 0.45-0.6 on position and scale (never on opacity or colour), 10-30% exaggerated poses                               |
+| cinematic | a lens and a light: a 35 mm framing, a key from upper left, a rim from behind, 6% vignette                                             |
+
+## Composition numbers
+
+- The hero of a shot fills at least 40% of the frame's height or width. A small object in the middle of an empty frame is never a shot; push in, crop, or give it a world.
+- One hero move per shot. Secondary moves travel 50-70% as far, start 100-200 ms after it, and everything else holds still.
+- In a story film every shot moves the story: something happens that causes the next shot. Lines read as cause and effect ("so…", "which means…"), not slogans.
+- An information card (B-roll over a talking head, a data beat, a vertical explainer card) is different: its information is on screen within about 2.5 s, then it holds, so any paused frame reads as a finished poster.
+- Something new every 2-4 s across the film; a new layout every bar when there is music.
+- Text meant to be read: at least 28 px at 1080 (2.6% of the short side), held 0.5 s + 0.3 s a word. Too many words: cut words, never shrink type.
+
+## BANNED by default
+
+These are where generated video lands when nothing else is decided. Each is banned unless the brand's own material or the person's reference uses it, and then only as they use it:
+
+- a black or dark navy void as the ground, with small elements floating in its middle;
+- glow, bloom, neon, lens flares, glowing orbs and rings; floating particles as decoration;
+- purple or blue gradients, mesh gradients, glass cards;
+- a cream or off-white paper ground with a serif display, italic accent words, numbered "01 / 02" labels, small monospace caps labels, pill-shaped chips and buttons;
+- everything centred; everything fading in at once; every element fading and sliding up;
+- text that moves while it is read; titles that keep drifting after they land;
+- corner labels, frame borders, corner brackets, HUD readouts as decoration;
+- three cards in a row, KPI grids, a title over a dimmed screenshot;
+- the logo docked in a corner.
+
+After the first render, name every default it used anyway, from this list or not, add each to the film's BANNED line, and fix them. The list grows with every film.
+
+## A look built from a medium
+
+A look holds together when it is the rules of one medium, not a palette. A risograph look, for example, is five parts and nothing else:
+
+- **paper**: one flat colour with a fibre noise, no gradients;
+- **ink A**: every word that must be read and every structural line;
+- **ink B**: one fluorescent accent, one focus per frame (the number, the bar, the stamp);
+- **overprint**: where the inks overlap a third colour appears, and the B plate sits 3 px off register;
+- **halftone**: every gradient is dots.
+
+Motion comes from the same medium: the frame is printed, plate by plate, not faded in. Write any look this way: its parts, what each may carry, and how the medium itself moves (paper is cut and lifted, ink is printed, glass refracts, clay is pressed).
diff --git a/.claude/skills/hyperframes/references/story.md b/.claude/skills/hyperframes/references/story.md
new file mode 100644
index 0000000..528ca1d
--- /dev/null
+++ b/.claude/skills/hyperframes/references/story.md
@@ -0,0 +1,103 @@
+# Story
+
+Read before building any video that tells something over about 15 s: a launch or promo, an explainer, a pull-request or changelog video, a recap, a music video with a narrative. Most weak films are good motion around no story: a list of features, three cards in a row, a logo, a URL.
+
+Skip it for an edit to an existing project, captions or overlays on footage, and a short single-idea piece (one kinetic line, a map move, a highlight on an image), where the request is the story. When the person gave a script, a storyboard or a reference film, follow theirs. The shape of each kind of film (launch, explainer, music, data, vertical, 3D, character) is in `types/`.
+
+## 1. The one thing
+
+- **What it is**, in one line: "You can now …" for a launch, the one idea the viewer must understand for an explainer, what changed and why it matters for a pull request. A whole release ("2.0", "what's new") is not one thing: take its headline.
+- **The one thing to remember** after the film ends, in the viewer's words, not the brand slogan.
+- **One viewer doing one real task**, from the moment they need it to the result. That task is the spine, and one real piece of data (a query, a file, a prompt, a number) travels through it from the hook to the payoff. An explainer's spine is one concrete example worked through.
+- Keep facts (what it does, real numbers, real labels) apart from creative choices (angle, tone, look). Every claim on screen traces to the source: the site, the PR, the docs or the person's words. Use the person's own copy verbatim.
+- What the source does not say stays unsaid: never derive a claim it did not make ("40 min to 2 min" is not "20× faster"), mark an example number as illustrative, and show a screen you cannot get as a labelled placeholder, not a drawn one.
+
+## 2. Three storylines, then one
+
+Write three. They are three different films, not three titles on one film: each has its own **world** (where it happens and what it looks like), its own **device** (what the story is) and its own **form** (how the camera and the cuts carry it). Sketch five or more ideas first, a line each pairing a device with a form (tables below); drop those the subject cannot carry well, and of the rest keep the three that differ most. Make one of the three the bold one you would not have picked first. Each says:
+
+- its name, its device and form in a few words, and in two sentences what the viewer sees and feels;
+- the first two seconds, exactly;
+- its beats in one line (`hook → … → end card`);
+- its look in one line: ground, type, the one material or treatment, taken from the subject or the brand (`look.md`);
+- its sound in one line (`sound.md` §1).
+
+The storylines are words: build nothing for any of them before one is picked. Pick a storyline for its story: the one a stranger would follow and remember, with people or a situation they know, ahead of the most striking picture. Picking a storyline picks its look and its sound. Then write the picked one as `SPEC.md`.
+
+Put your recommendation first, with the reason in one clause, and save all three in the project as `STORYLINES.md` so a later turn can switch.
+
+- **The person is there to answer:** show the three and stop once until they pick. A mix ("A's opening with C's middle") is one storyline. Ask nothing else unless only they can answer it (real screens you cannot capture, narrated or music only). State everything else in one assumption line: the length as a range, the aspect, music or voice, and every paid item (a HeyGen voice, an avatar, catalog music) with the free option beside it.
+- **They asked for the file or for no stops:** take your recommendation, build it, and name the other two in one line each in your reply.
+- With a storyboard (`storyboard.md`), the picked storyline becomes the board's frames.
+
+| Device                        | What the viewer sees                                                                    |
+| ----------------------------- | --------------------------------------------------------------------------------------- |
+| A moment in someone's day     | a person, a time stamp, the message that creates the need ("launch is tomorrow")        |
+| A character does the work     | a mascot or a cursor carries, drags, draws and reacts; every cut has a cause            |
+| The feature as the hook       | the feature happening to a recognisable image in the first half second                  |
+| The result first              | the finished output plays, then the camera pulls back to show where it came from        |
+| One object across apps        | the thing being made travels from one app into the product, which keeps working on it   |
+| Life before and after         | the old way as a scene (one person drowning in tabs), then the new way                  |
+| Type carries the argument     | giant kinetic type, colour fields and grids that cut on the beat                        |
+| A number lands                | one real number earned by a scene, then made physical                                   |
+| A question with the input     | "What if you could make a video from your ⟨website⟩?", the blank filled by a real input |
+| The object is the explanation | a machine or model whose working is the idea; the camera tours through it               |
+
+| Form                       | What the viewer sees                                                                         |
+| -------------------------- | -------------------------------------------------------------------------------------------- |
+| One continuous take        | the camera never cuts; it pushes, pulls and travels from one world into the next             |
+| Object-to-object chain     | every shot ends on the thing that opens the next: a button becomes a card becomes a phone    |
+| An endless zoom            | the camera dives into a detail that turns out to be the next world, again and again          |
+| A flight through one world | a 3D set, a map or a desk the camera travels across; each idea is a stop on the route        |
+| Cut on the beat            | hard cuts on the music, type and colour fields changing every half beat                      |
+| Match cuts                 | one shape holds while everything around it changes: a circle becomes a lens, a wheel, a logo |
+| Split screen to one        | several panes play at once, then collapse into the one that matters                          |
+| One frame that rebuilds    | a single composition keeps rearranging itself and never leaves the frame                     |
+
+A pitch where all three are plain cuts between scenes has not tried the forms. Before and after: the new side moves calmly while the old side churns; never mock a named competitor. A recap asks one question first so each piece answers it.
+
+## 3. The hook
+
+The first two seconds are the densest of the film, and frame 0 is the thumbnail: never black, never a logo alone. Open on the feature working on something recognisable, a real moment that creates the need, a question with the input inside it, a sentence whose last word becomes the picture, or the bug itself. Then let the old way fail on screen (the wait, the wall of text, the wrong result) before the product brings relief; the proof is often the same shot improved in front of the viewer. Typing into a prompt box as the opener, with nothing else on screen, is the tell of a generated film; as a story step a few seconds in, it is fine.
+
+## 4. Beats
+
+A common shape for a launch of about 35 s; scale it, let the device bend it, and take another type's shape from its file in `types/`:
+
+| Beat     | Share | Job                                                                                       |
+| -------- | ----- | ----------------------------------------------------------------------------------------- |
+| Hook     | ~8%   | the world and the need, or the feature already working                                    |
+| Tension  | ~12%  | the old way failing on screen, or a gag                                                   |
+| Reveal   | ~8%   | the product or idea named as a title, about 20–30% in                                     |
+| Proof    | ~40%  | the real task in the real UI as 3–6 verbs (_paste, pick, watch it build, ship_), one each |
+| Payoff   | ~20%  | the output arrives, already moving: the biggest visual moment, once, 60–80% in            |
+| Claim    | ~8%   | the one thing, in one line                                                                |
+| End card | ~8%   | the mark carried in, the name and the call to action land and hold 2–3 s                  |
+
+In each verb beat keep only what the cursor touches and what proves the line; delete the rest of the screen. The process runs fast; the payoff plays at normal speed. Length follows the story (a feature launch is usually 20–45 s); a length in the request is a range, never padded.
+
+## 5. Worlds
+
+A film visits several worlds, each with its own background, light and scale (a desktop, the product on a brand gradient, a white void with a character, live action), never one dark canvas with small UI floating in it. Enter each world through an object already on screen: the thing clicked becomes the next shot. Keep one home stage to return to, one carrier the eye follows, and the palette and type constant across worlds.
+
+## 6. Copy and voice
+
+- Titles take at most 6 words a line, one line on screen at a time, no trailing periods; an explainer's lines may run to about 10. A line holds about 0.3 s a word plus 0.5 s, and the last line at least 2 s.
+- Show, don't list: no bullet slides or three-card rows. When similar things repeat, each gets its own idea and layout.
+- Real numbers only, from the source. The first line is never "Introducing", "Meet" or the logo; after the pain, "Introducing X" is fine. Never "unlock", "seamless", "supercharge", "game-changer", "revolutionize", "effortless", or "in seconds" unless measured.
+- Read the lines alone: a stranger gets the pitch. Watch the pictures alone: they tell the same story.
+- No voiceover unless the request or the source calls for one; then the screen never repeats the spoken sentence word for word. Without a voice, large titles and the product's own text carry the words, over music and effects (`sound.md`).
+
+## 7. The brand
+
+The mark lands once, with weight, usually on the end card; before it the brand shows only inside the product and the story, never docked small in a corner. The end card is built, not a still: the mark is carried in, typed or wiped in. The accent colour is rationed: one highlighted word, the payoff, the end card.
+
+## 8. Tells of a generated film
+
+The defaults a film falls into when nothing is decided are banned by name in `spec.md` ("BANNED by default"): a dark void with small things floating in it, glow and particles, the cream-paper-serif-mono-label look, everything fading and sliding up, three cards in a row, the docked logo. Beyond those, for a story:
+
+- every scene entering the same way, or the same move beat after beat;
+- side-by-side panels and floating cards standing in for a scene;
+- titles that keep sliding or shrinking after they land; breathing or floating loops standing in for motion on titles and UI (a character's idle breath is acting, `types/character.md`).
+
+When a first render shows any of them, name which, take the replacement from the subject, the brand or the medium, and add it to the BANNED line of `SPEC.md`.
diff --git a/.claude/skills/hyperframes/references/storyboard-format.md b/.claude/skills/hyperframes/references/storyboard-format.md
new file mode 100644
index 0000000..9653cd0
--- /dev/null
+++ b/.claude/skills/hyperframes/references/storyboard-format.md
@@ -0,0 +1,107 @@
+# Storyboard format — `STORYBOARD.md` + parsed manifest
+
+Defines the storyboard's **base data format** only: the `STORYBOARD.md` file shape and the `StoryboardManifest` it parses into. Planning the film itself is in [story.md](story.md); the optional narration/TTS file (`SCRIPT.md`) is a separate concern, not here.
+
+A storyboard is the **plan layer** for a video — an ordered set of **frames** (key moments) in one markdown file. Parser: `@hyperframes/core/storyboard` → `StoryboardManifest`.
+
+## Frontmatter (global direction)
+
+YAML block at the top. Unknown keys are kept under `globals.extra`.
+
+| Key        | Meaning                                                      | Example                                   |
+| ---------- | ------------------------------------------------------------ | ----------------------------------------- |
+| `format`   | Canvas size                                                  | `1920x1080`                               |
+| `duration` | The length the person asked for (advisory, not a hard limit) | `22s`                                     |
+| `message`  | One-line thesis                                              | `Ship a launch video in an afternoon`     |
+| `arc`      | Narrative arc                                                | `Hook → Problem → Solution → Proof → CTA` |
+| `audience` | Who it's for                                                 | `indie devs on X`                         |
+| `mode`     | Interaction mode (default collaborative)                     | `autonomous`                              |
+
+Set `duration` when the storyboard is first written. It is an expectation, not a gate: compare where the cut actually lands against it — judge whether the drift serves the piece, and update the value when the intended length genuinely changes.
+
+## Per-frame sections
+
+One `## Frame N — Title` heading per frame (`Frame` / `Beat` / `Scene` accepted at H2/H3). Metadata as `- key: value` bullets; everything below them until the next heading is the free-form **narrative**.
+
+| Key             | Meaning                                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `status`        | `outline` → `built` → `animated` (defaults `outline`)                                                               |
+| `src`           | project-relative path to the frame's HTML sub-composition (the tile poster renders from it)                         |
+| `duration`      | e.g. `4s`                                                                                                           |
+| `transition_in` | `crossfade` / `cut` / `wipe` … (alias `transition`); a note only, build it yourself (overlap clips for a crossfade) |
+| `scene`         | one-line contact-sheet caption (aliases `description` / `summary` / `caption`)                                      |
+| `voiceover`     | the frame's narration _guide_ (aliases `vo` / `voice_over` / `narration`)                                           |
+| `poster`        | seconds to seek for the tile poster (past the intro animation)                                                      |
+| _any other key_ | kept verbatim under the frame's `extra` — carry your own per-frame data (effects, assets, …) here                   |
+
+Two `extra` keys every film plan carries, so the build and the review check the same thing:
+
+| Key     | Meaning                                                                                                                                                                                                                          |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `reads` | what the viewer must understand in this frame, in order, each with its window: `the cursor finds the button (0.4-1.2s); "Export" lands (1.2-2.6s)`. Windows never overlap, and each is long enough for its words (`story.md` §6) |
+| `sound` | the bed, the effects on visible actions, or silence: `bed enters strong; click on Export; whoosh on the cut`                                                                                                                     |
+
+## Parsed manifest
+
+The parser is **lenient**: it never throws and records anything surprising as a `warning`.
+
+```
+StoryboardManifest {
+  globals: { format?, message?, arc?, audience?, extra: {…} }
+  frames: Array<{
+    index, number?, title?,
+    status,                       // "outline" | "built" | "animated"
+    src?, duration? / durationSeconds?, transitionIn?,
+    scene?, voiceover?, poster?,
+    narrative,                    // markdown below the metadata
+    extra: {…}                    // unknown keys, preserved
+  }>
+  warnings: Array<{ message, line?, frameIndex? }>
+}
+```
+
+## `SCRIPT.md` (out of scope here)
+
+Optional, free-form, **not parsed into the manifest** — the locked-narration file that drives TTS, absent for videos with no narration/TTS. The per-frame `voiceover` above is the storyboard's own narration guide.
+
+## Example
+
+```markdown
+---
+format: 1920x1080
+message: "Ship a launch video in an afternoon"
+arc: Hook → Problem → Solution → Proof → CTA
+audience: indie devs on X
+---
+
+## Frame 1 — Hook
+
+- scene: Big type punches in on the beat
+- duration: 3s
+- poster: 2s
+- transition_in: cut
+- status: animated
+- voiceover: "Ship a launch video in an afternoon."
+- reads: "Ship a launch video" lands (0.3-1.6s); "in an afternoon" (1.6-3.0s)
+- sound: bed enters on its strongest bar; impact on "afternoon"
+- src: compositions/frames/01-hook.html
+
+Open cold on the promise. This is the thesis — everything after pays it off.
+
+## Frame 2 — The problem
+
+- scene: A 20-minute timer spins on a stack of rejected takes
+- duration: 4s
+- transition_in: crossfade
+- status: built
+- voiceover: "The old way? Prompt, wait twenty minutes, get something that misses."
+- src: compositions/frames/02-problem.html
+
+The old way: prompt, wait, get something that misses. Establish the pain we remove.
+```
+
+## Notes
+
+- A frame with `status: outline` and no built `src` renders as an outline placeholder.
+- `built` is the middle rung: the frame's HTML exists and its **layout is confirmed** (a wireframe sketch or better) — motion not yet added. Nothing is drawn yet beyond the approved layout.
+- Multi-line `voiceover` values collapse to one line on save.
diff --git a/.claude/skills/hyperframes/references/storyboard.md b/.claude/skills/hyperframes/references/storyboard.md
new file mode 100644
index 0000000..6d35319
--- /dev/null
+++ b/.claude/skills/hyperframes/references/storyboard.md
@@ -0,0 +1,36 @@
+# Storyboard recipe — plan a video as stills the person approves
+
+Use it whenever a run makes or changes a storyboard: when the person asks for one, or when you want their go on the shots before animating. This file owns **how to make the board**; `storyboard-format.md` owns the `STORYBOARD.md` file the tools parse.
+
+A film's shots are planned in the SHOTS line of `SPEC.md` (`spec.md`); a storyboard turns those shots into stills when the person wants to approve them first, one frame per shot, carrying its `reads` and `sound` (`storyboard-format.md`).
+
+The person sees the plan as stills on the board, comments or draws on a frame, and says go. The board is `boards/storyboard.html`, and tools that show it find its frames by the classes in § 2; boxes marked any other way (`cell` boxes, `id="frame-NN"` markers) are not found.
+
+## 1. The run
+
+1. **Pose each shot** in the composition the project renders, the root `index.html`, at its key moment: real words, real fonts, real colors, the focal point big enough to read on a phone. A shot posed in its own file (`compositions/frames/NN-*.html`) shows only once it is mounted in `index.html` (`data-composition-src`) at its planned start; `snapshot` renders `index.html` and nothing else. Before the first pose, copy `index.html` to `boards/.film.html`: until the go, the preview plays that film, never the stills (step 4).
+2. **Snapshot every still in one run** with your host's snapshot tool when one is offered (each shot's seconds, out `boards/stills`); otherwise `npx hyperframes snapshot --at <every shot's seconds, in film order> --no-end --describe false -o boards/stills`. Each still is named `frame-NN-at-<seconds>s.png`, NN its place in the film. Every `snapshot` run clears its `-o` folder and numbers from `00`, so never snapshot a single moment into `boards/stills/` itself (step 5). Look at every still yourself; fix and snapshot again until each one holds.
+3. **Write `boards/storyboard.html`** (§ 2), styled as a finished board: Inter or the system sans-serif, a light page, each frame a rounded card with its still above its words, even gaps.
+4. **Put the film back.** Copy the posed `index.html` to `boards/.posed.html`, then `boards/.film.html` back over `index.html`. The board stays on its own page: held stills in the preview read as a slideshow.
+5. **Stop.** Hand the person the board and wait for their go. Notes on frames change only those frames. For each one: copy `boards/.posed.html` over `index.html`, re-pose it, snapshot just its moment into `boards/stills/redo/` (`--at <its seconds>`), move that one file over the frame's old still under the old name (its new time in the name if the time changed, and the page's `src` with it), then put the film back (step 4), rewrite the page and stop again. The other stills stay as approved.
+6. **Once they say go**, copy `boards/.posed.html` over `index.html` and animate from the approved stills.
+
+## 2. The page
+
+One `class="frame"` box per still, in film order, holding its image, a `class="title"` line "<two-digit number>: <name>" and a `class="time"` range in seconds. Optional: a `class="words"` line under it, and a `class="act"` heading before the first frame of each act.
+
+```html
+<section class="act">Act 1: The hook</section>
+<div class="frame">
+  <img src="stills/frame-00-at-1.5s.png" alt="" />
+  <div class="title">01: The hook</div>
+  <div class="time">0.0 to 3.0s</div>
+  <p class="words">The cursor drops the photo on the timeline; the title lands on the drop.</p>
+</div>
+```
+
+Stills are written next to the page (`boards/stills/`), so `src` is relative to `boards/` and names the file `snapshot` wrote for that shot. A still written after the page shows by itself; never reopen or rename the page for it.
+
+## 3. The plan beside it
+
+`STORYBOARD.md` at the project root (format: `storyboard-format.md`) names the same frames in the same order, and its words win over the page's: one heading per frame like `## Frame 1: The hook (0-3s)`, a `- act:` bullet for its act, and `- status: outline` until its still is posed.
diff --git a/.claude/skills/hyperframes/references/types/3d.md b/.claude/skills/hyperframes/references/types/3d.md
new file mode 100644
index 0000000..a0a2965
--- /dev/null
+++ b/.claude/skills/hyperframes/references/types/3d.md
@@ -0,0 +1,25 @@
+# 3D, simulations and generative pieces
+
+Use 3D when the film earns it: an object or a set as the payoff, a product, a simulation that explains. Loading Three.js, WebGPU, p5 or canvas and the seek protocol are in `../runtimes.md`.
+
+## Deterministic by construction
+
+- Draw every frame from timeline time in the `hf-seek` listener; frames render out of order.
+- Simulate once at load (physics, agents, particles) into arrays, then look up the state at `t`: `render(t)` stays a pure function. Heavy setup (meshes, shader compiles, the simulation) registers a `window.__hf.buildReady` promise.
+- Seed every random choice; a seeded hash of the index, never `Math.random()`.
+
+## Camera and story
+
+- One hero object beats a crowd. Fly through or into it rather than orbiting it: one dive is worth ten turns.
+- Cutaways, exploded views and chapters with one caption line each, plus labels with real numbers, turn a simulation into an explanation instead of eye candy.
+- Product UI is never tilted into 3D; only generated content tilts.
+
+## Light and materials
+
+- Light it with a warm key, a cool rim and a dark environment with two or three soft strips; turn the environment, not the object, so highlights sweep across it; a contact shadow under the object.
+- Bloom eats detail: keep it to the brightest points. Glossy metal under a low light gives white streaks: roughness about 0.45 or more, environment intensity about 0.5.
+- One NaN pixel turns a whole frame black through bloom: clamp values that can divide by zero.
+
+## Check it
+
+Snapshot the dive and the payoff (`../review.md`); a frame that takes too long to draw slows every render, so profile the heaviest moment once.
diff --git a/.claude/skills/hyperframes/references/types/character.md b/.claude/skills/hyperframes/references/types/character.md
new file mode 100644
index 0000000..d2aea1f
--- /dev/null
+++ b/.claude/skills/hyperframes/references/types/character.md
@@ -0,0 +1,20 @@
+# Characters, mascots and story shorts
+
+A character gives every transition a cause and gives the film its jokes: it carries the result into the player, rejects its own first try, reads the manual. After Effects characters come in through Lottie (`../runtimes.md`).
+
+## Acting
+
+- Mood changes go through a take: anticipation, a squash, the new face, a settle. A face never snaps from one state to the next.
+- Squash and stretch, anticipation, overshoot and follow-through belong to the character. Here an idle breath or blink is life, not a tell; the tells about breathing and bounce in `../motion.md` are about titles and UI.
+- Code moves every part at once, on one curve, by the same amount. Offset the parts (head leads, arms follow), vary the amounts, and never move both arms, both eyes or a crowd in unison.
+- Contact sells it: feet on the ground, props held by the hand, eyes on what they look at.
+
+## Reads
+
+Each action is one read. Lead the eye to where it will happen, play the action fast, and let its meaning land slowly: hold the reaction. A sign or caption that repeats what the action already shows is the classic failure.
+
+## Build
+
+- A rig is a set of parameters over time: position, squash, arm angles, an eye state and a mouth state per moment. Write mood changes as keyed states (`[[t0,"normal"],[t1,"scared"]]`) the rig eases between.
+- Hand-drawn life: redraw the outlines about 12 times a second with a jitter seeded by `Math.floor(t * 12)`, so the line boils while the character holds still, and every render matches.
+- A long piece is one chapter per sub-composition, all drawing from the same rig and helpers.
diff --git a/.claude/skills/hyperframes/references/types/data.md b/.claude/skills/hyperframes/references/types/data.md
new file mode 100644
index 0000000..3b6c6ed
--- /dev/null
+++ b/.claude/skills/hyperframes/references/types/data.md
@@ -0,0 +1,19 @@
+# Numbers, charts and data stories
+
+## One number at a time
+
+- A number is earned by the scene before it, then made physical: a count that becomes a skyline, a share that becomes a crowd.
+- The number is the biggest thing on screen. Tabular figures (`font-variant-numeric: tabular-nums`) so a count-up does not jitter; a count-up runs 1.2–1.6 s, then holds.
+- Real data only, from the source, rounded the same way everywhere, with a small source line on screen. One data module drives every figure in the film.
+
+## Charts as pictures
+
+- Build a chart in reading order: the frame and axis, a reference line, then the data drawing in, then one annotation on the point that matters. Annotate on the mark; no legends.
+- Highlight one series, grey the rest. A chart with one thing to say says it in its title.
+- The same object carries across beats: a bar becomes the ground of the next scene, a line becomes the road the camera follows.
+- The camera can dive into the one value that matters, then the rest falls away.
+- Registry charts first (`npx hyperframes catalog --query chart --json`); drive any chart library from a GSAP tween's `onUpdate`, never its own transitions (`../runtimes.md`).
+
+## Tells for this type
+
+A grid of KPI cards; a dashboard; a pie chart; every number counting up at once; numbers with no source.
diff --git a/.claude/skills/hyperframes/references/types/explainer.md b/.claude/skills/hyperframes/references/types/explainer.md
new file mode 100644
index 0000000..049e4f7
--- /dev/null
+++ b/.claude/skills/hyperframes/references/types/explainer.md
@@ -0,0 +1,34 @@
+# Explainers, tutorials and "how it works"
+
+One idea the viewer understands by the end (`../story.md` §1). The spine is one concrete example worked through, start to finish, not a tour of facts. Usually 30–90 s.
+
+## Ground it first
+
+Start where the viewer already is: a person, a place or a situation they know, and a question they would ask about it ("why does the astronaut come home younger than her twin?"). The abstract device (a light clock, a graph, a field) enters inside that situation, as the thing that answers the question, and the film returns to the person at the end with the answer. A film that opens on the device alone is a diagram, not an explainer.
+
+## Devices that explain
+
+- **The object is the explanation.** Build a thing whose working is the idea: a machine, a model, a map, a light clock, drawn so it reads as what it is (its material, its mount, where it sits in the scene). Every number on screen comes from it, and the camera tours through it: cutaways, an exploded view, a dive into the part that matters.
+- **One diagram that grows.** Start from the simplest true picture and add one part per beat, each appearing when it is named; never a finished diagram dropped on screen at once.
+- **Continuous transformation.** Each step morphs out of the last (a bar becomes an axis, a dot becomes a population), so the viewer never loses the thread to a cut.
+- **The worked example.** One real input (a sentence, a number, a photo) travels through every step to the answer.
+
+## Shapes of information
+
+Most explainable lines are one of a few shapes, and each has its own picture: a number that lands (`data.md`); a myth turned over (the wrong idea struck through, the right one printed over it); before and after; many things converging into a few groups; a network that densifies; one chosen out of many; steps in order; a real screenshot with the detail circled; a quote set as a poster; a chapter card. Pick the shape first, then the picture, so similar lines get different pictures and every line gets the one that shows it.
+
+## Words
+
+- Narrated: the voice is the clock (`../sound.md` §2). Reveal each part when the voice names it, across the back half of the scene; keep a scene to about 19 spoken words (`../film.md` "Script and pacing").
+- Not narrated: large lines carry it, up to about 10 words, each held 0.5 s + 0.3 s a word.
+- Labels sit on the part they name, with a leader line when needed, and appear with it. No legends, no bullet slides.
+
+## Getting it right
+
+- Every claim, value and step traces to the source; a number the source did not give is left out or marked illustrative. One data module drives every figure so the numbers agree with each other.
+- Check the science or the logic of each step before animating it; a beautiful wrong diagram is worse than none.
+- End on the one idea in one line. No brand end card unless asked.
+
+## Tells for this type
+
+A slide of bullets; icons in circles; three cards in a row; the whole diagram at once; a narrator repeating the text on screen word for word.
diff --git a/.claude/skills/hyperframes/references/types/launch.md b/.claude/skills/hyperframes/references/types/launch.md
new file mode 100644
index 0000000..10d5b4f
--- /dev/null
+++ b/.claude/skills/hyperframes/references/types/launch.md
@@ -0,0 +1,31 @@
+# Launch, promo and feature films
+
+The shape is `../story.md` §4 (hook → tension → reveal → proof → payoff → claim → end card), usually 20–45 s. What a viewer shares is real people and real output: in the official films, effects-heavy pieces drew about a tenth of the views of ones built on a real result.
+
+## Real UI, never a mockup
+
+Everything that claims to be the product is the product. One invented button loses everyone who uses it.
+
+1. Where it comes from, best first: the person's recording or screenshots (ask, naming the screen per beat, when the proof needs one you cannot capture); Figma frames, rebuilt as states of one app so the change between two frames is a real click (`/figma`); walking the flow yourself when no sign-in is needed; `npx hyperframes capture` of the feature's own page; the product's code, PR or docs to confirm today's labels.
+2. Missing a screen: a clearly labelled placeholder ("Screenshot: Settings → Motion"), said in the reply. A feature with nothing visible (speed, an API): the real UI that exposes it, a real analogue the viewer knows, real terminal output, or a checklist of real facts. Never a made-up dashboard.
+3. Logo, icons and fonts are the brand's own files (`/media-use` for logos); never redrawn from memory, never a coloured square for an app icon.
+
+## The product on screen
+
+- Rebuild only the piece the beat uses (the panel, the prompt box, the row that changes) and show it at 1.6–2× its real size; text stays at least 26 px at 1080p after any push. Never a small window in the middle of an empty canvas, never product UI tilted in 3D.
+- The camera cycles between the window on its ground, one pane, and a punch-in on one control. Moves take 0.4–0.6 s with motion blur, arrive at the control the cursor needs, then hold while the UI acts.
+- Containers morph instead of cutting: the button becomes the menu, the message becomes the bubble.
+- Pull back to reveal that the result was playing inside the product, or zoom through the player until the result fills the frame.
+- The cursor is big (4–7% of the frame), enters from off-screen, and its click causes the next thing on the same frame.
+
+## Worlds and transitions
+
+Visit several worlds (`../story.md` §5) and enter each through an object on screen, with 3–5 kinds of transition in a film (`../motion.md` "Transitions with a cause").
+
+## The end card
+
+The mark lands in the last 5–10% of the film, centred, the lockup 15–30% of the frame width, performed rather than faded in: the cursor clicks the mark and a fill rises through it, or a character carries it in, then the wordmark wipes in beside it. Then the call to action (a real button, the command to type), held 1.5–3 s.
+
+## Tells for this type
+
+Typing into a prompt box as the opener; a feature list as three cards; a title over a dimmed screenshot; an invented dashboard; the logo docked in a corner.
diff --git a/.claude/skills/hyperframes/references/types/music.md b/.claude/skills/hyperframes/references/types/music.md
new file mode 100644
index 0000000..c602f0c
--- /dev/null
+++ b/.claude/skills/hyperframes/references/types/music.md
@@ -0,0 +1,24 @@
+# Music videos and films cut to a track
+
+The song is the structure. Timing facts (hits, beat trust, loops) are in `../film.md` "On music"; this file is the shape.
+
+## Song structure becomes edit structure
+
+- Find the sections first: `npx hyperframes audio <track> --only sections,onsets,moments --json`. Each section is a chapter: intro, verse, chorus, bridge, outro.
+- Cut density follows energy: slower shots in verses, one picture per strong beat in the chorus, a held image on a breakdown.
+- The chorus returns to one home stage and escalates each time it comes back; the ending rhymes with the opening.
+- Chapter breaks land on section boundaries, with a transition that belongs to the film's medium (a brush wipe, a paper tear, a match cut).
+
+## Pictures for the words
+
+- Each lyric line or phrase gets its own picture (shots of about 1.4–4 s): show what the line means, not the line itself. Lyrics on screen only when asked; then each line holds at least a beat and is set as type, not subtitles.
+- Something happens in every shot, and every cut has a cause on screen.
+- A song about something real gets real material (footage, photos, places); an abstract track gets one world with a strong medium.
+
+## The look
+
+A physical medium carries a music film further than effects: watercolour with ink outlines, cut paper, risograph print, film grain on footage. Characters, if any, act (`character.md`).
+
+## Tells for this type
+
+The same treatment for more than about 6 s; a spectrum bar or waveform as the main picture; every cut on every beat; words about the music rather than the song's own world.
diff --git a/.claude/skills/hyperframes/references/types/vertical.md b/.claude/skills/hyperframes/references/types/vertical.md
new file mode 100644
index 0000000..e482c2c
--- /dev/null
+++ b/.claude/skills/hyperframes/references/types/vertical.md
@@ -0,0 +1,23 @@
+# Vertical and social clips (9:16)
+
+Made at 1080×1920 when the request or the platform says vertical; a landscape film is not squeezed into it but recomposed.
+
+## The platform's own UI
+
+The app draws over the frame. On 1080×1920: nothing in the top 168 px (status and search bar); every word and the product inside the band from 168 to 1330 px; below 1330 px (caption, handle, buttons) only texture or decoration; no text under the right-hand action rail. Ads and some apps reserve more at the bottom; check the platform the clip is for. Burned-in captions sit at the bottom of the band (`../captions.md`).
+
+## The first second
+
+- Frame 0 is the thumbnail and the hook: a face, the result, or one bold line already on screen. Never black, never a logo.
+- The viewer decides in about a second whether to stay: the change or the question arrives in the first beat.
+- Many viewers watch muted: speech is captioned, and the picture carries the hook without sound.
+
+## Layout
+
+- One subject, centred, stacked vertically; landscape layouts (side-by-side panels, wide charts) are rebuilt as a vertical sequence.
+- Type is larger than in landscape (titles about ×1.35, `../overlays.md`); nothing meant to be read under 28 px, and a fixed word limit per line (about 8 Chinese characters or 5 English words for a claim): cut words, never shrink.
+- Talking heads: punch-ins on emphasis, B-roll cut on the sentence, the face never under a card (`../overlays.md`).
+
+## Pacing
+
+Faster than landscape: shots of 1–2 s, a new beat every 2–4 s, the payoff before the swipe. A loop that cuts from the last frame back to the first is a choice, not a default.
diff --git a/.claude/skills/hyperframes/scripts/bake-basemap.mjs b/.claude/skills/hyperframes/scripts/bake-basemap.mjs
new file mode 100644
index 0000000..55b14bb
--- /dev/null
+++ b/.claude/skills/hyperframes/scripts/bake-basemap.mjs
@@ -0,0 +1,324 @@
+// bake-basemap.mjs — bake a real-imagery map camera move for a composition (references/film.md, "Maps").
+//
+// WHAT IT DOES (and why baking at all): drives MapLibre in headless Chrome to record ONLY the
+// real-imagery basemap as an MP4 (camera zoom→hold), and projects each requested country's border
+// to SCREEN coordinates at the held view. The HF composition then plays the MP4 on track 0 and
+// animates a *live* SVG overlay (border draw-on, colour-block / flag fills, labels, pins) from the
+// exported `<NAME>-coords.json`. Borders/fills are NOT baked into the video — they stay editable in HF.
+//
+// Why bake the imagery at all (this is the real reason, not "smoothness"): HF forbids render-time
+// network and requires deterministic output. Live raster tiles re-fetch every render and can change
+// → non-deterministic. Baking FREEZES the imagery into pixels = deterministic + offline-reproducible.
+// (Exposing the engine's per-frame `onBeforeCapture` hook would let MapLibre run live and smooth, but
+// it would NOT remove the need to freeze tiles for determinism — so this bake step stays relevant.)
+//
+// PARAMETRIC — drive everything by env. Example (Brazil + Argentina on satellite):
+//   NAME=br-ar STYLE=satellite COUNTRIES="Brazil:#22d3ee,Argentina:#f59e0b" \
+//   CENTER="-60,-25" ZSTART=2.4 ZEND=3.4 FPS=30 DUR=5 node bake-basemap.mjs
+// From space down to a street (globe, starfield, a turn from FROM to CENTER, then the dive):
+//   NAME=mbs PROJECTION=globe FROM="18,16" CENTER="103.8607,1.2834" ZSTART=1.85 ZEND=16.2 \
+//   PITCH=40 DUR=10 HOLD=0.8 node bake-basemap.mjs
+// It encodes frames-<NAME>/f%04d.png → <NAME>.mp4 (all-intra: -g 1) and writes <NAME>-coords.json
+// for the HF composition. One bake at a time: several headless Chromes on a small machine stall.
+import { join } from "node:path";
+import { mkdirSync, writeFileSync, readdirSync, existsSync } from "node:fs";
+import { homedir } from "node:os";
+import { spawnSync } from "node:child_process";
+
+if (process.argv.includes("--help") || process.argv.includes("-h")) {
+  console.log(`usage: [NAME=..] [STYLE=satellite|dark|light|<{z}/{x}/{y} url>] [CENTER="lng,lat"]
+       [PROJECTION=mercator|globe] [FROM="lng,lat"] [PAN=0.35] [ZSTART=..] [ZEND=..] [PITCH=..]
+       [BEARING=..] [FPS=30] [DUR=5] [HOLD=0.5] [COUNTRIES="Name:#hex,Name:#hex"] [OUT=dir]
+       [CHROME=path] node bake-basemap.mjs
+PROJECTION=globe starts from Earth in space (starfield, atmosphere) and flattens as it zooms in.
+FROM pans the camera from that point to CENTER over the first PAN of the move, while the zoom
+runs from PAN/2 to HOLD; ZSTART about 1.8 frames the whole globe, ZEND 16 is a building.
+Writes <OUT>/<NAME>.mp4 (all-intra basemap) and <OUT>/<NAME>-coords.json (projected borders).
+Needs puppeteer-core, ffmpeg, a Chrome or chrome-headless-shell, and network for the tiles.
+Run one bake at a time; it prints its pace and an estimate as it goes.`);
+  process.exit(0);
+}
+
+// Loaded after the --help check so usage prints without puppeteer-core installed.
+const { default: puppeteer } = await import("puppeteer-core");
+
+// --- resolve Chrome dynamically (no hardcoded machine path) ---
+function resolveChrome() {
+  if (process.env.CHROME && existsSync(process.env.CHROME)) return process.env.CHROME;
+  const exe = process.platform === "win32" ? "chrome-headless-shell.exe" : "chrome-headless-shell";
+  const base = join(homedir(), ".cache", "puppeteer", "chrome-headless-shell");
+  if (existsSync(base)) {
+    for (const v of readdirSync(base).sort().reverse()) {
+      // lexical sort; any working binary is fine
+      try {
+        for (const inner of readdirSync(join(base, v))) {
+          const bin = join(base, v, inner, exe);
+          if (existsSync(bin)) return bin;
+        }
+      } catch {
+        /* skip */
+      }
+    }
+  }
+  for (const c of [
+    "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
+    "/usr/bin/google-chrome",
+    "/usr/bin/chromium",
+    "/usr/bin/chromium-browser",
+  ])
+    if (existsSync(c)) return c;
+  throw new Error(
+    "Chrome not found. Set CHROME=/path/to/chrome-headless-shell, or install one:\n" +
+      "  npx puppeteer browsers install chrome-headless-shell",
+  );
+}
+
+// --- params (all overridable by env) ---
+const NAME = process.env.NAME || "basemap";
+const STYLE = process.env.STYLE || "satellite"; // satellite | dark | light | raw {z}/{x}/{y} template
+const CENTER = (process.env.CENTER || "2.6,46.6").split(",").map(Number);
+const ZSTART = +(process.env.ZSTART || 4.2);
+const ZEND = +(process.env.ZEND || 5.4);
+const PITCH = +(process.env.PITCH || 0);
+const BEARING = +(process.env.BEARING || 0);
+const FPS = +(process.env.FPS || 30),
+  DUR = +(process.env.DUR || 5),
+  N = Math.max(1, Math.round(FPS * DUR));
+const HOLD = +(process.env.HOLD || 0.5); // p∈[0,1] at which the zoom finishes; camera holds after
+const PROJECTION = process.env.PROJECTION === "globe" ? "globe" : "mercator";
+const FROM = process.env.FROM ? process.env.FROM.split(",").map(Number) : null; // pan start; null = no pan
+const PAN = +(process.env.PAN || 0.35); // p at which the pan from FROM reaches CENTER
+const MARGIN = (process.env.KEEPMARGIN || "16,13").split(",").map(Number); // [lon°,lat°] keep-box around each country's mainland
+// COUNTRIES="Name:#hex,Name:#hex" — borders to project (optional; omit for a pure zoom-to / pin shot)
+const COUNTRIES = (process.env.COUNTRIES || "")
+  .split(",")
+  .map((s) => s.trim())
+  .filter(Boolean)
+  .map((s) => {
+    const [name, color] = s.split(":");
+    return { name, color: color || "#38bdf8" };
+  });
+
+// fail fast on bad numeric env — otherwise NaN silently bakes zero/garbage frames and still prints "done"
+for (const [k, v] of Object.entries({
+  "CENTER.lng": CENTER[0],
+  "CENTER.lat": CENTER[1],
+  ZSTART,
+  ZEND,
+  PITCH,
+  BEARING,
+  FPS,
+  DUR,
+  HOLD,
+  PAN,
+  ...(FROM ? { "FROM.lng": FROM[0], "FROM.lat": FROM[1] } : {}),
+}))
+  if (!Number.isFinite(v))
+    throw new Error(
+      `bad numeric env: ${k}=${v} — check CENTER="lng,lat" / ZSTART / ZEND / FPS / DUR`,
+    );
+
+// IMPORTANT: tileSize:256 matches Esri/CARTO raster endpoints. MapLibre's INTERNAL world width is
+// 512·2^zoom regardless — a 512px (@2x/retina/vector) tile source needs tileSize:512 or every zoom
+// level is off by one. Keep 256 for these raster sources.
+const TILES =
+  {
+    satellite:
+      "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+    dark: "https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
+    light: "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+  }[STYLE] || STYLE; // STYLE may also be a raw {z}/{x}/{y} template
+
+const OUT = process.env.OUT || process.cwd(); // artifacts → workspace (cwd), NOT the installed skill dir
+const framesDir = join(OUT, "frames-" + NAME);
+mkdirSync(framesDir, { recursive: true });
+
+// A seeded star field behind the globe, so every bake of the same move is identical.
+let seed = 7;
+const rnd = () => (seed = (seed * 16807) % 2147483647) / 2147483647;
+const STARS = `<svg id="stars" width="1920" height="1080">${Array.from({ length: 260 }, () => {
+  const x = (rnd() * 1920).toFixed(0),
+    y = (rnd() * 1080).toFixed(0);
+  const r = (rnd() * 1.3 + 0.3).toFixed(2),
+    a = (rnd() * 0.6 + 0.2).toFixed(2);
+  return `<circle cx="${x}" cy="${y}" r="${r}" fill="#fff" opacity="${a}"/>`;
+}).join("")}</svg>`;
+
+// Deps PINNED exact (mutable @5/@2 majors would drift the bake over time).
+const PAGE = `<!doctype html><html><head>
+<link href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js"></script>
+<style>*{margin:0}html,body{width:1920px;height:1080px;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#0b1630 0%,#050812 55%,#020308 100%)}#stars{position:absolute;inset:0}#map{position:absolute;inset:0;width:1920px;height:1080px}.maplibregl-control-container{display:none!important}</style>
+</head><body>${PROJECTION === "globe" ? STARS : ""}<div id="map"></div><script>
+var CENTER=${JSON.stringify(CENTER)}, ZSTART=${ZSTART}, ZEND=${ZEND}, PITCH=${PITCH}, BEARING=${BEARING}, HOLD=${HOLD};
+var FROM=${JSON.stringify(FROM)}, PAN=${PAN};
+var MARGIN=${JSON.stringify(MARGIN)}, WANT=${JSON.stringify(COUNTRIES)};
+var GLOBE=${PROJECTION === "globe"};
+// On the globe the page behind the map shows through (stars), and the atmosphere fades out as the camera nears the ground.
+var map=new maplibregl.Map({container:"map",style:{version:8,projection:{type:GLOBE?"globe":"mercator"},
+  sky:GLOBE?{"atmosphere-blend":["interpolate",["linear"],["zoom"],0,1,5,1,7,0]}:undefined,
+  sources:{s:{type:"raster",tiles:[${JSON.stringify(TILES)}],tileSize:256,maxzoom:19}},
+  layers:(GLOBE?[]:[{id:"bg",type:"background",paint:{"background-color":"#05070d"}}]).concat([{id:"s",type:"raster",source:"s"}])},
+  center:FROM||CENTER,zoom:ZSTART,pitch:0,bearing:0,interactive:false,attributionControl:false,fadeDuration:0,preserveDrawingBuffer:true,maxTileCacheSize:6000,
+  canvasContextAttributes:{alpha:GLOBE,preserveDrawingBuffer:true}});
+function ease(x){return x<0.5?4*x*x*x:1-Math.pow(-2*x+2,3)/2;} // easeInOutCubic (= Remotion interpolate+Easing)
+function sine(x){return -(Math.cos(Math.PI*x)-1)/2;}
+function seg(p,a,b){return b<=a?1:Math.min(1,Math.max(0,(p-a)/(b-a)));}
+// With FROM, the camera turns to CENTER over [0,PAN] while the zoom runs over [PAN/2,HOLD]; without it, the zoom runs over [0,HOLD].
+function camAt(p){
+  var s=FROM?sine(seg(p,0,PAN)):1, t=ease(seg(p,FROM?PAN/2:0,HOLD));
+  var c=FROM?[FROM[0]+(CENTER[0]-FROM[0])*s, FROM[1]+(CENTER[1]-FROM[1])*s]:CENTER;
+  return {center:c, zoom:ZSTART+(ZEND-ZSTART)*t, pitch:PITCH*t, bearing:BEARING*t}; }
+function ringCentroid(r){ var sx=0,sy=0; for(var k=0;k<r.length;k++){sx+=r[k][0];sy+=r[k][1];} return [sx/r.length, sy/r.length]; }
+// Keep the polygons in a lon/lat box around the country's MAINLAND (the vertex-richest polygon),
+// dropping far-flung overseas territories that would blow up the bbox. Generalizes per subject —
+// no continent-specific constant. Keeps near islands (Corsica, Sicily); drops Guiana, Alaska, Hawaii.
+function mainland(f){
+  if(!f) return f;
+  if(f.geometry.type!=="MultiPolygon"){ f.__anchorRing=f.geometry.coordinates[0]; return f; } // Polygon: outer ring
+  var polys=f.geometry.coordinates, anchor=polys[0], amax=-1;
+  polys.forEach(function(poly){ if(poly[0].length>amax){amax=poly[0].length;anchor=poly;} });
+  var ac=ringCentroid(anchor[0]);
+  var kept=polys.filter(function(poly){ var c=ringCentroid(poly[0]); return Math.abs(c[0]-ac[0])<=MARGIN[0] && Math.abs(c[1]-ac[1])<=MARGIN[1]; });
+  var nf={type:"Feature",properties:f.properties,geometry:{type:"MultiPolygon",coordinates:kept}}; nf.__anchorRing=anchor[0]; return nf;
+}
+function lonSpan(f){ var mn=1e9,mx=-1e9; (f.geometry.type==="Polygon"?[f.geometry.coordinates]:f.geometry.coordinates).forEach(function(poly){poly[0].forEach(function(c){if(c[0]<mn)mn=c[0];if(c[0]>mx)mx=c[0];});}); return mx-mn; }
+// ANTIMERIDIAN unwrap (Russia/Fiji/NZ): make all lon contiguous around the camera-center ref so a
+// feature touching ±180° doesn't smear when map.project() runs per-vertex (mercatorX is linear and
+// accepts out-of-range lon, so 181 sits just east of center, not far-west at -179). Mutates in place;
+// __anchorRing shares the same arrays so it's covered.
+function unwrapLon(f, ref){ if(!f) return; function fix(r){ for(var i=0;i<r.length;i++){ var lon=r[i][0]; while(lon-ref>180)lon-=360; while(lon-ref<-180)lon+=360; r[i][0]=lon; } }
+  var g=f.geometry; if(g.type==="Polygon") g.coordinates.forEach(fix); else g.coordinates.forEach(function(poly){ poly.forEach(fix); }); }
+var FEATS=[]; window.__warn=[];
+window.__ready=new Promise(function(res){ map.on("load", function(){
+  if(!WANT.length){ res(); return; }
+  fetch("https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json").then(function(r){return r.json();}).then(function(w){
+    var fc=topojson.feature(w,w.objects.countries);
+    WANT.forEach(function(want){
+      var f=fc.features.filter(function(x){return x.properties.name===want.name;})[0];
+      if(!f){ window.__warn.push("country not found in world-atlas: "+want.name); return; }
+      f=mainland(f);
+      unwrapLon(f, CENTER[0]); // antimeridian: unwrap lons around the camera ref (CENTER must be near the subject) before projecting
+      if(lonSpan(f)>180) window.__warn.push(want.name+" spans >180° lon even after unwrap — projection may still smear.");
+      FEATS.push({name:want.name, color:want.color, f:f});
+    });
+    res();
+  });
+});});
+window.__setCam=function(p){ map.jumpTo(camAt(p)); };
+// Resolves false once every tile for this camera is loaded and painted, true if ms passed first.
+// Polls rather than waiting for "idle": that event can fire before a listener is attached, which
+// left every cached frame sitting out the whole timeout.
+window.__waitIdle=function(ms){ return new Promise(function(res){ var t0=performance.now();
+  (function poll(){ if(map.loaded()&&map.areTilesLoaded()){ map.triggerRepaint(); requestAnimationFrame(function(){requestAnimationFrame(function(){res(false);});}); return; }
+    if(performance.now()-t0>(ms||9000)){ res(!map.areTilesLoaded()); return; } setTimeout(poll,40); })(); }); };
+function featurePath(f){ function ring(r){ return r.map(function(c,i){ var p=map.project(c); return (i?"L":"M")+p.x.toFixed(1)+" "+p.y.toFixed(1); }).join(" ")+"Z"; }
+  var g=f.geometry,d=""; if(g.type==="Polygon") g.coordinates.forEach(function(r){d+=ring(r);}); else g.coordinates.forEach(function(poly){poly.forEach(function(r){d+=ring(r);});}); return d; }
+function bboxOf(f){ var mnx=1e9,mny=1e9,mxx=-1e9,mxy=-1e9;
+  function eat(r){ r.forEach(function(c){ var p=map.project(c); if(p.x<mnx)mnx=p.x; if(p.y<mny)mny=p.y; if(p.x>mxx)mxx=p.x; if(p.y>mxy)mxy=p.y; }); }
+  var g=f.geometry; if(g.type==="Polygon")g.coordinates.forEach(eat); else g.coordinates.forEach(function(poly){poly.forEach(eat);});
+  return {x:+mnx.toFixed(1),y:+mny.toFixed(1),w:+(mxx-mnx).toFixed(1),h:+(mxy-mny).toFixed(1)}; }
+window.__project=function(){ return {
+  view:{center:CENTER, zoom:ZEND, pitch:PITCH, bearing:BEARING},
+  countries: FEATS.map(function(e){ var lc=ringCentroid(e.f.__anchorRing); var lp=map.project(lc);
+    return { name:e.name, color:e.color, d:featurePath(e.f), bbox:bboxOf(e.f), label:{x:+lp.x.toFixed(1),y:+lp.y.toFixed(1)} }; }),
+}; };
+</script></body></html>`;
+
+// --no-sandbox is intentional: trusted Source-time bake, headless, often root/CI; deps are version-pinned above.
+const browser = await puppeteer.launch({
+  executablePath: resolveChrome(),
+  headless: true,
+  args: [
+    "--no-sandbox",
+    "--hide-scrollbars",
+    "--use-gl=angle",
+    "--use-angle=swiftshader",
+    "--enable-unsafe-swiftshader",
+    "--enable-webgl",
+    "--window-size=1920,1080",
+  ],
+});
+try {
+  const page = await browser.newPage();
+  await page.setViewport({ width: 1920, height: 1080, deviceScaleFactor: 1 });
+  await page.setContent(PAGE, { waitUntil: "load" });
+  await page.evaluate(() => window.__ready);
+  for (const w of await page.evaluate(() => window.__warn)) console.warn(`[${NAME}] WARN: ${w}`);
+  console.log(
+    `[${NAME}] ready (${STYLE}, ${PROJECTION}); baking ${N} frames, zoom ${ZSTART}→${ZEND} hold@p=${HOLD}, ${COUNTRIES.length} border(s)`,
+  );
+  const t0 = Date.now();
+  let coords = null;
+  const timeouts = [];
+  for (let i = 0; i < N; i++) {
+    const p = N === 1 ? 1 : i / (N - 1);
+    await page.evaluate((pp) => window.__setCam(pp), p);
+    const timedOut = await page.evaluate((ms) => window.__waitIdle(ms), 9000);
+    if (timedOut) {
+      timeouts.push(i);
+      console.warn(`[${NAME}] idle TIMEOUT at frame ${i} — tiles may be incomplete`);
+    }
+    await page.screenshot({
+      path: join(framesDir, `f${String(i).padStart(4, "0")}.png`),
+      clip: { x: 0, y: 0, width: 1920, height: 1080 },
+      optimizeForSpeed: true,
+    });
+    if (p >= HOLD && !coords && COUNTRIES.length)
+      coords = await page.evaluate(() => window.__project()); // capture at first hold frame
+    if (i % 20 === 0 || i === N - 1) {
+      const per = (Date.now() - t0) / 1000 / (i + 1);
+      console.log(
+        `  [${NAME}] ${i + 1}/${N} · ${per.toFixed(2)} s/frame · about ${Math.ceil((per * (N - i - 1)) / 60)} min left`,
+      );
+    }
+  }
+  // encode frames → all-intra MP4 (every frame seekable for HF); fall back to printing the command if ffmpeg is absent
+  const mp4 = join(OUT, NAME + ".mp4"),
+    pat = join(framesDir, "f%04d.png");
+  const ff = spawnSync(
+    "ffmpeg",
+    [
+      "-y",
+      "-framerate",
+      String(FPS),
+      "-i",
+      pat,
+      "-c:v",
+      "libx264",
+      "-pix_fmt",
+      "yuv420p",
+      "-g",
+      "1",
+      "-crf",
+      "16",
+      "-movflags",
+      "+faststart",
+      mp4,
+    ],
+    { stdio: "ignore" },
+  );
+  if (ff.status === 0) console.log(`[${NAME}] encoded → ${mp4}`);
+  else
+    console.warn(
+      `[${NAME}] ffmpeg unavailable (status ${ff.status}) — encode manually:\n  ffmpeg -y -framerate ${FPS} -i ${pat} -c:v libx264 -pix_fmt yuv420p -g 1 -crf 16 -movflags +faststart ${mp4}`,
+    );
+  if (coords) {
+    writeFileSync(join(OUT, NAME + "-coords.json"), JSON.stringify(coords));
+    console.log(
+      `[${NAME}] coords written: ${coords.countries.map((c) => c.name + "(" + c.d.length + "ch)").join(", ")}`,
+    );
+  }
+  if (timeouts.length) {
+    // FAIL LOUD: the asset exists but is suspect — don't let a half-loaded bake pass silently
+    console.error(
+      `[${NAME}] ${timeouts.length}/${N} frame(s) hit the idle timeout (frames ${timeouts.slice(0, 8).join(",")}${timeouts.length > 8 ? "…" : ""}). The basemap MP4 may have INCOMPLETE tiles. Re-run with a slower zoom / larger timeout / check the tile server.`,
+    );
+    process.exitCode = 1;
+  } else {
+    console.log(`[${NAME}] done — all ${N} frames reached map idle (complete tiles).`);
+  }
+} finally {
+  await browser.close();
+}
diff --git a/.claude/skills/hyperframes/scripts/lib/main-module.mjs b/.claude/skills/hyperframes/scripts/lib/main-module.mjs
new file mode 100644
index 0000000..5fd2fa9
--- /dev/null
+++ b/.claude/skills/hyperframes/scripts/lib/main-module.mjs
@@ -0,0 +1,13 @@
+import { realpathSync } from "node:fs";
+import { pathToFileURL } from "node:url";
+
+// Node resolves symlinks in the main module's import.meta.url but argv[1] keeps the invoked
+// spelling (a symlinked skills dir, or /tmp vs /private/tmp on macOS), so compare real paths.
+export function isMainModule(importMetaUrl) {
+  if (!process.argv[1]) return false;
+  try {
+    return pathToFileURL(realpathSync(process.argv[1])).href === importMetaUrl;
+  } catch {
+    return false;
+  }
+}
diff --git a/.claude/skills/hyperframes/scripts/lib/main-module.test.mjs b/.claude/skills/hyperframes/scripts/lib/main-module.test.mjs
new file mode 100644
index 0000000..680701d
--- /dev/null
+++ b/.claude/skills/hyperframes/scripts/lib/main-module.test.mjs
@@ -0,0 +1,46 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mkdtempSync, readFileSync, readdirSync, rmSync, symlinkSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { dirname, join, relative, resolve } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+
+const SKILLS = resolve(dirname(fileURLToPath(import.meta.url)), "../../..");
+const CLI_MEDIA_USE = resolve(SKILLS, "../packages/cli/src/media-use");
+
+// Agents install skills by symlinking the skills dir, so each script must still run its CLI.
+test("skill CLIs run when invoked through a symlinked skills dir", () => {
+  const dir = mkdtempSync(join(tmpdir(), "skills-link-"));
+  try {
+    symlinkSync(SKILLS, join(dir, "skills"), "dir");
+    for (const script of ["media-use/audio/scripts/heygen-voice.mjs"]) {
+      const run = spawnSync(process.execPath, [join(dir, "skills", script), "not-a-command"], {
+        encoding: "utf8",
+      });
+      assert.notEqual(run.status, 0, `${script} exited ${run.status} without running its CLI`);
+      assert.match(run.stderr, /usage/, script);
+    }
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+function skillScripts(dir) {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return entry.name === "node_modules" ? [] : skillScripts(path);
+    return /\.(mjs|js)$/.test(entry.name) && !/\.test\.mjs$/.test(entry.name) ? [path] : [];
+  });
+}
+
+test("skill scripts detect their CLI entry through lib/main-module.mjs only", () => {
+  const handRolled = [...skillScripts(SKILLS), ...skillScripts(CLI_MEDIA_USE)].filter(
+    (path) =>
+      !path.endsWith("main-module.mjs") && readFileSync(path, "utf8").includes("process.argv[1]"),
+  );
+  assert.deepEqual(
+    handRolled.map((path) => relative(SKILLS, path)),
+    [],
+  );
+});
diff --git a/.claude/skills/hyperframes/scripts/locate.mjs b/.claude/skills/hyperframes/scripts/locate.mjs
new file mode 100644
index 0000000..173f011
--- /dev/null
+++ b/.claude/skills/hyperframes/scripts/locate.mjs
@@ -0,0 +1,228 @@
+#!/usr/bin/env node
+/* locate.mjs — find "X" in an image WITHOUT any detector API or key.
+ *
+ * You (the author model) are weak at regressing pixel coordinates but strong at
+ * "which numbered strip is the target in?" — so localization = RSVP grid-index
+ * (ACL 2025 long.715): pick strips on a numbered grid, reconstruct the box
+ * geometrically. Zero npm deps — node + ffmpeg (both already required by
+ * hyperframes). Accuracy notes: references/film.md.
+ *
+ * THE LOOP (you read images between steps):
+ *   1) node locate.mjs overlay <img> --out DIR
+ *        → DIR/gv.png (vertical strips 1..9) + DIR/gh.png (horizontal 1..9).
+ *        READ both, pick the strip numbers the target spans.
+ *   2) node locate.mjs region <img> --vids 4,5 --hids 6,7 --out DIR
+ *        → prints coarse region + writes DIR/gc.png (region cropped+upscaled,
+ *        finer 6×6 grid). READ it, pick the finer strips.
+ *   3) node locate.mjs final <img> --region x0,y0,x1,y1 --vids 3,4 --hids 3,4
+ *        → {box, center} normalized to the FULL image.
+ *   4) node locate.mjs mark <img> --box x0,y0,x1,y1 --out DIR/check.png
+ *        → VERIFY: read check.png — is the red box on the target? If off,
+ *        redo step 2/3 with corrected strips. Never skip this.
+ */
+import { execFileSync } from "node:child_process";
+import { existsSync, mkdirSync, copyFileSync } from "node:fs";
+
+const N1 = 9,
+  PAD1 = 0.4; // stage 1: strips per axis, padding in STRIP units
+const N2 = 6,
+  PAD2 = 0.25; // stage 2 (crop)
+const GREEN = "0x3CDC5A",
+  BLUE = "0x3C82FF",
+  RED = "0xFF3232";
+
+const ff = (args) =>
+  execFileSync("ffmpeg", ["-v", "error", "-y", ...args], {
+    stdio: ["ignore", "ignore", "inherit"],
+  });
+function probe(img) {
+  const out = execFileSync("ffprobe", [
+    "-v",
+    "error",
+    "-select_streams",
+    "v:0",
+    "-show_entries",
+    "stream=width,height",
+    "-of",
+    "csv=p=0",
+    "--",
+    img,
+  ])
+    .toString()
+    .trim();
+  const [w, h] = out.split(",").map(Number);
+  return { w, h };
+}
+function font() {
+  const dst = "/tmp/locate-font.ttf";
+  if (!existsSync(dst)) {
+    for (const c of [
+      "/System/Library/Fonts/Supplemental/Arial Bold.ttf",
+      "/System/Library/Fonts/Supplemental/Arial.ttf",
+      "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",
+    ]) {
+      if (existsSync(c)) {
+        copyFileSync(c, dst);
+        break;
+      }
+    }
+  }
+  return dst;
+}
+function gridFilters(w, h, n, axis, fz) {
+  const F = font(),
+    fs = [];
+  if (axis === "v" || axis === "both") {
+    for (let i = 1; i < n; i++)
+      fs.push(`drawbox=x=${Math.round((i * w) / n)}:y=0:w=2:h=${h}:color=${GREEN}@0.8:t=fill`);
+    for (let i = 0; i < n; i++)
+      fs.push(
+        `drawtext=fontfile=${F}:text='${i + 1}':x=${Math.round(((i + 0.5) * w) / n - fz * 0.3)}:y=6:fontsize=${fz}:fontcolor=black:box=1:boxcolor=white@0.95:boxborderw=5`,
+      );
+  }
+  if (axis === "h" || axis === "both") {
+    for (let j = 1; j < n; j++)
+      fs.push(`drawbox=x=0:y=${Math.round((j * h) / n)}:w=${w}:h=2:color=${BLUE}@0.8:t=fill`);
+    for (let j = 0; j < n; j++)
+      fs.push(
+        `drawtext=fontfile=${F}:text='${j + 1}':x=6:y=${Math.round(((j + 0.5) * h) / n - fz * 0.5)}:fontsize=${fz}:fontcolor=black:box=1:boxcolor=white@0.95:boxborderw=5`,
+      );
+  }
+  return fs;
+}
+const ids = (s) => String(s).split(",").filter(Boolean).map(Number);
+const regionOf = (v, h, n, pad) => [
+  Math.max(Math.min(...v) - 1 - pad, 0) / n,
+  Math.max(Math.min(...h) - 1 - pad, 0) / n,
+  Math.min(Math.max(...v) + pad, n) / n,
+  Math.min(Math.max(...h) + pad, n) / n,
+];
+const r4 = (x) => Math.round(x * 1e4) / 1e4;
+const out = (o) => console.log(JSON.stringify(o));
+
+// --- tiny arg parsing: locate.mjs <cmd> <img?> --k v ---
+const [cmd, ...rest] = process.argv.slice(2);
+const pos = rest.filter((a) => !a.startsWith("--"));
+const opt = {};
+for (let i = 0; i < rest.length; i++)
+  if (rest[i].startsWith("--")) opt[rest[i].slice(2)] = rest[i + 1];
+const img = pos[0];
+
+if (cmd === "overlay") {
+  const dir = opt.out || ".";
+  mkdirSync(dir, { recursive: true });
+  const n = Number(opt.n || N1);
+  const { w, h } = probe(img);
+  const fz = Math.max(16, Math.round(Math.min(w, h) / 22));
+  ff(["-i", img, "-vf", gridFilters(w, h, n, "v", fz).join(","), `${dir}/gv.png`]);
+  ff(["-i", img, "-vf", gridFilters(w, h, n, "h", fz).join(","), `${dir}/gh.png`]);
+  out({
+    w,
+    h,
+    n,
+    vertical: `${dir}/gv.png`,
+    horizontal: `${dir}/gh.png`,
+    next: "READ gv.png + gh.png, then: locate.mjs region <img> --vids .. --hids .. --out " + dir,
+  });
+} else if (cmd === "region") {
+  const dir = opt.out || ".";
+  mkdirSync(dir, { recursive: true });
+  const n = Number(opt.n || N1),
+    nf = Number(opt.nf || N2);
+  const reg = regionOf(ids(opt.vids), ids(opt.hids), n, PAD1);
+  const { w, h } = probe(img);
+  const cx = Math.floor(reg[0] * w),
+    cy = Math.floor(reg[1] * h);
+  const cw = Math.max(2, Math.floor((reg[2] - reg[0]) * w)),
+    ch = Math.max(2, Math.floor((reg[3] - reg[1]) * h));
+  const uw = Math.max(cw, 640),
+    uh = Math.round((ch * uw) / cw);
+  const fz = Math.max(15, Math.round(Math.min(uw, uh) / 16));
+  ff([
+    "-i",
+    img,
+    "-vf",
+    [
+      `crop=${cw}:${ch}:${cx}:${cy}`,
+      `scale=${uw}:${uh}`,
+      ...gridFilters(uw, uh, nf, "both", fz),
+    ].join(","),
+    `${dir}/gc.png`,
+  ]);
+  out({
+    region: reg.map(r4),
+    crop_grid: `${dir}/gc.png`,
+    nf,
+    next: `READ gc.png, then: locate.mjs final <img> --region ${reg.map(r4).join(",")} --vids .. --hids ..`,
+  });
+} else if (cmd === "final") {
+  const nf = Number(opt.nf || N2);
+  const reg = opt.region.split(",").map(Number);
+  const rl = regionOf(ids(opt.vids), ids(opt.hids), nf, PAD2);
+  const [x0, y0, x1, y1] = reg;
+  const box = [
+    x0 + rl[0] * (x1 - x0),
+    y0 + rl[1] * (y1 - y0),
+    x0 + rl[2] * (x1 - x0),
+    y0 + rl[3] * (y1 - y0),
+  ].map(r4);
+  out({
+    box,
+    center: [r4((box[0] + box[2]) / 2), r4((box[1] + box[3]) / 2)],
+    next:
+      "VERIFY: locate.mjs mark <img> --box " +
+      box.join(",") +
+      " --out <dir>/check.png — then READ it",
+  });
+} else if (cmd === "mark") {
+  const box = opt.box.split(",").map(Number);
+  const { w, h } = probe(img);
+  const bx = Math.round(box[0] * w),
+    by = Math.round(box[1] * h);
+  const bw = Math.max(2, Math.round((box[2] - box[0]) * w)),
+    bh = Math.max(2, Math.round((box[3] - box[1]) * h));
+  const dst = opt.out || "./check.png";
+  ff(["-i", img, "-vf", `drawbox=x=${bx}:y=${by}:w=${bw}:h=${bh}:color=${RED}@1:t=6`, dst]);
+  out({
+    marked: dst,
+    next: "READ it — red box on the target? If off, redo region/final with corrected strips.",
+  });
+} else if (cmd === "auto") {
+  // OPTIONAL fast path — only if a strong detector key happens to exist. Never assume it.
+  const key = process.env.GEMINI_API_KEY;
+  if (!key) {
+    console.error(
+      "auto needs GEMINI_API_KEY; use the grid loop instead (overlay→region→final→mark)",
+    );
+    process.exit(1);
+  }
+  const target = pos[1];
+  const b64 = execFileSync("base64", ["-i", img]).toString().replace(/\n/g, "");
+  const mime = img.match(/\.png$/i) ? "image/png" : "image/jpeg";
+  const body = {
+    contents: [
+      {
+        parts: [
+          { inline_data: { mime_type: mime, data: b64 } },
+          {
+            text: `Detect "${target}". Return ONLY {"box_2d":[ymin,xmin,ymax,xmax]} integers 0-1000.`,
+          },
+        ],
+      },
+    ],
+    generationConfig: { temperature: 0, response_mime_type: "application/json" },
+  };
+  const res = await fetch(
+    `https://generativelanguage.googleapis.com/v1beta/models/gemini-3.5-flash:generateContent?key=${key}`,
+    { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) },
+  );
+  const t = (await res.json()).candidates[0].content.parts[0].text;
+  let bb = JSON.parse(t.match(/\{[\s\S]*\}/)[0]).box_2d;
+  if (Array.isArray(bb[0])) bb = bb[0];
+  const s = Math.max(...bb) > 1.5 ? 1000 : 1;
+  const box = [bb[1] / s, bb[0] / s, bb[3] / s, bb[2] / s].map(r4);
+  out({ box, center: [r4((box[0] + box[2]) / 2), r4((box[1] + box[3]) / 2)] });
+} else {
+  console.error("usage: locate.mjs overlay|region|final|mark|auto … (see header comment)");
+  process.exit(1);
+}
diff --git a/.claude/skills/hyperframes/scripts/plugin-cli.mjs b/.claude/skills/hyperframes/scripts/plugin-cli.mjs
new file mode 100644
index 0000000..4eeb01b
--- /dev/null
+++ b/.claude/skills/hyperframes/scripts/plugin-cli.mjs
@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+// Run from the user's project; locate the release from this installed file.
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync } from "node:fs";
+import { join, win32 } from "node:path";
+import { fileURLToPath } from "node:url";
+import { isMainModule } from "./lib/main-module.mjs";
+
+const root = fileURLToPath(new URL("../../../", import.meta.url));
+const manifests = [
+  "plugin.json",
+  ".claude-plugin/plugin.json",
+  ".codex-plugin/plugin.json",
+  ".cursor-plugin/plugin.json",
+  "gemini-extension.json",
+];
+
+export function pluginVersion(pluginRoot = root) {
+  for (const path of manifests) {
+    const file = join(pluginRoot, path);
+    if (!existsSync(file)) continue;
+    const manifest = JSON.parse(readFileSync(file, "utf8"));
+    if (
+      manifest.name !== "hyperframes" ||
+      !/^\d+\.\d+\.\d+(?:-[0-9A-Za-z.-]+)?$/.test(manifest.version ?? "")
+    ) {
+      throw new Error(`Invalid HyperFrames plugin release: ${file}`);
+    }
+    return manifest.version;
+  }
+  throw new Error(
+    "No HyperFrames plugin manifest found. Use the standalone skills installation instructions.",
+  );
+}
+
+export function invocation(
+  args,
+  {
+    version = pluginVersion(),
+    env = process.env,
+    platform = process.platform,
+    node = process.execPath,
+    pathExists = existsSync,
+  } = {},
+) {
+  if (args[0] === "skills")
+    throw new Error(
+      "Update HyperFrames through your agent's plugin manager; bundled skills are release-managed.",
+    );
+  const childEnv = {
+    ...env,
+    HYPERFRAMES_SKIP_SKILLS: "1",
+    HYPERFRAMES_SKILL_PKG_VERSION: version,
+    HYPERFRAMES_PLUGIN_VERSION: version,
+    HYPERFRAMES_NO_UPDATE_CHECK: "1",
+  };
+  if (args[0] === "--script") {
+    if (!args[1]) throw new Error("--script requires a Node script path.");
+    return { command: node, args: args.slice(1), env: childEnv };
+  }
+  const cliArgs = ["--yes", `hyperframes@${version}`, ...args];
+  if (platform !== "win32") return { command: "npx", args: cliArgs, env: childEnv };
+  const candidates = [
+    env.npm_execpath && win32.join(win32.dirname(env.npm_execpath), "npx-cli.js"),
+    win32.join(win32.dirname(node), "node_modules", "npm", "bin", "npx-cli.js"),
+  ].filter(Boolean);
+  const npx = candidates.find(pathExists);
+  if (!npx)
+    throw new Error(
+      "Cannot find npx-cli.js. Install Node.js with npm or run from an npm environment.",
+    );
+  return { command: node, args: [npx, ...cliArgs], env: childEnv };
+}
+
+if (isMainModule(import.meta.url)) {
+  try {
+    const command = invocation(process.argv.slice(2));
+    const result = spawnSync(command.command, command.args, {
+      env: command.env,
+      stdio: "inherit",
+      windowsHide: true,
+    });
+    if (result.error) throw result.error;
+    process.exitCode = result.status ?? 1;
+  } catch (error) {
+    console.error(error.message);
+    process.exitCode = 1;
+  }
+}
diff --git a/.claude/skills/hyperframes/scripts/plugin-cli.test.mjs b/.claude/skills/hyperframes/scripts/plugin-cli.test.mjs
new file mode 100644
index 0000000..d1a42cc
--- /dev/null
+++ b/.claude/skills/hyperframes/scripts/plugin-cli.test.mjs
@@ -0,0 +1,121 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import {
+  copyFileSync,
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  realpathSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { test } from "node:test";
+import { invocation, pluginVersion } from "./plugin-cli.mjs";
+
+function fixture(t, manifest = "plugin.json", version = "1.2.3") {
+  const root = mkdtempSync(join(tmpdir(), "hf-plugin-"));
+  t.after(() => rmSync(root, { recursive: true, force: true }));
+  mkdirSync(join(root, "skills/hyperframes/scripts/lib"), { recursive: true });
+  mkdirSync(join(root, manifest, ".."), { recursive: true });
+  writeFileSync(join(root, manifest), JSON.stringify({ name: "hyperframes", version }));
+  const launcher = join(root, "skills/hyperframes/scripts/plugin-cli.mjs");
+  copyFileSync(new URL("./plugin-cli.mjs", import.meta.url), launcher);
+  copyFileSync(
+    new URL("./lib/main-module.mjs", import.meta.url),
+    join(root, "skills/hyperframes/scripts/lib/main-module.mjs"),
+  );
+  return { root, launcher };
+}
+
+for (const manifest of [
+  "plugin.json",
+  ".claude-plugin/plugin.json",
+  ".codex-plugin/plugin.json",
+  ".cursor-plugin/plugin.json",
+  "gemini-extension.json",
+]) {
+  test(`locates ${manifest} without repository packages`, (t) => {
+    const { root } = fixture(t, manifest);
+    assert.equal(pluginVersion(root), "1.2.3");
+  });
+}
+
+test("rejects missing and floating plugin versions", (t) => {
+  const { root } = fixture(t, "plugin.json", "latest");
+  assert.throws(() => pluginVersion(root), /Invalid HyperFrames plugin release/);
+  rmSync(join(root, "plugin.json"));
+  assert.throws(() => pluginVersion(root), /No HyperFrames plugin manifest/);
+});
+
+test("pins CLI, suppresses standalone refresh, preserves unrelated environment", () => {
+  const result = invocation(["init", "project with spaces", "--non-interactive"], {
+    version: "1.2.3",
+    platform: "darwin",
+    env: { PATH: "/bin", HYPERFRAMES_SKIP_SKILLS: "0" },
+  });
+  assert.equal(result.command, "npx");
+  assert.deepEqual(result.args, [
+    "--yes",
+    "hyperframes@1.2.3",
+    "init",
+    "project with spaces",
+    "--non-interactive",
+  ]);
+  assert.deepEqual(result.env, {
+    PATH: "/bin",
+    HYPERFRAMES_SKIP_SKILLS: "1",
+    HYPERFRAMES_SKILL_PKG_VERSION: "1.2.3",
+    HYPERFRAMES_PLUGIN_VERSION: "1.2.3",
+    HYPERFRAMES_NO_UPDATE_CHECK: "1",
+  });
+  assert.throws(() => invocation(["skills", "update"], { version: "1.2.3" }), /plugin manager/);
+});
+
+test("Windows launches npx through Node without shell argument interpretation", () => {
+  const result = invocation(["render", "a & b"], {
+    version: "1.2.3",
+    platform: "win32",
+    node: String.raw`C:\Program Files\nodejs\node.exe`,
+    env: { npm_execpath: String.raw`C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js` },
+    pathExists: (p) => p === String.raw`C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js`,
+  });
+  assert.equal(result.command, String.raw`C:\Program Files\nodejs\node.exe`);
+  assert.deepEqual(result.args, [
+    String.raw`C:\Program Files\nodejs\node_modules\npm\bin\npx-cli.js`,
+    "--yes",
+    "hyperframes@1.2.3",
+    "render",
+    "a & b",
+  ]);
+  assert.throws(
+    () => invocation([], { version: "1.2.3", platform: "win32", env: {}, pathExists: () => false }),
+    /Cannot find npx/,
+  );
+});
+
+test("installed helper keeps cwd, arguments, release environment and exit code", (t) => {
+  const { root, launcher } = fixture(t);
+  const project = join(root, "user project");
+  mkdirSync(project);
+  const helper = join(root, "helper.mjs");
+  writeFileSync(
+    helper,
+    "console.log(JSON.stringify({ cwd: process.cwd(), args: process.argv.slice(2), skip: process.env.HYPERFRAMES_SKIP_SKILLS, version: process.env.HYPERFRAMES_SKILL_PKG_VERSION })); process.exit(7);",
+  );
+  const before = readFileSync(join(root, "plugin.json"), "utf8");
+  const result = spawnSync(
+    process.execPath,
+    [launcher, "--script", helper, "literal $value & spaces"],
+    { cwd: project, encoding: "utf8" },
+  );
+  assert.equal(result.status, 7, result.stderr);
+  assert.deepEqual(JSON.parse(result.stdout), {
+    cwd: realpathSync(project),
+    args: ["literal $value & spaces"],
+    skip: "1",
+    version: "1.2.3",
+  });
+  assert.equal(readFileSync(join(root, "plugin.json"), "utf8"), before);
+});
diff --git a/.claude/skills/media-use/.gitignore b/.claude/skills/media-use/.gitignore
new file mode 100644
index 0000000..17df1e2
--- /dev/null
+++ b/.claude/skills/media-use/.gitignore
@@ -0,0 +1 @@
+eval-report.html
diff --git a/.claude/skills/media-use/SKILL.md b/.claude/skills/media-use/SKILL.md
new file mode 100644
index 0000000..53fe2ed
--- /dev/null
+++ b/.claude/skills/media-use/SKILL.md
@@ -0,0 +1,60 @@
+---
+name: media-use
+description: Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.
+---
+
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.
+
+# Media in HyperFrames
+
+Media lands as a local file in the project's `assets/` with a ledger record; renders never fetch. One verb finds or makes it:
+
+```bash
+npx hyperframes media-use resolve --type <type> --intent "<what you need>" --project <dir>
+```
+
+It prints one line, `resolved <id> → <path> (<type>, <metadata>)`. List reusable assets first with `--candidates` and judge the fit yourself; reuse, ingest (`--from`) and adopt are in `references/resolve.md`.
+
+## Two ways to get it
+
+| Need | HeyGen (best quality) | Free, no account |
+| --- | --- | --- |
+| Music (`bgm`) | Catalog of 10k+ tracks | Local MusicGen (`audio/references/bgm.md`) |
+| Sound effects (`sfx`) | | Openverse; 21 bundled offline |
+| Images, icons | Asset search, 75k+ | Local FLUX (mflux), if installed |
+| Logos (`logo`) | | theSVG, GitHub avatar, favicon; never redrawn |
+| Voiceover (`voice`) | HeyGen voices, voice cloning | `npx hyperframes tts` (Kokoro on device; Python 3.10+ with `pip install kokoro-onnx soundfile`) |
+| A presenter speaking | Avatar video (`--type video`) | Local LTX for generic clips, if installed |
+| Transcripts | | `npx hyperframes transcribe` (Parakeet or whisper) |
+| Cutouts | `heygen background-removal` | `npx hyperframes remove-background` |
+| Grades, LUTs, looks | | `npx hyperframes media-treatment` |
+
+**Host apps.** Inside an app that gives you its own media tools, use those first. When `HEYGEN_API_BASE` is set, the host pays for HeyGen: don't ask for the `heygen` CLI or a sign-in, and when a call is refused, relay the host's message as written and stop.
+
+**HeyGen.** Install the [`heygen` CLI](https://developers.heygen.com/cli) and sign in with `heygen auth login --oauth`: the OAuth session carries a free allowance on subscription credits; an API key (`--api-key`) bills API credits. Check setup with `npx hyperframes media-use resolve --doctor`. When a request needs HeyGen (a presenter or avatar, a HeyGen voice, catalog music) and `heygen` is missing or signed out, tell the person how to get it: the install link, `heygen auth login --oauth` for the free allowance, or an API key for credits. Then offer the free path or wait. Beyond `resolve`, the same CLI makes text-to-video (`heygen video-agent create`), avatar videos with a recorded track (`heygen video create`), cloned voices (`heygen voice clone create`), dubbing (`heygen lipsync`), translated videos (`heygen video-translate`) and short clips from a long video (`heygen ai-clipping`): recipes in `references/operations.md`.
+
+**Free.** Every tool in the free column needs no account; local models are opt-in installs (`references/setup-providers.md`). Without `heygen`, `resolve` for music, images and icons fails and says so; credit CC BY sounds (`audio/references/sfx.md`). `--local-only` skips every network provider.
+
+**Cost.** Confirm before a paid call you chose to make (an avatar video counts); one the person asked for just runs. `--provider <name>` pins one generator when the person names it.
+
+## Looks on real footage
+
+Feedback that footage is dark, flat or dull, should feel retro or printed, needs a face hidden, or needs a reveal is media intent: read `references/media-treatments.md`. Inspect the real `<img>`/`<video>`, pick one intent, start from `npx hyperframes media-treatment --capabilities --json`, then `--capability <id>`; never `--all`. Persist the final treatment with `npx hyperframes media-treatment`; no CSS or SVG stand-ins for supported effects, and no generated `.cube` just to encode exposure or warmth.
+
+## Offer once, never add silently
+
+When you build or review a piece, scan once for concrete gaps (on-screen text with no voiceover, emoji standing in for icons, placeholder images, silent cuts, 10 s+ with no music, a colour cast) and offer the specific fixes in one ask. No signal, no suggestion; respect "leave it".
+
+## Where to look
+
+| Task | Read |
+| --- | --- |
+| Resolve, reuse, adopt, ingest, flags | `references/resolve.md` |
+| Grading, LUTs, `grade-compare` | `references/grading.md` |
+| Voiceover, music, sound effects, captions, transcription | `references/audio.md` |
+| Cut, reframe or transform media; HeyGen recipes | `references/operations.md` |
+| Treatments, realtime effects, overlays, reveals | `references/media-treatments.md` |
+| Install, sign-in, providers, RAM ladders | `references/setup-providers.md` |
+| Fades, gain, ducking, automation, effects, buses on placed tracks | `references/mixing.md` |
+| Local commands: grade, cutout, loudness, beats | `references/local.md` |
+| Remembered preferences | `references/memory.md` |
diff --git a/.claude/skills/media-use/audio/assets/sfx/CREDITS.md b/.claude/skills/media-use/audio/assets/sfx/CREDITS.md
new file mode 100644
index 0000000..750d6e8
--- /dev/null
+++ b/.claude/skills/media-use/audio/assets/sfx/CREDITS.md
@@ -0,0 +1,35 @@
+# SFX Credits
+
+All sound effects in this directory are sourced from [Pixabay](https://pixabay.com/sound-effects/) and used under the [Pixabay Content License](https://pixabay.com/service/license-summary/).
+
+The Pixabay license allows free use for commercial and non-commercial purposes without attribution, but attribution is appreciated and given here for transparency.
+
+## Files
+
+The following `.mp3` files are bundled with this skill:
+
+- `chime.mp3`
+- `click.mp3` / `click-soft.mp3`
+- `error.mp3`
+- `glitch-1.mp3` / `glitch-2.mp3` / `glitch-3.mp3`
+- `impact-bass-1.mp3` / `impact-bass-2.mp3`
+- `key-press.mp3`
+- `notification.mp3`
+- `ping.mp3`
+- `pop.mp3`
+- `riser.mp3`
+- `sparkle.mp3`
+- `typing.mp3`
+- `whoosh.mp3` / `whoosh-short.mp3` / `whoosh-cinematic.mp3`
+
+See `manifest.json` for per-file metadata (duration, energy character, recommended use).
+
+## License
+
+All files are distributed under the [Pixabay Content License](https://pixabay.com/service/license-summary/), which permits:
+
+- Commercial and non-commercial use
+- Modification and remixing
+- Redistribution as part of derivative works (such as videos rendered with HyperFrames)
+
+without any attribution requirement.
diff --git a/.claude/skills/media-use/audio/assets/sfx/chime.mp3 b/.claude/skills/media-use/audio/assets/sfx/chime.mp3
new file mode 100644
index 0000000..12da953
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/chime.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/click-soft.mp3 b/.claude/skills/media-use/audio/assets/sfx/click-soft.mp3
new file mode 100644
index 0000000..2706b1d
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/click-soft.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/click.mp3 b/.claude/skills/media-use/audio/assets/sfx/click.mp3
new file mode 100644
index 0000000..2706b1d
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/click.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/error.mp3 b/.claude/skills/media-use/audio/assets/sfx/error.mp3
new file mode 100644
index 0000000..6b4487f
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/error.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/glitch-1.mp3 b/.claude/skills/media-use/audio/assets/sfx/glitch-1.mp3
new file mode 100644
index 0000000..124f450
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/glitch-1.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/glitch-2.mp3 b/.claude/skills/media-use/audio/assets/sfx/glitch-2.mp3
new file mode 100644
index 0000000..580b6fd
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/glitch-2.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/glitch-3.mp3 b/.claude/skills/media-use/audio/assets/sfx/glitch-3.mp3
new file mode 100644
index 0000000..5a8adc2
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/glitch-3.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/impact-bass-1.mp3 b/.claude/skills/media-use/audio/assets/sfx/impact-bass-1.mp3
new file mode 100644
index 0000000..ecfe0c4
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/impact-bass-1.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/impact-bass-2.mp3 b/.claude/skills/media-use/audio/assets/sfx/impact-bass-2.mp3
new file mode 100644
index 0000000..4ae448b
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/impact-bass-2.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/key-press.mp3 b/.claude/skills/media-use/audio/assets/sfx/key-press.mp3
new file mode 100644
index 0000000..d669006
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/key-press.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/manifest.json b/.claude/skills/media-use/audio/assets/sfx/manifest.json
new file mode 100644
index 0000000..7db0ad7
--- /dev/null
+++ b/.claude/skills/media-use/audio/assets/sfx/manifest.json
@@ -0,0 +1,97 @@
+{
+  "chime": {
+    "file": "chime.mp3",
+    "duration": 2.5,
+    "description": "Soft melodic chime — gentle positive beat: success/confirmation or a lighthearted transition. Sync to the visual moment."
+  },
+  "click-soft": {
+    "file": "click-soft.mp3",
+    "duration": 0.37,
+    "description": "Quiet short click — low-key UI tap / soft selection. Short accent, sync exactly to the on-screen action."
+  },
+  "click": {
+    "file": "click.mp3",
+    "duration": 0.37,
+    "description": "Crisp UI click — button press, toggle, selection. Short accent, sync exactly to the on-screen action."
+  },
+  "error": {
+    "file": "error.mp3",
+    "duration": 1.62,
+    "description": "Negative / error tone — failure state, a 'wrong' beat, or a glitchy interruption."
+  },
+  "glitch-1": {
+    "file": "glitch-1.mp3",
+    "duration": 2.64,
+    "description": "Punchy digital glitch — hard-cut accent or sudden reveal. Trigger on the hit; let the decay bleed into the next shot (J-cut)."
+  },
+  "glitch-2": {
+    "file": "glitch-2.mp3",
+    "duration": 3.5,
+    "description": "Harsh, longer glitch — chaotic / jarring transition or a distorted reveal."
+  },
+  "glitch-3": {
+    "file": "glitch-3.mp3",
+    "duration": 3.1,
+    "description": "Low-key glitch texture — subtle digital shift, minimal transition that sits under other audio."
+  },
+  "impact-bass-1": {
+    "file": "impact-bass-1.mp3",
+    "duration": 2.12,
+    "description": "Bass impact hit — logo/hero snap, headline slam. Trigger on the visual landing; decay carries into the next shot (J-cut)."
+  },
+  "impact-bass-2": {
+    "file": "impact-bass-2.mp3",
+    "duration": 2.59,
+    "description": "Bass impact with a short swell — brief anticipation then a deep hit. Place so the peak lands on the reveal."
+  },
+  "key-press": {
+    "file": "key-press.mp3",
+    "duration": 0.4,
+    "description": "Single key press — one keystroke / terminal-input beat. Short accent, sync to the typed character."
+  },
+  "notification": {
+    "file": "notification.mp3",
+    "duration": 2.46,
+    "description": "Notification chime — alert, message-in, toast/badge appears. Sync to the element entering."
+  },
+  "ping": {
+    "file": "ping.mp3",
+    "duration": 1.32,
+    "description": "Sharp electronic ping — punchy accent on a key reveal or data point. Sync to the beat."
+  },
+  "pop": {
+    "file": "pop.mp3",
+    "duration": 0.72,
+    "description": "Quick pop — element appear/spawn, chip/tag/badge in. Small precise accent, sync to the pop-in."
+  },
+  "riser": {
+    "file": "riser.mp3",
+    "duration": 10.03,
+    "description": "Long cinematic riser (~10s build, peak at the end). Trigger at (climax_time − 10.03s) so it crests exactly on the reveal."
+  },
+  "sparkle": {
+    "file": "sparkle.mp3",
+    "duration": 1.8,
+    "description": "Bright sparkle / shimmer — magical reveal or 'shine' highlight on a hero element. Sync to the highlight."
+  },
+  "typing": {
+    "file": "typing.mp3",
+    "duration": 1.5,
+    "description": "Typing burst (~1.5s of keys) — keyboard / code typing reveal, text-being-typed beat. Start as the text begins typing."
+  },
+  "whoosh-cinematic": {
+    "file": "whoosh-cinematic.mp3",
+    "duration": 5.54,
+    "description": "Cinematic whoosh build (~5.5s) — sweeping scene transition. Align so the swell peaks on the cut."
+  },
+  "whoosh-short": {
+    "file": "whoosh-short.mp3",
+    "duration": 0.57,
+    "description": "Short whoosh — quick swipe/slide accent, fast element move, snappy transition. Sync to the motion."
+  },
+  "whoosh": {
+    "file": "whoosh.mp3",
+    "duration": 0.57,
+    "description": "Punchy whoosh/impact — fast reveal or hard transition accent. Sync to the motion."
+  }
+}
diff --git a/.claude/skills/media-use/audio/assets/sfx/notification.mp3 b/.claude/skills/media-use/audio/assets/sfx/notification.mp3
new file mode 100644
index 0000000..d3f0d1f
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/notification.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/ping.mp3 b/.claude/skills/media-use/audio/assets/sfx/ping.mp3
new file mode 100644
index 0000000..99808c8
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/ping.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/pop.mp3 b/.claude/skills/media-use/audio/assets/sfx/pop.mp3
new file mode 100644
index 0000000..e3ed16f
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/pop.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/riser.mp3 b/.claude/skills/media-use/audio/assets/sfx/riser.mp3
new file mode 100644
index 0000000..0cea32c
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/riser.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/sparkle.mp3 b/.claude/skills/media-use/audio/assets/sfx/sparkle.mp3
new file mode 100644
index 0000000..dae3780
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/sparkle.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/typing.mp3 b/.claude/skills/media-use/audio/assets/sfx/typing.mp3
new file mode 100644
index 0000000..ff69cc0
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/typing.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/whoosh-cinematic.mp3 b/.claude/skills/media-use/audio/assets/sfx/whoosh-cinematic.mp3
new file mode 100644
index 0000000..93b7218
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/whoosh-cinematic.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/whoosh-short.mp3 b/.claude/skills/media-use/audio/assets/sfx/whoosh-short.mp3
new file mode 100644
index 0000000..e23e513
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/whoosh-short.mp3 differ
diff --git a/.claude/skills/media-use/audio/assets/sfx/whoosh.mp3 b/.claude/skills/media-use/audio/assets/sfx/whoosh.mp3
new file mode 100644
index 0000000..e23e513
Binary files /dev/null and b/.claude/skills/media-use/audio/assets/sfx/whoosh.mp3 differ
diff --git a/.claude/skills/media-use/audio/references/bgm.md b/.claude/skills/media-use/audio/references/bgm.md
new file mode 100644
index 0000000..be12c65
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/bgm.md
@@ -0,0 +1,76 @@
+# Background music (BGM)
+
+One music bed per composition, produced by the shared audio engine (`scripts/audio.mjs` → `scripts/lib/bgm.mjs`). Two routes, chosen by the engine's one switch — whether a HeyGen credential is present:
+
+- **HeyGen retrieval — the default when credentialed.** Search HeyGen's music catalog by mood, download the top track. No generation; same `~/.heygen` / `$HEYGEN_API_KEY` credential as TTS.
+- **Local generation (Lyria → MusicGen) — the fallback when there is no credential** (or when asked for explicitly). Generate a WAV from a mood prompt. There is **no `npx hyperframes bgm` command**; the engine spawns `scripts/lyria-recipe.py` or an inline MusicGen script directly.
+
+> **Run the Preflight first — no credential is not a green light to silently generate locally.** Before generating, complete the sign-in **Preflight** (see `../../SKILL.md` → Preflight): run `npx hyperframes auth status`, recommend signing in, and **STOP for the user's choice** (sign in for HeyGen's music library, or continue offline with local generation). This applies to a one-off "generate a BGM" request just as much as inside a full workflow.
+
+## Driving it from the request
+
+`audio_request.json` → `bgm: { mode?, query?, prompt? }`:
+
+- **`mode`** — `retrieve | generate | none`. Omit for **auto** (retrieve when credentialed, else generate). An **explicit** `retrieve` is strict: no credential ⇒ skip, never a detached generate (so a caller with no `wait-bgm` step can't get a pending job it won't await).
+- **`query`** — the mood, used for retrieval and as a fallback prompt seed (e.g. a storyboard's `music:` field, falling back to `message` → `arc` → `"calm cinematic underscore"`).
+- **`prompt`** — an explicit full prompt for generation; omit and the engine infers one (see Mood inference). Optional `blob` / `archetype` / `arc` feed that inference.
+
+Both routes keep a file of yours already at the output name: the engine writes the next free name (`track-2.mp3`), reports it as an anomaly, and `bgm.path` carries the real path.
+
+## HeyGen retrieval (default)
+
+`searchSounds(query, "music", { limit: 5 })` → `GET /audio/sounds?query=<mood>&type=music&limit=5`. Take the top result (ranked by `score`), download its presigned `audio_url` → `assets/bgm/track.mp3`. Synchronous. No match → skip (BGM is optional; never fail the render over it). Cue written to `audio_meta.json`:
+
+```jsonc
+{
+  "path": "assets/bgm/track.mp3",
+  "volume": 0.12,
+  "mode": "retrieve",
+  "query": "calm cinematic underscore",
+  "duration_s": 42.0,
+}
+```
+
+`volume` comes from the engine's `bgmDefaultVolume()`: `BGM_BED_VOLUME` (currently `0.12` ≈ -18 dB — a bed under the voice) under narration, `BGM_SILENT_VOLUME` (currently `0.9`) for a silent film (no voice). Tune those constants in `scripts/lib/bgm.mjs`, not call sites. An explicit `volume` in `audio_meta.json` always overrides this default. `bgm_pending` is `false` — the file is on disk when the engine returns.
+
+For short launch videos, do not assume the beginning of the retrieved file is the best edit point. Check the opening against later five-second sections. If the track starts with a quiet build but a later section has a stronger, clean musical entrance, trim from that section and apply a short fade-in and longer fade-out. Repeat this check whenever the composition duration changes; the final music file must cover the full cut without a silent tail.
+
+## Local generation (fallback) — Lyria → MusicGen
+
+Spawned **detached** so voice work isn't blocked; `audio_meta.bgm_pending: true` and `bgm_pid` / `bgm_log` are set until it finishes. **Run `scripts/wait-bgm.mjs` before assembling** — it polls the output file / process / log, detects crashes, and writes `bgm_status.json` (`status: ready | failed | timeout | disabled`). A failed/absent track is simply omitted; it never blocks voice/SFX.
+
+| Order | Provider                             | Env / deps                                                                            | Speed                                   | Quality                     |
+| ----- | ------------------------------------ | ------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------- |
+| 1     | Google Lyria RealTime                | `$GEMINI_API_KEY` or `$GOOGLE_API_KEY` + `google-genai` (auto-installed on demand)    | Real-time stream (≈ requested duration) | Production-grade            |
+| 2     | MusicGen (`facebook/musicgen-small`) | Python `transformers + torch + soundfile + numpy` (~300 MB first run; auto-installed) | Slow on CPU; fast on Apple MPS / CUDA   | Decent; prompt-only control |
+
+Output → `assets/bgm/track.wav`, target = total voice duration. MusicGen generates **one** seed clip (≤28–30s, under the decoder's positional limit) then crossfade-loops it up to the target (or trims down if shorter), avoiding per-segment seams. Backend selection is by what can actually **run**: Lyria only when `import google.genai` succeeds, else MusicGen; if neither can be made to run, BGM is skipped (voice + SFX still render).
+
+## Mood inference (the generate prompt)
+
+`inferBgmPrompt()` in `scripts/lib/bgm.mjs`: an explicit `prompt` wins; otherwise industry-keyword **base** → narrative-**archetype** shape → emotional-**arc** tiebreaker.
+
+| Match in `blob` / `query`                              | Base prompt                                                                 | BPM |
+| ------------------------------------------------------ | --------------------------------------------------------------------------- | --- |
+| `crypto / nft / web3 / defi / token / blockchain`      | atmospheric electronic, deep bass, futuristic synths, restrained percussion | 100 |
+| `finance / fintech / bank / payment / invest / wealth` | calm cinematic, soft strings, subtle piano, restrained percussion           | 92  |
+| `creative / agency / design / studio / art / brand`    | playful electronic, warm pads, light percussion                             | 115 |
+| _(default: SaaS / tech / platform)_                    | uplifting corporate tech, bright modern piano with synth pads               | 108 |
+
+Archetype then reshapes the arc — PAS → "MINOR to MAJOR" build; BAB / future-pacing → aspirational rising; feature-cascade → +10 BPM driving; demo-loop → −8 BPM minimal. The emotional arc breaks remaining ties (tension→relief, excitement, trust/reassurance).
+
+## Lyria knobs (direct recipe use)
+
+The engine bakes BPM / scale into the **prompt text** (via the inference above) and passes only `--output` / `--duration` / `--prompt` to the recipe. If you invoke `scripts/lyria-recipe.py` directly you can also set: `--bpm` (90–110 calm, 110–130 energetic), `--brightness` (0–1, ≥0.7 promotional), `--density` (0–1, higher = fuller), `--scale` (`MAJOR` / `MINOR` / `PENTATONIC` / …), `--negative-prompt` (styles to exclude). MusicGen ignores all of these — put the mood in the prompt.
+
+## Failure modes
+
+| Failure                                       | Behavior                                                                                 |
+| --------------------------------------------- | ---------------------------------------------------------------------------------------- |
+| No music match (retrieve)                     | `bgm: null`, anomaly logged. Render proceeds without BGM.                                |
+| Explicit `retrieve`, no credential            | Skipped (no silent generate fallback). Use `mode: generate` or omit `mode` for auto.     |
+| Neither Lyria nor MusicGen can run (generate) | `bgm` disabled with a `pip install …` hint. Voice + SFX still render.                    |
+| Generate still rendering at assemble time     | `bgm_pending: true`; `wait-bgm.mjs` waits/checks and writes `bgm_status.json` first.     |
+| Generate crashed                              | `wait-bgm.mjs` → `bgm_status.json { status: "failed" }`; the `<audio>` track is omitted. |
+
+BGM failure never blocks a render.
diff --git a/.claude/skills/media-use/audio/references/captions/authoring.md b/.claude/skills/media-use/audio/references/captions/authoring.md
new file mode 100644
index 0000000..4594477
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/captions/authoring.md
@@ -0,0 +1,162 @@
+# Captions
+
+<!-- registry-items: allow=max-width,data-composition-src,hyperframes-registry,blend-mode,caption-style,font-family -->
+
+**The live search is the source of truth for what the registry has.** The table(s) below are a hand-maintained sample and under-cover by design: run `npx hyperframes catalog --query "<what you want>" --json` — it needs nothing installed — before concluding the registry lacks something. Item names here are checked against `registry/registry.json` by `bun run lint:skills`.
+
+Before authoring: confirm the transcript came from the right Whisper model. CLI default `small.en` silently translates non-English audio — see [`../transcribe.md`](../transcribe.md) → "Language Rule" and [`transcript-handling.md`](transcript-handling.md) for the mandatory quality check.
+
+Analyze spoken content to determine caption style. If user specifies a style, use that. Otherwise, detect tone from the transcript.
+
+## Transcript Source
+
+```json
+[
+  { "id": "w0", "text": "Hello", "start": 0.0, "end": 0.5 },
+  { "id": "w1", "text": "world.", "start": 0.6, "end": 1.2 }
+]
+```
+
+`id` (`w0`, `w1`, …) is the stable reference for per-word overrides and is added by `hyperframes transcribe`. It's optional for backwards compatibility with hand-authored transcripts. See [`../transcribe.md`](../transcribe.md) → "Output Shape" for how this is produced, and [`transcript-handling.md`](transcript-handling.md) for cleanup before consumption.
+
+## Style Detection (When No Style Specified)
+
+Read the full transcript before choosing. Four dimensions:
+
+**1. Visual feel** — corporate→clean; energetic→bold; storytelling→elegant; technical→precise; social→playful.
+
+**2. Color palette** — dark+bright for energy; muted for professional; high contrast for clarity; one accent color.
+
+**3. Font mood** — heavy/condensed for impact; clean sans for modern; rounded for friendly; serif for elegance.
+
+**4. Animation character** — scale-pop for punchy; gentle fade for calm; word-by-word for emphasis; typewriter for technical.
+
+## Per-Word Styling
+
+Scan for words deserving distinct treatment:
+
+- **Brand/product names** — larger size, unique color
+- **ALL CAPS** — scale boost, flash, accent color
+- **Numbers/statistics** — bold weight, accent color
+- **Emotional keywords** — exaggerated animation (overshoot, bounce)
+- **Call-to-action** — highlight, underline, color pop
+- **Marker highlight** — for beyond-color emphasis (highlight sweep, circle, burst, scribble, sketchout), search the registry (`/hyperframes-registry`).
+
+## Script-to-Style Mapping
+
+| Tone         | Font mood                | Animation                          | Color                       | Size    |
+| ------------ | ------------------------ | ---------------------------------- | --------------------------- | ------- |
+| Hype/launch  | Heavy condensed, 800-900 | Scale-pop, back.out(1.7), 0.1-0.2s | Bright on dark              | 72-96px |
+| Corporate    | Clean sans, 600-700      | Fade+slide, power3.out, 0.3s       | White/neutral, muted accent | 56-72px |
+| Tutorial     | Mono/clean sans, 500-600 | Typewriter/fade, 0.4-0.5s          | High contrast, minimal      | 48-64px |
+| Storytelling | Serif/elegant, 400-500   | Slow fade, power2.out, 0.5-0.6s    | Warm muted tones            | 44-56px |
+| Social       | Rounded sans, 700-800    | Bounce, elastic.out, word-by-word  | Playful, colored pills      | 56-80px |
+
+## Word Grouping
+
+- **High energy:** 2-3 words. Quick turnover.
+- **Conversational:** 3-5 words. Natural phrases.
+- **Measured/calm:** 4-6 words. Longer groups.
+
+Break on sentence boundaries, 150ms+ pauses, or max word count.
+
+## Positioning
+
+- **Landscape (1920x1080):** Bottom 80-120px, centered
+- **Portrait (1080x1920):** Lower middle ~600-700px from bottom, centered
+- Never cover the subject's face
+- `position: absolute` — never relative
+- One caption group visible at a time
+
+## Text Overflow Prevention
+
+Use `window.__hyperframes.fitTextFontSize()`:
+
+```js
+var result = window.__hyperframes.fitTextFontSize(group.text.toUpperCase(), {
+  fontFamily: "Outfit",
+  fontWeight: 900,
+  maxWidth: 1600,
+});
+el.style.fontSize = result.fontSize + "px";
+```
+
+Options: `maxWidth` (1600 landscape, 900 portrait), `baseFontSize` (78), `minFontSize` (42), `fontWeight`, `fontFamily`, `step` (2).
+
+CSS safety nets: `max-width` on container, `overflow: visible` (**not** `hidden` — hidden clips scaled emphasis words and glow effects), `position: absolute`, explicit `height`. When per-word styling uses `scale > 1.0`, compute `maxWidth = safeWidth / maxScale` to leave headroom.
+
+**Container pattern:** Full-width absolute container, centered. Do **not** use `left: 50%; transform: translateX(-50%)` — causes clipping at composition edges.
+
+## Caption Exit Guarantee
+
+Every group **must** have a hard kill after exit animation:
+
+```js
+tl.to(groupEl, { opacity: 0, scale: 0.95, duration: 0.12, ease: "power2.in" }, group.end - 0.12);
+// `tl.set` is an instant flip, not a tween — safe to set `visibility` here (core's "no animating
+// visibility" rule applies to tweens, which can't smoothly interpolate non-numeric values anyway).
+tl.set(groupEl, { opacity: 0, visibility: "hidden" }, group.end);
+```
+
+Self-lint after building timeline — place **before** `window.__timelines[id] = tl` so it runs at composition init:
+
+```js
+GROUPS.forEach(function (group, gi) {
+  var el = document.getElementById("cg-" + gi);
+  if (!el) return;
+  tl.seek(group.end + 0.01);
+  var computed = window.getComputedStyle(el);
+  if (computed.opacity !== "0" && computed.visibility !== "hidden") {
+    console.warn(
+      "[caption-lint] group " + gi + " still visible at t=" + (group.end + 0.01).toFixed(2) + "s",
+    );
+  }
+});
+tl.seek(0);
+```
+
+## Pre-Built Caption Components
+
+Before building caption styles from scratch, check the registry — 15 ready-to-use caption components cover the most common styles. Install with `npx hyperframes add <name>` and wire as a sub-composition via `data-composition-src` (see `hyperframes-registry`).
+
+```bash
+npx hyperframes catalog --tag caption-style   # list all caption components
+npx hyperframes add caption-highlight         # install a specific one
+```
+
+| Style                     | Component                    | Best for                     |
+| ------------------------- | ---------------------------- | ---------------------------- |
+| TikTok-style highlight    | `caption-highlight`          | Social, high-energy          |
+| Karaoke pill              | `caption-pill-karaoke`       | Music, lyric videos          |
+| Cinematic editorial       | `caption-editorial-emphasis` | Documentary, storytelling    |
+| Glitch / cyber            | `caption-glitch-rgb`         | Tech, gaming                 |
+| Full-screen slam          | `caption-kinetic-slam`       | Hype, announcements          |
+| Neon glow                 | `caption-neon-glow`          | Night, club, neon aesthetics |
+| Neon accent (multi-color) | `caption-neon-accent`        | Colorful, playful            |
+| Wipe reveal               | `caption-clip-wipe`          | Clean, modern                |
+| Gradient fill             | `caption-gradient-fill`      | Vibrant, eye-catching        |
+| Matrix decode             | `caption-matrix-decode`      | Sci-fi, tech reveals         |
+| Emoji pop                 | `caption-emoji-pop`          | Social, casual               |
+| Parallax layers           | `caption-parallax-layers`    | Depth, cinematic             |
+| Particle burst            | `caption-particle-burst`     | Celebration, impact keywords |
+| Lava texture              | `caption-texture`            | Bold, dramatic               |
+| Weight shift              | `caption-weight-shift`       | Elegant, typographic         |
+
+Related: `caption-blend-difference` (tagged `text` / `blend-mode`, not `caption-style`, so it won't appear under the filter above) auto-inverts text against any background via `mix-blend-mode: difference` — useful when the background is busy or unpredictable.
+
+Browse all with previews: [hyperframes.heygen.com/catalog](https://hyperframes.heygen.com/catalog)
+
+Caption components ship with transparent backgrounds — they're pure overlays. If the underlying video is bright or busy, add a contrast layer (e.g. a semi-transparent dark div) in the host composition beneath the caption sub-composition, not inside the component itself.
+
+## Further References
+
+- [`motion.md`](motion.md) — karaoke, marker effects, audio-reactive modulation, scatter exits.
+- [`transcript-handling.md`](transcript-handling.md) — input formats, quality checks, cleaning, external API fallback.
+
+## Constraints
+
+- Deterministic. No `Math.random()`, no `Date.now()`.
+- Sync to transcript timestamps.
+- One group visible at a time.
+- Every group must have a hard `tl.set` kill at `group.end`.
+- Fonts: the compiler auto-embeds only its **built-in mapped set** (Inter, Roboto, Montserrat, …) — for those, just declare `font-family` in CSS. Any **other** font (a brand/custom font like `TT Norms Pro`, or a non-Latin CJK/Devanagari family) is **not** auto-supplied: it needs an `@font-face` pointing at a real `.woff2` shipped with the project, or the text silently falls back to a generic font in the render. Don't assume a `font-family` you can see locally will render — the render machine is a clean headless Chrome with no installed fonts.
diff --git a/.claude/skills/media-use/audio/references/captions/motion.md b/.claude/skills/media-use/audio/references/captions/motion.md
new file mode 100644
index 0000000..72446cf
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/captions/motion.md
@@ -0,0 +1,87 @@
+# Dynamic Caption Techniques
+
+You are here because SKILL.md told you to read this file before writing animation code. Pick your technique combination from the table below based on the energy level you detected from the transcript, then implement using standard GSAP patterns.
+
+## Technique Selection by Energy
+
+| Energy level | Highlight                             | Exit                | Cycle pattern                             |
+| ------------ | ------------------------------------- | ------------------- | ----------------------------------------- |
+| High         | Karaoke with accent glow + scale pop  | Scatter or drop     | Alternate highlight styles every 2 groups |
+| Medium-high  | Karaoke with color pop                | Scatter or collapse | Alternate every 3 groups                  |
+| Medium       | Karaoke (subtle, white only)          | Fade + slide        | Alternate every 3 groups                  |
+| Medium-low   | Karaoke (minimal scale change)        | Fade                | Single style, vary ease per group         |
+| Low          | Karaoke (warm tones, slow transition) | Collapse            | Alternate every 4 groups                  |
+
+**All energy levels use karaoke highlight as the baseline.** The difference is intensity — high energy gets accent color + glow + 15% scale pop on active words, low energy gets a gentle white shift with 3% scale.
+
+**Emphasis words always break the pattern.** When a word is flagged as emphasis (emotional keyword, ALL CAPS, brand name), give it a stronger animation than surrounding words (larger scale, accent color, overshoot ease). This creates contrast.
+
+**Marker highlight modes add a visual layer on top of karaoke.** For emphasis words that need more than color/scale, add a marker-style effect: highlight sweep, circle, burst, scribble, or sketchout (search the registry, `/hyperframes-registry`). Match mode to energy: burst for hype, circle for key terms, highlight for standard, scribble for subtle.
+
+## Audio-Reactive Captions (Mandatory for Music)
+
+**If the source audio is music (vocals over instrumentation, beats, any musical content), you MUST extract audio data and add audio-reactive animations.** This is not optional — music without audio reactivity looks disconnected. Even low-energy ballads get subtle bass pulse and treble glow.
+
+No special wiring is needed. The group loop already iterates over every caption group to build entrance, karaoke, and exit tweens. At that point, read the audio data for each group's time range and use it to modulate the group's animation intensity with regular GSAP tweens.
+
+```js
+// Load audio data inline (same pattern as TRANSCRIPT)
+var AUDIO = JSON.parse(audioDataJson); // { fps, totalFrames, frames: [{ bands: [...] }] }
+
+GROUPS.forEach(function (group, gi) {
+  var groupEl = document.getElementById("cg-" + gi);
+  if (!groupEl) return;
+
+  // Read peak energy for this group's time range
+  var startFrame = Math.floor(group.start * AUDIO.fps);
+  var endFrame = Math.min(Math.floor(group.end * AUDIO.fps), AUDIO.totalFrames - 1);
+  var peakBass = 0;
+  var peakTreble = 0;
+  for (var f = startFrame; f <= endFrame; f++) {
+    var frame = AUDIO.frames[f];
+    if (!frame) continue;
+    peakBass = Math.max(peakBass, frame.bands[0] || 0, frame.bands[1] || 0);
+    peakTreble = Math.max(peakTreble, frame.bands[6] || 0, frame.bands[7] || 0);
+  }
+
+  // Modulate entrance — louder groups enter bigger and glowier
+  tl.to(
+    groupEl,
+    {
+      scale: 1 + peakBass * 0.06,
+      textShadow:
+        "0 0 " + Math.round(peakTreble * 12) + "px rgba(255,255,255," + peakTreble * 0.4 + ")",
+      duration: 0.3,
+      ease: "power2.out",
+    },
+    group.start,
+  );
+
+  // Reset at exit so audio-driven values don't persist
+  tl.set(groupEl, { scale: 1, textShadow: "none" }, group.end - 0.15);
+});
+```
+
+This shapes the animation at build time, not playback time — no per-frame callbacks, no `tl.call()` loops, no async fetch timing issues. Loud groups come in with more weight and glow; quiet groups come in soft. The audio data modulates _how much_, the content determines _what_.
+
+Keep audio reactivity subtle — 3-6% scale variation and soft glow. Heavy pulsing makes text unreadable.
+
+To generate the audio data file:
+
+```bash
+python3 <SKILL_DIR>/audio/scripts/extract-audio-data.py audio.mp3 --fps 30 --bands 8 -o audio-data.json
+```
+
+## Combining Techniques
+
+Don't use the same highlight animation on every group — cycle through styles using the group index. Don't combine multiple competing animations on the same word at the same timestamp. Vary techniques across groups to match the content's pace changes.
+
+**Marker highlight effects** layer well with karaoke — use karaoke for the word-by-word reveal, then add a marker effect on emphasis words only. For example: karaoke highlights each word in white, but brand names get a yellow highlight sweep and stats get a red circle. Cycle marker modes across groups for visual variety.
+
+## Runtime Tools
+
+Caption motion uses standard HyperFrames runtime APIs. Use the canonical sources:
+
+- **GSAP timeline + tween syntax** — `/hyperframes` → `references/runtimes.md` and `references/motion.md`
+- **Fitting caption text** — `/hyperframes` → `references/captions.md`
+- **Audio data extraction** — generate via `python3 <SKILL_DIR>/audio/scripts/extract-audio-data.py audio.mp3 --fps 30 --bands 8 -o audio-data.json`, then load inline as shown in "Audio-Reactive Captions" above
diff --git a/.claude/skills/media-use/audio/references/captions/transcript-handling.md b/.claude/skills/media-use/audio/references/captions/transcript-handling.md
new file mode 100644
index 0000000..3a87d64
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/captions/transcript-handling.md
@@ -0,0 +1,97 @@
+# Transcript Guide
+
+For the `transcribe` CLI invocation, the `.en`-translates-non-English rule, and whisper model selection, see [`../transcribe.md`](../transcribe.md). This file covers what to do with the resulting transcript when authoring captions: input formats, mandatory quality checks, cleaning code, external-API fallbacks.
+
+## Supported Input Formats
+
+The CLI auto-detects and normalizes these formats:
+
+| Format                | Extension | Source                                                                      | Word-level?       |
+| --------------------- | --------- | --------------------------------------------------------------------------- | ----------------- |
+| whisper.cpp JSON      | `.json`   | `hyperframes init --video`, `hyperframes transcribe`                        | Yes               |
+| OpenAI Whisper API    | `.json`   | `openai.audio.transcriptions.create({ timestamp_granularities: ["word"] })` | Yes               |
+| SRT subtitles         | `.srt`    | Video editors, subtitle tools, YouTube                                      | No (phrase-level) |
+| VTT subtitles         | `.vtt`    | Web players, YouTube, transcription services                                | No (phrase-level) |
+| Normalized word array | `.json`   | Pre-processed by any tool                                                   | Yes               |
+
+**Word-level timestamps produce better captions.** SRT/VTT give phrase-level timing, which works but can't do per-word animation effects.
+
+## Transcript Quality Check (Mandatory)
+
+After every transcription, **read the transcript and check for quality issues before proceeding.** Bad transcripts produce nonsensical captions. Never skip this step.
+
+### What to look for
+
+| Signal                       | Example                                | Cause                                                                        |
+| ---------------------------- | -------------------------------------- | ---------------------------------------------------------------------------- |
+| Music note tokens (`♪`, `�`) | `{ "text": "♪" }` or `{ "text": "�" }` | Whisper detected music, not speech                                           |
+| Garbled / nonsense words     | "Do a chin", "Get so gay", "huh"       | Model misheard lyrics or background noise                                    |
+| Long gaps with no words      | 20+ seconds of only `♪` tokens         | Instrumental section — expected, but high ratio means speech is being missed |
+| Repeated filler              | Many "huh", "uh", "oh" entries         | Model is hallucinating on music                                              |
+| Very short word spans        | Words with `end - start < 0.05`        | Unreliable timestamp alignment                                               |
+
+### Automatic retry rules
+
+**If more than 20% of entries are `♪`/`�` tokens, or the transcript contains obvious nonsense words, the transcription failed.** Do not proceed with the bad transcript. Instead:
+
+1. **Retry with `medium.en`** if the original used `small.en` or smaller:
+   ```bash
+   npx hyperframes transcribe audio.mp3 --model medium.en
+   ```
+2. **If `medium.en` also fails** (still >20% music tokens or garbled), tell the user the audio is too noisy for local transcription and suggest:
+   - Providing lyrics manually as an SRT/VTT file
+   - Using an external API (OpenAI or Groq Whisper — see below)
+3. **Always clean the transcript** before building captions — filter out `♪`/`�` tokens and entries where `text` is a single non-word character. Only real words should reach the caption composition.
+
+### Cleaning a transcript
+
+After transcription (even with a good model), strip non-word entries:
+
+```js
+var raw = JSON.parse(transcriptJson);
+var words = raw.filter(function (w) {
+  if (!w.text || w.text.trim().length === 0) return false;
+  if (/^[♪�\u266a\u266b\u266c\u266d\u266e\u266f]+$/.test(w.text)) return false;
+  if (/^(huh|uh|um|ah|oh)$/i.test(w.text) && w.end - w.start < 0.1) return false;
+  return true;
+});
+```
+
+For model-selection guidance by content type, see [`../transcribe.md`](../transcribe.md) → "Picking a model by content type".
+
+## Using External Transcription APIs
+
+For the best accuracy, use an external API and import the result:
+
+**OpenAI Whisper API** (recommended for quality):
+
+```bash
+# Generate with word timestamps, then import
+curl https://api.openai.com/v1/audio/transcriptions \
+  -H "Authorization: Bearer $OPENAI_API_KEY" \
+  -F file=@audio.mp3 -F model=whisper-1 \
+  -F response_format=verbose_json \
+  -F "timestamp_granularities[]=word" \
+  -o transcript-openai.json
+
+npx hyperframes transcribe transcript-openai.json
+```
+
+**Groq Whisper API** (fast, free tier available):
+
+```bash
+curl https://api.groq.com/openai/v1/audio/transcriptions \
+  -H "Authorization: Bearer $GROQ_API_KEY" \
+  -F file=@audio.mp3 -F model=whisper-large-v3 \
+  -F response_format=verbose_json \
+  -F "timestamp_granularities[]=word" \
+  -o transcript-groq.json
+
+npx hyperframes transcribe transcript-groq.json
+```
+
+## If No Transcript Exists
+
+1. Check the project root for `transcript.json`, `.srt`, or `.vtt` files.
+2. If none found, run [`../transcribe.md`](../transcribe.md) — pick the starting model from "Picking a model by content type" there.
+3. Run the quality check above. If it fails, retry with a larger model or fall back to manual lyrics / external API.
diff --git a/.claude/skills/media-use/audio/references/remove-background.md b/.claude/skills/media-use/audio/references/remove-background.md
new file mode 100644
index 0000000..7ba4e32
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/remove-background.md
@@ -0,0 +1,143 @@
+# Background Removal
+
+Make a transparent overlay (typical: a talking head over an arbitrary scene). Uses `u2net_human_seg` (Apache-2.0).
+
+```bash
+npx hyperframes remove-background subject.mp4 -o transparent.webm          # default: VP9 + alpha
+npx hyperframes remove-background subject.mp4 -o transparent.mov           # ProRes 4444 (editing)
+npx hyperframes remove-background portrait.jpg -o cutout.png               # single-image cutout
+npx hyperframes remove-background subject.mp4 -o subject.webm \
+  --background-output plate.webm                                           # both layers, one pass
+npx hyperframes remove-background subject.mp4 -o transparent.webm --device cpu
+npx hyperframes remove-background --info                                   # detected providers
+```
+
+## Output Format
+
+- **`.webm` (VP9 alpha)** — default. Plug straight into `<video>` for Chrome-native transparent playback (~1 MB / 4s @ 1080p).
+- **`.mov` (ProRes 4444)** — round-trip in editors (Premiere / Resolve / DaVinci). ~50 MB / 4s.
+- **`.png`** — single-image cutout.
+
+## Quality (`--quality`)
+
+Controls VP9 encoder CRF only — segmentation quality is fixed. Higher quality keeps the cutout's RGB closer to the source MP4 (important when overlaying the cutout on its own source).
+
+| Preset     | CRF | When                                          |
+| ---------- | --- | --------------------------------------------- |
+| `fast`     | 30  | Iterating, smaller files, looser color match  |
+| `balanced` | 18  | **Default**; visually identical for most uses |
+| `best`     | 12  | Master / final delivery, tightest color match |
+
+## Device (`--device`)
+
+`auto` (default) picks CoreML on Apple Silicon, CUDA when available, otherwise CPU. Force with `--device cpu | coreml | cuda`. CUDA requires `HYPERFRAMES_CUDA=1` plus a GPU-enabled `onnxruntime-node` build. Use `--info` to inspect detected providers without rendering.
+
+## Compositing patterns — pick the right one
+
+The cutout WebM is a **re-encoded copy** of the source MP4's RGB. What sits behind it matters.
+
+| Pattern                                                  | Behind the cutout                       | Result                                                                                                          |
+| -------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| **Cutout over a different scene** (most common)          | Static image, gradient, unrelated video | Looks great. Single RGB source for the subject.                                                                 |
+| **Cutout over its own source mp4** (text-behind-subject) | Same mp4 the cutout came from           | At `balanced` doubling is barely visible; at `fast` you'll see color shift / edge halo. Use `best` for masters. |
+| **Cutout over a different take of the same person**      | Footage of the same subject             | **Two overlapping people. Don't do this.**                                                                      |
+
+## Text-behind-subject pattern (two non-obvious rules)
+
+Putting a headline behind a presenter cutout:
+
+```html
+<video
+  src="presenter.mp4"
+  id="bg"
+  data-start="0"
+  data-duration="6"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+
+<h1 id="headline" style="z-index:2; ...">MAKE IT IN HYPERFRAMES</h1>
+
+<div class="cutout-wrap" style="position:absolute; inset:0; z-index:3; opacity:0">
+  <video
+    src="presenter.webm"
+    data-start="0"
+    data-duration="6"
+    data-track-index="1"
+    muted
+    playsinline
+  ></video>
+</div>
+```
+
+```js
+// Flip the wrapper's opacity at the cut, NOT the video's
+tl.set(".cutout-wrap", { opacity: 1 }, 3.3);
+```
+
+Two rules that are easy to miss:
+
+1. **Wrap the cutout `<video>` in a non-timed `<div>` and animate the wrapper's opacity, not the video element's.** The framework forces `opacity: 1` on active clips (any element with `data-start` / `data-duration`), so animating the video's opacity directly is silently overridden. The wrapper has no `data-*` attributes, so it's owned by your CSS / GSAP.
+2. **Both videos use `data-start="0"` and `data-media-start="0"`** so the framework decodes them in sync from t=0. Late-mounting the cutout (`data-start=3.3`) introduces a seek + warm-up that lands a frame off the base mp4 — visible as one frame of misalignment at the cut.
+
+## Layer separation (`--background-output`)
+
+Emits a **second** transparent video alongside the cutout: same source RGB, alpha is `255 - mask` instead of `mask`. The cutout has the subject opaque; the plate has the surroundings opaque (with a transparent hole where the subject was). Use it when text / graphics need to live **between** the two layers.
+
+| File                             | Alpha is…                                               | Use it for                                                       |
+| -------------------------------- | ------------------------------------------------------- | ---------------------------------------------------------------- |
+| `-o subject.webm`                | mask — subject opaque, background transparent           | Foreground layer (top)                                           |
+| `--background-output plate.webm` | inverse mask — surroundings opaque, subject transparent | Bottom layer; place text / graphics between this and the subject |
+
+Both share the same `--quality` and run from a single inference pass — only encode cost roughly doubles. Only valid for video inputs with `.webm` / `.mov` outputs.
+
+**Hole-cut, not inpainted.** The subject region in `plate.webm` is fully transparent — composite something opaque under it to fill the hole.
+
+**Single test for whether `--background-output` is the right tool:** _will anything ever be visible through the subject's silhouette where the subject used to be?_ If no, you don't need the plate — `subject.webm` alone over a different background is enough.
+
+### Use case → right tool
+
+| Use case                                                                            | Right tool                                                                         |
+| ----------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Text/graphics between the cutout and the plate (this command's reason for existing) | **Hole-cut** (`--background-output`)                                               |
+| Subject onto an unrelated scene                                                     | Just `subject.webm`; ignore the plate                                              |
+| Show the room _without_ the person, alone over no other content                     | **Clean plate** — needs an inpainter (LaMa, ProPainter, E2FGVI). Not this command. |
+| Replace the subject with a different subject                                        | **Clean plate** — same as above                                                    |
+
+### Canonical 3-layer template (plate + content + cutout)
+
+Ship just the two transparent layers and let arbitrary content live between them — no original mp4 needed:
+
+```html
+<!-- z=1 plate: surroundings opaque, subject silhouette transparent -->
+<video
+  src="plate.webm"
+  data-start="0"
+  data-duration="6"
+  data-track-index="0"
+  muted
+  playsinline
+></video>
+
+<!-- z=2 your content lives between the layers -->
+<h1 id="headline" style="z-index:2; ...">MAKE IT IN HYPERFRAMES</h1>
+
+<!-- z=3 cutout floats the subject back on top -->
+<div class="cutout-wrap" style="position:absolute; inset:0; z-index:3">
+  <video
+    src="subject.webm"
+    data-start="0"
+    data-duration="6"
+    data-track-index="1"
+    muted
+    playsinline
+  ></video>
+</div>
+```
+
+Functionally equivalent to the text-behind-subject pattern above, but doesn't require shipping the original mp4 — the plate replaces it. Use this when delivering just the two transparent layers as a reusable asset.
+
+## When `remove-background` is NOT the right tool
+
+If a user asks for "the room **without** the person, displayed standalone" (no subject anywhere, no compositing on top), `--background-output` is wrong — its plate has a transparent hole, not a filled-in clean plate. They need an **inpainter**: LaMa, ProPainter, or E2FGVI. Tell them this command can't do it.
diff --git a/.claude/skills/media-use/audio/references/requirements.md b/.claude/skills/media-use/audio/references/requirements.md
new file mode 100644
index 0000000..e621f77
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/requirements.md
@@ -0,0 +1,29 @@
+# Requirements & Caches
+
+## Credential & key priority
+
+Run `npx hyperframes auth status` to see what's configured and which engines a workflow will use (see the skill's **Preflight** section). Keys resolve in this order — **first match wins**:
+
+| Provider                         | Resolution order (first non-empty wins)                                                                                                                                    | Local deps when used                             |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
+| **HeyGen** (TTS + BGM retrieval) | `$HEYGEN_API_KEY` → `$HYPERFRAMES_API_KEY` → `~/.heygen/credentials` (shared with heygen-cli; `$HEYGEN_CONFIG_DIR` overrides the dir; written by `hyperframes auth login`) | none (REST)                                      |
+| **ElevenLabs** (TTS fallback)    | `$ELEVENLABS_API_KEY`                                                                                                                                                      | `pip install elevenlabs`                         |
+| **Lyria** (BGM fallback)         | `$GEMINI_API_KEY` → `$GOOGLE_API_KEY`                                                                                                                                      | `pip install google-genai`                       |
+| **Kokoro** (TTS, no key)         | always — final voice fallback                                                                                                                                              | `pip install kokoro-onnx soundfile`              |
+| **MusicGen** (BGM, no key)       | always — final music fallback                                                                                                                                              | `pip install transformers torch soundfile numpy` |
+
+`hyperframes auth login` (browser OAuth) is the recommended setup: one sign-in, every project, no per-repo `.env`. An OAuth login is sent as `Authorization: Bearer`; an API key as `X-Api-Key`; both are tagged with `X-HeyGen-Source: cli`. OAuth CLI users can consume the web-plan free allowance for HeyGen TTS (10 min/month); API keys follow the normal API billing path. With no HeyGen credential, voice/BGM run fully locally (Kokoro / MusicGen) — `hyperframes auth status` and `hyperframes doctor` both report whether those local deps are installed.
+
+## Model caches & system dependencies
+
+Each command downloads its own model on first run and caches it under `~/.cache/hyperframes/`:
+
+- **TTS (HeyGen)** — no local deps; needs a HeyGen credential + `ffmpeg` on PATH (to transcode the mp3 response to `.wav`). Credential resolves like the CLI: `$HEYGEN_API_KEY` → `$HYPERFRAMES_API_KEY` → `~/.heygen/credentials` (shared with heygen-cli; run `npx hyperframes auth login`). An OAuth login is sent as `Authorization: Bearer`; an API key as `X-Api-Key`; both include `X-HeyGen-Source: cli` so the backend can apply CLI OAuth free usage.
+- **TTS (ElevenLabs)** — same as HeyGen: API key + `ffmpeg`.
+- **TTS (Kokoro)** — Kokoro-82M (~311 MB) + voices (~27 MB) in `tts/`. Requires Python 3.8+ with `kokoro-onnx` and `soundfile` (`pip install kokoro-onnx soundfile`). Non-English text also needs `espeak-ng` system-wide.
+- **BGM (Lyria)** — needs `$GEMINI_API_KEY` or `$GOOGLE_API_KEY` + `pip install google-genai`. No local model cache.
+- **BGM (MusicGen)** — `pip install transformers torch soundfile`. `facebook/musicgen-small` (~300 MB) cached under `~/.cache/huggingface/` on first run.
+- **Transcribe** — Whisper model size depending on choice (75 MB – 3.1 GB) in `whisper/`, downloaded from HuggingFace on first use. `whisper.cpp` itself is NOT bundled: the CLI resolves it from PATH, installs via Homebrew (macOS), or builds it from source with git+cmake on first use (`$HYPERFRAMES_WHISPER_PATH` overrides).
+- **Remove-background** — `u2net_human_seg` (~168 MB ONNX) in `background-removal/models/`. Peak inference RAM ~1.5 GB.
+
+Run `npx hyperframes doctor` if a command fails because of a missing dependency.
diff --git a/.claude/skills/media-use/audio/references/sfx.md b/.claude/skills/media-use/audio/references/sfx.md
new file mode 100644
index 0000000..bdb17c2
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/sfx.md
@@ -0,0 +1,48 @@
+# Sound effects (SFX)
+
+Named sound effects, produced by the shared audio engine (`scripts/audio.mjs` → `scripts/lib/sfx.mjs`). No account or key is needed:
+
+- **Openverse first, per cue.** Each cue is searched on [Openverse](https://openverse.org)'s free audio API (most sound effects come from Freesound). Search-and-download, **not** generation.
+- **The bundled 21-file library is the fallback** (`assets/sfx/` + `manifest.json`): a cue Openverse has no usable match for, and every cue once Openverse is offline or rate limited, is matched against it and the file copied into the project.
+
+There is no `npx hyperframes sfx` command. SFX is never generated — it is retrieved from Openverse (online) or taken from the bundled library (offline). `npx hyperframes media-use resolve --type sfx` follows the same order (`--local-only` skips Openverse).
+
+## Licences
+
+Only **CC0** and **CC BY** sounds are used: never NonCommercial, ShareAlike or NoDerivatives. Each CC BY sound is credited in the project's `assets/sfx/CREDITS.md` (title, creator, licence, source link; for `resolve`, in a `CREDITS.md` beside the sound files it saves) and its `audio_meta.sfx[]` entry carries `license` and `credit`. Tell the person to include those credits wherever the video is published.
+
+## Cues — request → meta
+
+Each line names the effects it wants: `lines[].sfx: ["whoosh", "ui click"]`. The engine flattens these into cues, resolves each, dedupes identical `(id, name)` pairs (the same effect named twice downloads/copies once), and writes `audio_meta.sfx[]`:
+
+```jsonc
+{
+  "id": "3",                       // joins the cue to the caller's model (frame / scene / segment)
+  "name": "whoosh",
+  "file": "assets/sfx/whoosh.mp3", // downloaded or copied, relative to project root
+  "source": "openverse" | "local", // which route resolved it
+  "offset_s": 0,                   // delay from the line's start
+  "duration_s": 0.57,
+  "volume": 0.35,                  // SFX sit UNDER voice + BGM
+  "license": "by",                 // Openverse only: "cc0" or "by"
+  "credit": "\"Swoosh\" by Ana is licensed under CC BY 4.0. …" // Openverse only
+}
+```
+
+A cue that matches nothing is **skipped** (recorded as an anomaly); SFX never blocks a render. Neither route replaces a file of yours already at the output name: the cue gets the next free name (`whoosh-2.mp3`), reported as an anomaly, and `file` carries the real path.
+
+## Openverse
+
+One search per distinct effect name (20 results, `license=cc0,by`; each result's licence is checked again). The pick keeps Openverse's relevance order, prefers clips that fit a cue (15 s at most; past ~4 s ranks lower) and CC0 over CC BY when they are close. The file lands at `assets/sfx/<slug>.<ext>` and `duration_s` comes from the result. Name effects concretely (`glass shatter`, not `dramatic sound`); a vague query returns a poor match. Anonymous use allows 20 searches a minute and 200 a day: past that, the rest of the run uses the bundled library.
+
+## Bundled library (fallback)
+
+21 curated files in `assets/sfx/`, indexed by `manifest.json` — `{ file, duration, description }` per key (e.g. `whoosh`, `pop`, `click`, `chime`, `riser`, `impact-bass-1`, `glitch-1`, `typing`, …). A cue name resolves by **manifest key, file basename, or slug**, so `whoosh`, `whoosh.mp3`, or `"ui click"` (→ slug) all match. Matched files are copied into the project's `assets/sfx/`; `duration_s` comes from the manifest, so timing is known **offline** — e.g. `riser` is 10.03s, so trigger it at `climax − 10.03s`. The manifest's `description` field carries placement hints per effect; read `assets/sfx/manifest.json` for the full set and usage.
+
+## Rules
+
+- **Volume ~0.35.** SFX must sit under narration and BGM, not fight them.
+- **No match → skip, don't fail.** A missing effect logs an anomaly and moves on; never a render blocker.
+- **Retrieval (Openverse) or bundled library (offline) — never generation.**
+- **One asset per distinct name.** Reuse across lines is deduped to a single search and download, many cues.
+- **Credit CC BY sounds.** `CREDITS.md` lists them; keep it with the project.
diff --git a/.claude/skills/media-use/audio/references/transcribe.md b/.claude/skills/media-use/audio/references/transcribe.md
new file mode 100644
index 0000000..06df2ce
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/transcribe.md
@@ -0,0 +1,52 @@
+# Transcription
+
+Create normalized word-level timestamps. **Always specify `--model` explicitly** — the CLI default is `small.en`, which silently translates non-English audio into English.
+
+```bash
+npx hyperframes transcribe audio.mp3  --model small.en             # known English
+npx hyperframes transcribe video.mp4  --model small --language es  # known Spanish
+npx hyperframes transcribe audio.mp3  --model small                # unknown language (auto-detect)
+npx hyperframes transcribe subtitles.srt                           # import existing
+npx hyperframes transcribe subtitles.vtt
+npx hyperframes transcribe openai-response.json
+```
+
+## Language Rule (Non-Negotiable)
+
+`.en` models (`tiny.en` / `base.en` / `small.en` / `medium.en`) **translate** non-English audio into English. This silently destroys the original language.
+
+1. **Known English** → `--model small.en` (or `medium.en` for music / noisy audio)
+2. **Known non-English** → `--model small --language <iso-code>` (no `.en` suffix)
+3. **Unknown language** → `--model small` (whisper auto-detects)
+
+**CLI default is `small.en`** — do not rely on it; always pass `--model` to make the choice explicit. `--language` also filters out non-target-language segments from mixed-language audio.
+
+## Model Sizes
+
+| Model      | Size   | Speed    | When                                  |
+| ---------- | ------ | -------- | ------------------------------------- |
+| `tiny`     | 75 MB  | Fastest  | Quick previews, smoke tests           |
+| `base`     | 142 MB | Fast     | Short clips, clear audio              |
+| `small`    | 466 MB | Moderate | Default for most multilingual content |
+| `medium`   | 1.5 GB | Slow     | Music with vocals, noisy audio        |
+| `large-v3` | 3.1 GB | Slowest  | Production quality                    |
+
+### Picking a model by content type
+
+1. Speech over silence / light background → `small.en`
+2. Speech over music, or music with vocals → start with `medium.en`
+3. Produced music track (vocals + full instrumentation) → start with `medium.en`; expect to need manual lyrics or an external API ([`captions/transcript-handling.md`](captions/transcript-handling.md) → "Using External Transcription APIs")
+4. Multilingual → `medium` or `large-v3` (no `.en` suffix), pair with `--language`
+
+## Output Shape
+
+Compositions consume a flat array of word objects. The `id` (`w0`, `w1`, …) is added during normalization for stable references in caption overrides; optional for backwards compatibility.
+
+```json
+[
+  { "id": "w0", "text": "Hello", "start": 0.0, "end": 0.5 },
+  { "id": "w1", "text": "world.", "start": 0.6, "end": 1.2 }
+]
+```
+
+For mandatory caption-quality checks, retry rules, and the OpenAI/Groq Whisper API import path, see `captions/transcript-handling.md`.
diff --git a/.claude/skills/media-use/audio/references/tts-to-captions.md b/.claude/skills/media-use/audio/references/tts-to-captions.md
new file mode 100644
index 0000000..4b99fa0
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/tts-to-captions.md
@@ -0,0 +1,35 @@
+# TTS → Captions
+
+When no recorded voiceover exists, generate one and obtain word-level caption timing. Two paths depending on which TTS provider is in use:
+
+## Path A — HeyGen (single call, no Whisper)
+
+HeyGen returns word timestamps in the same response as the audio. Use the
+bundled REST helper (the `hyperframes tts` command is Kokoro-only):
+
+```bash
+node skills/media-use/audio/scripts/heygen-tts.mjs \
+  script.txt --output narration.wav --words narration.words.json
+```
+
+`narration.words.json` is already in the `[{ id, text, start, end }]` shape the captions pipeline consumes — no separate transcribe pass.
+
+## Path B — Gemini / ElevenLabs / Kokoro (TTS → transcription)
+
+These adapters supply audio without word data. The shared audio engine runs
+transcription automatically when timings are absent. For Gemini, use the
+request in [Text to speech](tts.md#gemini-narration), then consume
+`audio_meta.json` → `voices[].words`.
+
+For a standalone local Kokoro generation, generate the audio, then transcribe:
+
+```bash
+npx hyperframes tts script.txt --voice af_heart --output narration.wav
+npx hyperframes transcribe narration.wav --model small.en   # voice af_heart is American English
+```
+
+Whisper extracts precise word boundaries from the generated audio, so caption timing matches delivery without hand-tuning. Match `--model` to the voice's language (use `small.en` for `a`/`b` prefixes, `small --language <code>` otherwise). Then consume `transcript.json` via the caption references in `captions/`.
+
+For Gemini, verify that transcription preserved the script, especially names,
+numbers, and delivery pauses. If `words` is empty, resolve the transcription
+failure before captioning. Generate and align again after changing the read.
diff --git a/.claude/skills/media-use/audio/references/tts.md b/.claude/skills/media-use/audio/references/tts.md
new file mode 100644
index 0000000..2728b21
--- /dev/null
+++ b/.claude/skills/media-use/audio/references/tts.md
@@ -0,0 +1,257 @@
+# Text To Speech
+
+`npx hyperframes tts` synthesizes locally with Kokoro. It does not accept a
+`--provider` or `--words` flag. For HeyGen audio plus word timestamps, use the
+bundled `heygen-tts.mjs` script below.
+
+> **Run the Preflight first — no credential is not a green light to silently use the local voice.** Before generating a voiceover, complete the sign-in **Preflight** (see `../../SKILL.md` → Preflight): run `npx hyperframes auth status`, recommend signing in, and **STOP for the user's choice** (sign in for HeyGen voices, or continue offline with local Kokoro). This applies to a one-off "generate a voiceover" request just as much as inside a full workflow.
+
+## Narrating a HyperFrames docs video
+
+Anything that will sit on hyperframes.heygen.com uses one narrator, so the site
+does not sound like two products.
+
+|                |                                                |
+| -------------- | ---------------------------------------------- |
+| Voice          | **River** — "Relaxed, Neutral, Informative"    |
+| Provider       | ElevenLabs                                     |
+| `voice_id`     | `SAz9YHcvj6GT2YYXdXww`                         |
+| Model          | `eleven_multilingual_v2`                       |
+| Pace           | 145–155 words per minute, with room to breathe |
+| Music under it | about −31 LUFS, never masking the voice        |
+
+```bash
+curl -s -X POST "https://api.elevenlabs.io/v1/text-to-speech/SAz9YHcvj6GT2YYXdXww" \
+  -H "xi-api-key: $ELEVENLABS_API_KEY" -H "Content-Type: application/json" \
+  -d '{"text":"...","model_id":"eleven_multilingual_v2"}' -o take.mp3
+```
+
+This is the voice every user-journey film on the docs site already uses. Falling
+back to local Kokoro because a key was not to hand produces a film that sounds
+wrong beside the others — three docs videos were built that way and had to be
+re-voiced. If you cannot reach ElevenLabs, say so and stop rather than
+substituting a different voice.
+
+Use another voice only for a documented reason, and write the reason down.
+
+## Available routes
+
+Gemini is an explicit alternative to the automatic provider order below. A
+request to use Gemini already chooses the provider; do not redirect that user
+to HeyGen sign-in. Read the Gemini section for its credential requirement.
+
+| Order | Provider          | Env trigger                                                          | Voice IDs                                                                                  | Word timestamps                           | Audio format         |
+| ----- | ----------------- | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------- | -------------------- |
+| 1     | HeyGen (Starfish) | `$HEYGEN_ACCESS_TOKEN` / `$HEYGEN_API_KEY` / `~/.heygen/credentials` | UUIDs from `GET /v3/voices?engine=starfish`, or your cloned voice ids (`heygen-voice.mjs`) | **Yes** (`word_timestamps[]` in response) | mp3 → wav via ffmpeg |
+| 2     | ElevenLabs        | `$ELEVENLABS_API_KEY`                                                | UUIDs from elevenlabs.io dashboard                                                         | No                                        | mp3 → wav via ffmpeg |
+| 3     | Kokoro-82M        | always (local fallback)                                              | `am_michael`, `af_heart`, … (54 voices)                                                    | No                                        | wav direct           |
+
+```bash
+# Local Kokoro CLI
+npx hyperframes tts "Welcome to HyperFrames" -o narration.wav
+```
+
+## Self-contained HeyGen (no CLI) — `scripts/heygen-tts.mjs`
+
+The published `hyperframes tts` CLI synthesizes locally with Kokoro only. When you
+want HeyGen specifically — best quality **plus** word timestamps in one call — use
+the skill's bundled script, which calls the HeyGen v3 REST API directly and needs
+no CLI provider plumbing:
+
+The script resolves a HeyGen credential the same way the CLI does — first source
+wins: a host-injected OAuth `$HEYGEN_ACCESS_TOKEN` → `$HEYGEN_API_KEY` →
+`$HYPERFRAMES_API_KEY` → a project `.env` (auto-loaded,
+walks up ≤5 dirs) → `~/.heygen/credentials` (shared with heygen-cli;
+`$HEYGEN_CONFIG_DIR` overrides the dir). An OAuth login is sent as
+`Authorization: Bearer`; an API key as `X-Api-Key`; both include
+`X-HeyGen-Source: cli`. OAuth CLI users can consume the web-plan free allowance
+(10 min/month) before paid usage; API keys follow normal API billing. If the
+only credential is an expired OAuth token it stops with a hint to run
+`npx hyperframes auth refresh`.
+
+```bash
+# Only needed if you haven't run `npx hyperframes auth login`:
+export HEYGEN_API_KEY=...   # or put it in a project .env
+
+# Synthesize + capture word timestamps in one call (skips a Whisper pass)
+node skills/media-use/audio/scripts/heygen-tts.mjs \
+  "Welcome to HyperFrames." -o narration.wav --words narration.words.json
+
+node skills/media-use/audio/scripts/heygen-tts.mjs ./script.txt -o narration.wav
+node skills/media-use/audio/scripts/heygen-tts.mjs --list   # public starfish voices
+```
+
+- **Voice:** `--voice <id>` must be a **starfish** voice_id (`--list`, or `GET /v3/voices?engine=starfish`) or one of your cloned voice ids (below). v2-catalog ids are rejected with HTTP 400. Omit `--voice` (English) and it defaults to **Marcia** (`05f19352e8f74b0392a8f411eba40de1`, a fixed default so the choice is deterministic). Non-English with no `--voice` falls back to the first matching catalog voice.
+- **Output:** `.wav` → transcoded to 44.1k mono via ffmpeg; `.mp3` → raw bytes (no ffmpeg needed).
+- **Words:** `--words <path>` writes the flat `[{id,text,start,end}]` shape below, drop-in for the captions pipeline. HeyGen's `<start>`/`<end>` boundary sentinels are filtered out and ids are re-contiguous.
+- **Non-English:** `--lang <code>` (anything but `en`) is sent as the request `language`.
+
+## Cloned voices — `scripts/heygen-voice.mjs`
+
+Clone a voice from an mp3 or wav recording, then pass the printed id to
+`heygen-tts.mjs --voice`. Same credential resolution as above. Any API refusal
+(clone limit reached, plan upgrade required, voice not found) prints HeyGen's own
+message to stderr and exits 1.
+
+```bash
+node skills/media-use/audio/scripts/heygen-voice.mjs clone take.mp3 --name "My voice"  # → {"voice_id":"..."}
+node skills/media-use/audio/scripts/heygen-voice.mjs list --prefix "My"   # → [{"voice_id","name","created_at"}]
+node skills/media-use/audio/scripts/heygen-voice.mjs delete <voice_id>
+```
+
+`clone` waits up to 120 s for the clone to finish. `list` reads
+`GET /v3/voices?type=private`.
+
+## When to use which provider
+
+| Goal                                                      | Use                                                       |
+| --------------------------------------------------------- | --------------------------------------------------------- |
+| Best voice quality + word timestamps in one call          | **HeyGen**                                                |
+| Drop-in cloud TTS, big voice catalog                      | **ElevenLabs**                                            |
+| Offline, no API key, fast iteration                       | **Kokoro**                                                |
+| Directed delivery with Gemini prebuilt or custom voices   | **Gemini** (explicit selection; transcription for timing) |
+| Non-English multilingual with deterministic phonemization | **Kokoro** (`ef_dora`, `jf_alpha`, `zf_xiaobei`, …)       |
+
+## Gemini narration
+
+Use the shared audio engine, not `hyperframes tts`. Authenticate with either:
+
+- `GEMINI_API_KEY` or `GOOGLE_API_KEY` (first set key wins).
+- A service-account JSON file at `GOOGLE_APPLICATION_CREDENTIALS`, or injected
+  JSON in `GCS_CREDS`. Install `google-auth requests` in the Python 3 environment
+  used by the helper. A configured file takes precedence over injected JSON.
+
+API keys take precedence over service accounts: unset both key variables to use
+OAuth. Never put credentials in a request file or composition. The helper
+obtains a fresh OAuth token for each generation with the
+`generative-language.retriever` scope. The quota project resolves from
+`GOOGLE_CLOUD_PROJECT`, then `GCLOUD_PROJECT_ID`, then the service-account JSON.
+User ADC files and metadata-server authentication are not supported.
+
+Both routes call the Gemini Developer Interactions API, not Cloud TTS or Vertex
+AI. Those APIs have separate model catalogs and access requirements.
+
+Save this as `audio_request.json` in the project:
+
+```json
+{
+  "provider": "gemini",
+  "tts_model": "gemini-3.8-flash-tts",
+  "voice": "Kore",
+  "lang": "en",
+  "style": "Warm, clear, conversational. Leave a short pause between sentences.",
+  "lines": [
+    { "id": "intro", "text": "Every word has a moment. Let the picture follow the voice." }
+  ],
+  "bgm": { "mode": "none" }
+}
+```
+
+```bash
+node <SKILL_DIR>/audio/scripts/audio.mjs \
+  --request ./audio_request.json --hyperframes . --out ./audio_meta.json --only tts
+```
+
+The engine saves `assets/voice/intro.wav` (or `intro-2.wav` when a file of yours already has that name; `voices[].path` says which), measures its duration, and transcribes
+it into `voices[].words` in `audio_meta.json`. Check that every requested line
+has audio and nonempty word timings before building a captioned video. Review
+the timings against the actual audio; transcription is estimated alignment,
+not native TTS timestamps. Do not distribute words evenly across a clip.
+
+- **Models:** `gemini-3.8-flash-tts` (default), `gemini-3.8-flash-lite-tts`,
+  `gemini-3.1-flash-tts-preview`, `gemini-2.5-pro-preview-tts`, and
+  `gemini-2.5-flash-preview-tts`. Use these exact Developer API IDs; Cloud TTS
+  aliases such as `gemini-2.5-flash-tts` are not accepted.
+- **Voice:** `Kore` by default; pass another prebuilt voice or an existing custom
+  voice ID for 3.8. Older models require prebuilt voices. Creating or replicating
+  voices is outside this helper.
+- **Delivery:** Put directions in `style`, not in spoken `text`. Each line can
+  override `style`. 3.8 uses structured annotations; older models receive a
+  delivery prompt before the transcript. Check that directions were not spoken.
+  Use style for pacing; numeric `speed` must be omitted or 1.
+- **Audio:** 3.8 returns a complete WAV. Older models return mono 16-bit PCM,
+  which the helper wraps as WAV at the returned sample rate without resampling.
+  No generation calls run during playback or rendering.
+- **Timing:** This adapter requests no native word timestamps. It uses the
+  existing transcription pass. `lang` selects transcription language; Gemini
+  infers speech language from the text.
+
+An API error is reported as a failed line; an explicitly chosen Gemini voice
+never silently falls back to another provider. Check the engine's anomalies
+and output metadata, not only its exit code.
+
+API contract: [Google's speech generation guide](https://ai.google.dev/gemini-api/docs/speech-generation).
+
+## ffmpeg requirement
+
+HeyGen + ElevenLabs return mp3. The bundled HeyGen helper transcodes to wav
+when `--output` ends in `.wav` (the default and what downstream `ffprobe` +
+Whisper expect). If you'd rather skip the transcode, pass `-o file.mp3`.
+Without `ffmpeg` on PATH, wav output from cloud providers fails; the local
+Kokoro CLI writes wav directly.
+
+## Voice selection (Kokoro)
+
+Default `af_heart`. Curated picks:
+
+| Content type      | Voice                  |
+| ----------------- | ---------------------- |
+| Product demo      | `af_heart`, `af_nova`  |
+| Tutorial / how-to | `am_adam`, `bf_emma`   |
+| Marketing / promo | `af_sky`, `am_michael` |
+| Documentation     | `bf_emma`, `bm_george` |
+| Casual / social   | `af_heart`, `af_sky`   |
+
+Run `npx hyperframes tts --list` for the bundled set.
+
+## Multilingual (Kokoro voice prefix → language)
+
+The first letter of a Kokoro voice ID picks the phonemizer language; `--lang` overrides auto-detection.
+
+| Prefix | Language             |
+| ------ | -------------------- |
+| `a`    | American English     |
+| `b`    | British English      |
+| `e`    | Spanish              |
+| `f`    | French               |
+| `h`    | Hindi                |
+| `i`    | Italian              |
+| `j`    | Japanese             |
+| `p`    | Brazilian Portuguese |
+| `z`    | Mandarin             |
+
+```bash
+npx hyperframes tts "La reunión empieza a las nueve" --voice ef_dora
+npx hyperframes tts "Today is a nice day" --voice af_heart
+```
+
+Valid `--lang` codes (only needed to override the voice's auto-detected language): `en-us`, `en-gb`, `es`, `fr-fr`, `hi`, `it`, `pt-br`, `ja`, `zh`.
+
+Non-English phonemization requires `espeak-ng` system-wide (`brew install espeak-ng` / `apt-get install espeak-ng`).
+
+## Speed
+
+- `0.7-0.8` — tutorial, complex content, accessibility
+- `1.0` — natural pace (default)
+- `1.1-1.2` — intros, transitions, upbeat content
+- `1.5+` — rarely appropriate, test carefully
+
+The `hyperframes tts` command honors `--speed` for Kokoro. Provider-specific
+helpers document their own pacing controls.
+
+## Long scripts
+
+Past a few paragraphs, write the text to a `.txt` file and pass the path. Inputs over ~5 minutes of speech may benefit from splitting into segments.
+
+## HeyGen word-timestamp shape
+
+When `--words <path>` is passed to a HeyGen call, the file is written in the same flat shape `transcribe` produces — drop-in compatible with the captions pipeline:
+
+```json
+[
+  { "id": "w0", "text": "Hi", "start": 0.0, "end": 0.21 },
+  { "id": "w1", "text": "there", "start": 0.22, "end": 0.55 }
+]
+```
+
+For ElevenLabs / Kokoro, run `npx hyperframes transcribe narration.wav --model small.en` to get the same shape.
diff --git a/.claude/skills/media-use/audio/scripts/audio.mjs b/.claude/skills/media-use/audio/scripts/audio.mjs
new file mode 100644
index 0000000..06cd766
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/audio.mjs
@@ -0,0 +1,310 @@
+#!/usr/bin/env node
+// audio.mjs — the shared HyperFrames audio engine. ONE implementation of TTS +
+// BGM + SFX. Callers do NOT vendor a copy: they write a neutral
+// `audio_request.json` (mapping their storyboard/scenes into it) and call:
+//
+//   node <MEDIA_DIR>/scripts/audio.mjs --request ./audio_request.json --hyperframes . --out ./audio_meta.json
+//
+// TTS and BGM degrade on ONE switch — whether HeyGen is configured (credential
+// present, NOT the CLI). SFX needs no credential. This mirrors ../SKILL.md:
+//
+//   TTS : HeyGen REST → ElevenLabs → Kokoro (CLI)
+//   BGM : HeyGen retrieve  → (no credential) Lyria/MusicGen generate
+//   SFX : Openverse (CC0 / CC BY) → (offline, rate limited, no match) bundled library
+//
+// ── audio_request.json (input) ────────────────────────────────────────────────
+//   {
+//     "provider": "auto",          // auto|heygen|elevenlabs|kokoro|gemini (override: --provider)
+//     "lang": "en", "speed": 1.0,
+//     "lines": [                   // one TTS unit each; id joins back to the caller's model
+//       { "id": "01", "text": "...", "sfx": ["whoosh", "ui click"] }
+//     ],
+//     "bgm": { "mode": "retrieve", // retrieve|generate|none (override: --bgm-mode / --no-bgm)
+//              "query": "calm cinematic underscore",   // mood for retrieval
+//              "prompt": null,      // full prompt for generation (else inferred)
+//              "blob": "...", "archetype": "...", "arc": "..." }  // optional mood-inference hints
+//   }
+//
+// ── audio_meta.json (output, id-keyed) ───────────────────────────────────────
+//   { tts_provider, voice_id,
+//     bgm: { path, volume, mode, query?, duration_s? } | null,
+//     bgm_pending, bgm_provider, bgm_pid, bgm_log, bgm_mode, bgm_target_duration_s, …,
+//     voices: [ { id, path, duration_s, words: [{id,text,start,end}] } ],
+//     sfx:    [ { id, name, file, source, offset_s, duration_s, volume, license?, credit? } ],
+//     total_duration_s }
+//
+// --only tts,bgm,sfx  runs a subset and MERGES into an existing --out (so a
+// caller can do TTS+BGM early, then SFX later once cues exist). When BGM uses
+// the generate path it is spawned detached (bgm_pending:true) — run wait-bgm.mjs
+// before assembling.
+
+import { existsSync, mkdirSync, readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { heygenAuthHeaders, heygenCredential, loadEnvFromDir } from "./lib/heygen.mjs";
+import {
+  ffprobeDuration,
+  pickProvider,
+  resolveVoiceId,
+  synthesizeOne,
+  transcribeWav,
+  withWordIds,
+} from "./lib/tts.mjs";
+import { generateBgmDetached, inferBgmPrompt, retrieveBgm } from "./lib/bgm.mjs";
+import { BUNDLED_SFX_DIR, resolveSfx } from "./lib/sfx.mjs";
+import { mapWithConcurrency } from "./lib/concurrency.mjs";
+import { openAudioMeta } from "./lib/audio-meta.mjs";
+import { recordInManifest, voicePaths, writtenAssets } from "./lib/media-record.mjs";
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const argv = process.argv.slice(2);
+const flag = (name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+const has = (name) => argv.includes(`--${name}`);
+const die = (m) => {
+  console.error(`✗ audio engine: ${m}`);
+  process.exit(1);
+};
+const r3 = (x) => Number(x.toFixed(3));
+
+// Two independent reports of an unbounded Promise.all over TTS lines
+// overwhelming a machine: one OOM'd 12/13 concurrent Kokoro TTS +
+// whisper-transcribe lines on a resource-constrained laptop, the other saw
+// 7/8 lines fail on first run (concurrent cold-start model loads) and pass on
+// retry once the model was cached. Kokoro/Whisper each load their own local
+// model per subprocess, so firing every line at once multiplies that cost by
+// the line count. mapWithConcurrency caps how many run at once — still
+// parallel, just bounded.
+const ttsConcurrency = Math.max(1, Number(process.env.HYPERFRAMES_TTS_CONCURRENCY) || 4);
+
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const requestPath = resolve(flag("request", join(hyperframesDir, "audio_request.json")));
+const outPath = resolve(flag("out", join(hyperframesDir, "audio_meta.json")));
+const sfxLibDir = resolve(flag("sfx-lib", BUNDLED_SFX_DIR));
+const lyriaRecipe = resolve(flag("lyria-recipe", join(HERE, "lyria-recipe.py")));
+const onlyArg = flag("only", "tts,bgm,sfx");
+const only = new Set(
+  onlyArg
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean),
+);
+const providerOverride = flag("provider", null);
+const bgmModeOverride = flag("bgm-mode", null);
+const noBgm = has("no-bgm");
+const voiceOverride = flag("voice", null);
+const speedOverride = flag("speed", null);
+const langOverride = flag("lang", null);
+const seedSeconds = Number(flag("seed-seconds", "28")) || 28;
+
+if (!existsSync(requestPath)) die(`audio_request.json not found at ${requestPath}`);
+let request;
+try {
+  request = JSON.parse(readFileSync(requestPath, "utf8"));
+} catch (e) {
+  die(`audio_request.json parse: ${e.message}`);
+}
+const lines = Array.isArray(request.lines) ? request.lines : [];
+const lang = langOverride || request.lang || "en";
+const speedInput = speedOverride ?? request.speed ?? 1;
+const speed = Number(speedInput);
+if (!(speed > 0 && speed <= 3))
+  die(`speed must be above 0 and at most 3, got ${JSON.stringify(speedInput)}`);
+
+// ── env + HeyGen availability (the single switch) ─────────────────────────────
+loadEnvFromDir(hyperframesDir);
+const heygenOK = heygenCredential() !== null;
+
+// ── merge base: preserve sections not selected by --only ──────────────────────
+const audioMeta = openAudioMeta(outPath);
+const prev = audioMeta.value;
+const anomalies = [];
+
+// ── TTS ───────────────────────────────────────────────────────────────────────
+let voices = prev.voices ?? [];
+let ttsProvider = prev.tts_provider ?? null;
+let voiceId = prev.voice_id ?? null;
+if (only.has("tts") && lines.length) {
+  try {
+    ttsProvider = pickProvider(
+      providerOverride || (request.provider === "auto" ? null : request.provider),
+    );
+  } catch (e) {
+    die(e.message);
+  }
+  voiceId = await resolveVoiceId({
+    provider: ttsProvider,
+    userVoice: voiceOverride || request.voice,
+    lang,
+  });
+  console.error(`· tts: ${ttsProvider} · voice ${voiceId} · ${lines.length} line(s)`);
+  const paths = voicePaths(hyperframesDir, lines, anomalies);
+  const synthLine = async (line) => {
+    const id = String(line.id);
+    const text = String(line.text ?? "").trim();
+    if (!text) {
+      anomalies.push(`line ${id}: empty text — skipped`);
+      return null;
+    }
+    const rel = paths.get(id);
+    const abs = join(hyperframesDir, rel);
+    const { ok, words, error } = await synthesizeOne({
+      provider: ttsProvider,
+      text,
+      voiceId,
+      lang,
+      speed,
+      model: flag("tts-model", request.tts_model),
+      style: flag("style", line.style ?? request.style),
+      wavAbs: abs,
+      hyperframesDir,
+    });
+    if (!ok) {
+      anomalies.push(`line ${id}: TTS failed — omitted${error ? ` (${error})` : ""}`);
+      return null;
+    }
+    let wordArr = words; // heygen: native; else transcribe
+    if (!wordArr) wordArr = await transcribeWav({ wavRel: rel, lang, hyperframesDir });
+    const dur = ffprobeDuration(abs);
+    if (!isFinite(dur) || dur <= 0) {
+      anomalies.push(`line ${id}: bad voice duration — omitted`);
+      return null;
+    }
+    return { id, path: rel, duration_s: r3(dur), words: withWordIds(wordArr) };
+  };
+  const results = await mapWithConcurrency(lines, ttsConcurrency, synthLine);
+  voices = results.filter(Boolean);
+  for (const v of voices)
+    console.error(`  voice ${v.id}: ${v.path} (${v.duration_s}s, ${v.words.length} words)`);
+}
+const hasVoice = voices.length > 0;
+const totalDuration = r3(voices.reduce((a, v) => a + (v.duration_s || 0), 0));
+
+// ── BGM ─────────────────────────────────────────────────────────────────────
+let bgm = prev.bgm ?? null;
+const bgmFields = {
+  bgm_pending: prev.bgm_pending ?? false,
+  bgm_provider: prev.bgm_provider ?? null,
+  bgm_pid: prev.bgm_pid ?? null,
+  bgm_log: prev.bgm_log ?? null,
+  bgm_mode: prev.bgm_mode ?? null,
+  bgm_target_duration_s: prev.bgm_target_duration_s ?? null,
+  bgm_seed_duration_s: prev.bgm_seed_duration_s ?? null,
+  bgm_loop_count: prev.bgm_loop_count ?? null,
+};
+if (only.has("bgm")) {
+  bgm = null;
+  Object.keys(bgmFields).forEach((k) => (bgmFields[k] = k === "bgm_pending" ? false : null));
+  // Mode resolution. An EXPLICIT mode (flag or request.bgm.mode) is strict:
+  // "retrieve" means retrieve-or-nothing — it never silently starts a detached
+  // generate (a caller with no wait-bgm step must not get a pending job it
+  // can't await). Only the UNSET/auto default picks generate
+  // when HeyGen is absent.
+  const explicitMode = bgmModeOverride || request.bgm?.mode || null;
+  let mode = noBgm ? "none" : explicitMode || (heygenOK ? "retrieve" : "generate");
+  if (mode === "retrieve" && !heygenOK) {
+    anomalies.push(
+      "bgm: retrieve requires a HeyGen credential — skipped (no generate fallback for an explicit retrieve)",
+    );
+    mode = "none";
+  }
+
+  if (mode === "none") {
+    console.error(`· bgm: disabled`);
+  } else if (mode === "retrieve") {
+    try {
+      bgm = await retrieveBgm({
+        query: request.bgm?.query,
+        headers: heygenAuthHeaders(),
+        hyperframesDir,
+        hasVoice,
+        anomalies,
+      });
+      if (bgm) {
+        bgmFields.bgm_provider = "heygen";
+        bgmFields.bgm_mode = "retrieve";
+        console.error(`  bgm: ${bgm.path} (retrieve "${bgm.query}")`);
+      } else {
+        anomalies.push(`bgm: no music match for "${request.bgm?.query ?? ""}" — skipped`);
+      }
+    } catch (e) {
+      anomalies.push(`bgm retrieve failed: ${e.message} — skipped`);
+    }
+  } else {
+    // generate
+    const prompt = inferBgmPrompt({
+      userPrompt: request.bgm?.prompt,
+      blob: request.bgm?.blob || request.bgm?.query,
+      archetype: request.bgm?.archetype,
+      arc: request.bgm?.arc,
+    });
+    const gen = generateBgmDetached({
+      prompt,
+      durationS: totalDuration || 30,
+      hyperframesDir,
+      lyriaRecipe: existsSync(lyriaRecipe) ? lyriaRecipe : null,
+      seedSeconds,
+      hasVoice,
+      anomalies,
+    });
+    if (gen.disabled) {
+      anomalies.push(`bgm: ${gen.reason}`);
+    } else {
+      bgm = { path: gen.path, volume: gen.volume, mode: gen.mode, duration_s: null };
+      bgmFields.bgm_pending = true;
+      bgmFields.bgm_provider = gen.provider;
+      bgmFields.bgm_pid = gen.pid;
+      bgmFields.bgm_log = gen.log;
+      bgmFields.bgm_mode = gen.mode;
+      bgmFields.bgm_target_duration_s = gen.target_duration_s ?? null;
+      bgmFields.bgm_seed_duration_s = gen.seed_duration_s ?? null;
+      bgmFields.bgm_loop_count = gen.loop_count ?? null;
+      console.error(`  bgm: launched ${gen.provider} (detached, pid ${gen.pid}) → ${gen.path}`);
+    }
+  }
+}
+
+// ── SFX ─────────────────────────────────────────────────────────────────────
+let sfx = prev.sfx ?? [];
+if (only.has("sfx")) {
+  const cues = lines.flatMap((l) =>
+    (Array.isArray(l.sfx) ? l.sfx : [])
+      .map((name) => ({ id: String(l.id), name: String(name).trim() }))
+      .filter((c) => c.name),
+  );
+  const res = await resolveSfx({ cues, hyperframesDir, sfxLibDir });
+  sfx = res.sfx;
+  anomalies.push(...res.anomalies);
+  const openverse = sfx.filter((s) => s.source === "openverse").length;
+  console.error(
+    `· sfx: ${sfx.length} cue(s) resolved (${openverse} Openverse, ${sfx.length - openverse} bundled library)`,
+  );
+}
+
+// ── write audio_meta.json ─────────────────────────────────────────────────────
+const meta = {
+  tts_provider: ttsProvider,
+  voice_id: voiceId,
+  bgm,
+  ...bgmFields,
+  voices,
+  sfx,
+  total_duration_s: totalDuration,
+};
+mkdirSync(dirname(outPath), { recursive: true });
+audioMeta.write(meta);
+const written = writtenAssets({ only, lines, voices, ttsProvider, bgm, bgmFields, sfx });
+anomalies.push(...recordInManifest(hyperframesDir, written));
+
+console.log(`✓ audio engine → ${outPath}`);
+console.log(`  heygen: ${heygenOK ? "yes" : "no"}  ·  ran: ${[...only].join(",")}`);
+console.log(
+  `  voices: ${voices.length}  ·  bgm: ${bgm ? `${bgmFields.bgm_provider}${bgmFields.bgm_pending ? " (pending)" : ""}` : "none"}  ·  sfx: ${sfx.length}`,
+);
+console.log(`  total voice duration: ${totalDuration}s`);
+if (anomalies.length) {
+  console.log(`\nanomalies (non-fatal):`);
+  for (const a of anomalies) console.log(`  - ${a}`);
+}
diff --git a/.claude/skills/media-use/audio/scripts/audio.test.mjs b/.claude/skills/media-use/audio/scripts/audio.test.mjs
new file mode 100644
index 0000000..3b82ae9
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/audio.test.mjs
@@ -0,0 +1,166 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mkdtempSync, mkdirSync, readFileSync, rmSync, existsSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+import { recordInManifest } from "./lib/media-record.mjs";
+import { resolveSfx } from "./lib/sfx.mjs";
+
+// Proves the relocated engine (skills/media-use/audio/) still resolves its
+// bundled SFX library from the moved location — the path most likely to break
+// on a subtree move. Openverse is unreachable unless a test serves it.
+const offline = async () => {
+  throw new TypeError("fetch failed");
+};
+globalThis.fetch = offline;
+
+const HERE = dirname(fileURLToPath(import.meta.url));
+const sfxLibDir = join(HERE, "..", "assets", "sfx"); // same offset the engine uses
+
+test("bundled SFX library resolves from the relocated path", async () => {
+  assert.ok(existsSync(join(sfxLibDir, "manifest.json")), "moved manifest is present");
+  const dir = mkdtempSync(join(tmpdir(), "mu-audio-"));
+  try {
+    const { sfx, anomalies } = await resolveSfx({
+      cues: [{ id: "1", name: "whoosh" }],
+      hyperframesDir: dir,
+      sfxLibDir,
+    });
+    assert.equal(sfx.length, 1, `expected 1 resolved cue, got anomalies: ${anomalies.join("; ")}`);
+    assert.equal(sfx[0].source, "local");
+    assert.match(sfx[0].file, /assets\/sfx\//);
+    assert.ok(existsSync(join(dir, sfx[0].file)), "matched SFX copied into the project");
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("an unknown cue is reported, not fatal", async () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-audio-"));
+  try {
+    const { sfx, anomalies } = await resolveSfx({
+      cues: [{ id: "1", name: "definitely-not-a-real-sfx" }],
+      hyperframesDir: dir,
+      sfxLibDir,
+    });
+    assert.equal(sfx.length, 0);
+    assert.ok(anomalies.some((a) => /not in bundled library/.test(a)));
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("a person's own file under a bundled name survives, and the cue gets the next free name", async () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-audio-"));
+  try {
+    const own = join(dir, "assets", "sfx", "whoosh.mp3");
+    mkdirSync(dirname(own), { recursive: true });
+    writeFileSync(own, "the person's own whoosh");
+    const resolve = () =>
+      resolveSfx({
+        cues: [{ id: "1", name: "whoosh" }],
+        hyperframesDir: dir,
+        sfxLibDir,
+      });
+
+    const first = await resolve();
+    const second = await resolve();
+
+    assert.equal(readFileSync(own, "utf8"), "the person's own whoosh");
+    assert.deepEqual(
+      [first, second].map(({ sfx }) => [sfx[0].file, sfx[0].source]),
+      [
+        ["assets/sfx/whoosh-2.mp3", "local"],
+        ["assets/sfx/whoosh-2.mp3", "local"],
+      ],
+    );
+    assert.deepEqual(
+      readFileSync(join(dir, "assets/sfx/whoosh-2.mp3")),
+      readFileSync(join(sfxLibDir, "whoosh.mp3")),
+    );
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("two effects never share a file when one's name is taken by the person, run after run", async () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-audio-"));
+  try {
+    mkdirSync(join(dir, "assets", "sfx"), { recursive: true });
+    writeFileSync(join(dir, "assets", "sfx", "glitch.mp3"), "the person's own glitch");
+    globalThis.fetch = async (url) => {
+      const query = new URL(url).searchParams.get("q");
+      if (query)
+        return Response.json({
+          results: [
+            {
+              license: "cc0",
+              filetype: "mp3",
+              duration: 500,
+              url: `https://sound.test/${encodeURIComponent(query)}`,
+            },
+          ],
+        });
+      return new Response(`bytes of ${new URL(url).pathname}`);
+    };
+    const run = async (names) => {
+      const { sfx } = await resolveSfx({
+        cues: names.map((name, index) => ({ id: String(index), name })),
+        hyperframesDir: dir,
+        sfxLibDir,
+      });
+      const files = sfx.map(({ file }) => file);
+      recordInManifest(
+        dir,
+        [...new Set(files)].map((path) => ({ path, type: "sfx", source: "search" })),
+      );
+      return files;
+    };
+    try {
+      assert.deepEqual(await run(["glitch"]), ["assets/sfx/glitch-2.mp3"]);
+      assert.deepEqual(await run(["glitch", "glitch 2", "glitch"]), [
+        "assets/sfx/glitch-2.mp3",
+        "assets/sfx/glitch-2-2.mp3",
+        "assets/sfx/glitch-2.mp3",
+      ]);
+    } finally {
+      globalThis.fetch = offline;
+    }
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+// The engine owns speed parsing; a fallback before the check would turn 0 or junk into 1.
+function runEngineWith(request, ...args) {
+  const dir = mkdtempSync(join(tmpdir(), "audio-speed-range-"));
+  try {
+    writeFileSync(join(dir, "audio_request.json"), JSON.stringify({ lines: [], ...request }));
+    return spawnSync(process.execPath, [join(HERE, "audio.mjs"), "--hyperframes", dir, ...args], {
+      encoding: "utf8",
+    });
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+for (const [label, request, args, shown] of [
+  ["request speed 5", { speed: 5 }, [], "5"],
+  ["request speed 0", { speed: 0 }, [], "0"],
+  ["request speed -1", { speed: -1 }, [], "-1"],
+  ["request speed text", { speed: "fast" }, [], '"fast"'],
+  ["--speed 0", {}, ["--speed", "0"], '"0"'],
+  ["--speed text", { speed: 1 }, ["--speed", "abc"], '"abc"'],
+]) {
+  test(`${label} stops the engine before any TTS runs`, () => {
+    const r = runEngineWith(request, ...args);
+    assert.equal(r.status, 1);
+    assert.ok(r.stderr.includes(`speed must be above 0 and at most 3, got ${shown}`), r.stderr);
+  });
+}
+
+test("a numeric string speed, as the adapters forward it, passes the check", () => {
+  assert.doesNotMatch(runEngineWith({ speed: "0.8" }, "--only", "tts").stderr, /speed must/);
+});
diff --git a/.claude/skills/media-use/audio/scripts/carve.mjs b/.claude/skills/media-use/audio/scripts/carve.mjs
new file mode 100644
index 0000000..4649117
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/carve.mjs
@@ -0,0 +1,560 @@
+#!/usr/bin/env node
+/**
+ * Apply a voiceover carve to a composition, from the command line.
+ *
+ * The carve is an analysis: it listens to a voice track, finds the bands it
+ * occupies, and writes a chain of dips into the music bed plus a level match. In
+ * Studio a panel runs it. This is the same analysis for an agent that has no
+ * panel to click — identical functions from `@hyperframes/core`, identical
+ * output, so a composition carved here and one carved in Studio are the same
+ * three attributes.
+ *
+ *   node carve.mjs --comp index.html
+ *   node carve.mjs --comp index.html --bed music-bed --voice narration \
+ *        --voice interview-guest --strength 0.45
+ *
+ * With no --bed/--voice it works out the tracks itself: the bed, and every voice
+ * playing over it. `--voice` may be repeated to name them instead. Every named
+ * voice is analysed together, so a bed running under a narrator and an answer makes
+ * room for both.
+ *
+ * Needs `ffmpeg` on PATH (to decode the audio) and `@hyperframes/core` resolvable
+ * from the composition's project (`npm i -D @hyperframes/core`) — the CLI bundles
+ * core inline rather than shipping it as a package, so it cannot be borrowed from
+ * there.
+ */
+
+import { execFileSync } from "node:child_process";
+import { createRequire } from "node:module";
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import { isMainModule } from "./lib/main-module.mjs";
+
+/** Sample rate the analysis runs at. Matches Studio's own decode rate, so the
+ *  bands and envelopes come out the same either way. */
+const SAMPLE_RATE = 48000;
+
+/** Default carve strength. 0.25 kept the bed present but still fighting the voice. */
+export const DEFAULT_STRENGTH = 0.8;
+
+const usage = `carve.mjs --comp <file.html> [--bed <elementId>] [--voice <elementId> ...]
+              [--strength 0..1] [--dry-run] [--core <dir>]
+
+  --bed       id of the music track that gets carved   (detected if omitted)
+  --voice     id of a voice to make room for; repeatable (detected if omitted)
+  --strength  how hard to carve, 0..1 (default ${DEFAULT_STRENGTH})
+  --dry-run   report what it would write, touch nothing
+  --core      directory to resolve @hyperframes/core from (default: the comp's)`;
+
+export function parseArgs(argv) {
+  const args = { strength: DEFAULT_STRENGTH, dryRun: false, voices: [] };
+  for (let i = 0; i < argv.length; i += 1) {
+    const flag = argv[i];
+    const next = () => {
+      const value = argv[i + 1];
+      if (value === undefined) fail(`${flag} needs a value`);
+      i += 1;
+      return value;
+    };
+    if (flag === "--comp") args.comp = next();
+    else if (flag === "--bed") args.bed = next();
+    else if (flag === "--voice") args.voices.push(next());
+    else if (flag === "--strength") args.strength = Number(next());
+    else if (flag === "--core") args.core = next();
+    else if (flag === "--dry-run") args.dryRun = true;
+    else if (flag === "-h" || flag === "--help") fail(usage, 0);
+    else fail(`unknown flag: ${flag}\n\n${usage}`);
+  }
+  if (!args.comp) fail(`--comp is required\n\n${usage}`);
+  if (!Number.isFinite(args.strength) || args.strength < 0 || args.strength > 1) {
+    fail("--strength must be a number from 0 to 1");
+  }
+  return args;
+}
+
+function fail(message, code = 1) {
+  process.stderr.write(`${message}\n`);
+  process.exit(code);
+}
+
+/**
+ * Load the carve analysis out of `@hyperframes/core`.
+ *
+ * Resolved from the project rather than from this script, which lives wherever
+ * the skill was installed — a sibling of the composition is what has the
+ * dependency.
+ */
+export async function loadCore(fromDir) {
+  const require = createRequire(pathToFileURL(resolve(fromDir, "package.json")));
+
+  /*
+   * Two constraints at once, and satisfying either alone is broken:
+   *
+   *   1. Anchored at the PROJECT, not at this script. This file lives wherever
+   *      the skill was installed, which has no @hyperframes/core; the
+   *      composition's project is what holds the dependency. So a bare
+   *      `import("@hyperframes/core/audio-carve")` from here cannot work — bare
+   *      specifiers resolve relative to the importing module.
+   *   2. Honouring the package's export CONDITIONS. `require.resolve` asks for
+   *      "require"/"node". The workspace manifest declares `node`, so this
+   *      resolved fine inside the monorepo — but the PUBLISHED manifest carries
+   *      only `import` + `types`, so every consumer of the released package got
+   *      ERR_PACKAGE_PATH_NOT_EXPORTED for a package that ships the file. That
+   *      is the audience this skill is shipped to, so the script was broken
+   *      everywhere except where it was developed.
+   *
+   * Keep the project anchor; fall back to the package's declared `import`
+   * target when no require-resolvable condition exists.
+   */
+  const load = async (subpath) => {
+    const spec = `@hyperframes/core/${subpath}`;
+    try {
+      return await import(pathToFileURL(require.resolve(spec)).href);
+    } catch (error) {
+      if (error?.code !== "ERR_PACKAGE_PATH_NOT_EXPORTED") throw error;
+      // `./package.json` is exported by every manifest, so this always resolves
+      // and gives us the package root without guessing at node_modules layout.
+      const pkgPath = require.resolve("@hyperframes/core/package.json");
+      const pkg = JSON.parse(readFileSync(pkgPath, "utf-8"));
+      const entry = pkg.exports?.[`./${subpath}`];
+      const target = typeof entry === "string" ? entry : (entry?.import ?? entry?.default ?? null);
+      if (!target) {
+        fail(
+          `@hyperframes/core does not export ./${subpath}\n` +
+            `  found at: ${pkgPath} (version ${pkg.version})\n` +
+            `  update it:  npm i -D @hyperframes/core`,
+        );
+      }
+      return import(pathToFileURL(resolve(dirname(pkgPath), target)).href);
+    }
+  };
+
+  try {
+    return {
+      carve: await load("audio-carve"),
+      fx: await load("audio-fx"),
+    };
+  } catch (error) {
+    fail(
+      `cannot load @hyperframes/core from ${fromDir}\n` +
+        `  is it installed there?  npm i -D @hyperframes/core\n` +
+        `  or point at one:   --core <dir containing node_modules/@hyperframes/core>\n` +
+        `  (${error.code ?? "error"}: ${error.message.split("\n")[0]})`,
+    );
+  }
+}
+
+/**
+ * The `sources` a carve should record for these voices, on this bed.
+ *
+ * SKILL.md states the invariant: "A carve against more than one clip id is
+ * wrong. Group the clips and carve against the group." Naming the group lets
+ * `resolveCarveSourceIds` resolve membership at analysis time, so a voice added
+ * later is covered without editing `sources` — whereas a list of clip ids rots
+ * silently the moment a fourth narration clip appears. The lint rule
+ * `audio_carve_ungrouped_sources` enforces exactly this.
+ *
+ * This script was writing clip ids unconditionally, so it violated its own
+ * skill's invariant and tripped its own lint rule on every run. When every
+ * voice shares one group, record the group. Mixed or ungrouped voices keep
+ * their ids, and the lint rule then correctly tells the author to group them.
+ *
+ * The bed has to be part of the decision, because the group form resolves
+ * LATER and wider than it looks. If the bed is itself a member of the voices'
+ * group, `resolveCarveSourceIds` expands that id to every current member on the
+ * next analysis — including the bed — and the bed ends up carved against
+ * itself, which SKILL.md calls a bug rather than a mix choice. This run cannot
+ * see it: `main()` sums the voice list it detected and never round-trips
+ * through group resolution, so the first pass is correct and only the next
+ * re-analysis in Studio is wrong. So decline the group form there and fall back
+ * to clip ids, which is exactly the case `audio_carve_ungrouped_sources` exists
+ * to put in front of the author.
+ *
+ * Only an `<audio>` bed can trip it: group membership is audio-only
+ * (`audioGroupOf`), so `data-audio-group` on a `<video>` bed is ignored by core
+ * and expanding a group can never pull it in.
+ */
+export function carveSources(voices, bed, members) {
+  const group = sharedVoiceGroup(voices);
+  return group && !groupSourceRefusal(voices, bed, members) ? [group] : voices.map((v) => v.id);
+}
+
+/** The one group every voice belongs to, or null if they do not share exactly one. */
+function sharedVoiceGroup(voices) {
+  const groups = voices.map((v) => attrOf(v.tag, "data-audio-group"));
+  const first = groups[0];
+  return Boolean(first) && groups.every((g) => g === first) ? first : null;
+}
+
+/**
+ * Why naming the voices' shared group would persist something this run did not
+ * analyse — or null when the group is safe to name.
+ *
+ * `members` is every `<audio>` in the composition as `{id, group, nameKind}`,
+ * with `nameKind` from core's `classifyAudioName`, so this and Studio's picker
+ * classify the same way.
+ *
+ * Required, deliberately not defaulting to `[]`. With an empty list the `mixed`
+ * refusal below cannot fire, so a call that forgot the argument would return the
+ * group form and restore the exact behaviour this function exists to prevent —
+ * silently, because the first CLI pass is correct either way and only a later
+ * Studio re-analysis is wrong. A missing argument throws on `members.filter`
+ * instead.
+ *
+ * Two refusals, and both exist because the group form resolves LATER and WIDER
+ * than the analysis: `resolveCarveSourceIds` expands a group id to every current
+ * member on every analysis, and `resolveCarveVoices` keeps any audio member with
+ * a src. `main()` meanwhile sums the voice list `detectTracks` returned, so the
+ * first pass looks correct however wrong the persisted attribute is.
+ *
+ *   `bed`   — the bed is a member, so it would be handed to itself as a voice
+ *             and carved against its own content.
+ *   `mixed` — a member classified music or sfx is not a voice this run measured,
+ *             so it would enter the sidechain on the next analysis and duck the
+ *             bed under a whoosh.
+ *
+ * Deliberately NOT a refusal: a member classified `voice` or `unknown` that this
+ * run left out. That is the group form working as designed — `detectTracks` only
+ * takes voices that overlap the bed, and picking up a clip that starts playing
+ * later without an edit to `sources` is the whole reason SKILL.md says to name
+ * the group. Refusing there would collapse the group form into clip ids for
+ * every ordinary narration sequence.
+ */
+export function groupSourceRefusal(voices, bed, members) {
+  const group = sharedVoiceGroup(voices);
+  if (!group) return null;
+  if (bed?.kind === "audio" && attrOf(bed.tag, "data-audio-group") === group) {
+    return { group, reason: "bed", ids: [bed.id] };
+  }
+  const analysed = new Set(voices.map((v) => v.id));
+  const strays = members
+    .filter(
+      (m) =>
+        m.group === group &&
+        !analysed.has(m.id) &&
+        (m.nameKind === "music" || m.nameKind === "sfx"),
+    )
+    .map((m) => m.id);
+  return strays.length > 0 ? { group, reason: "mixed", ids: strays } : null;
+}
+
+/** Mono float PCM for one media file, via ffmpeg. */
+function decode(path) {
+  let raw;
+  try {
+    raw = execFileSync(
+      "ffmpeg",
+      [
+        "-v",
+        "error",
+        "-i",
+        path,
+        "-vn",
+        "-ac",
+        "1",
+        "-ar",
+        String(SAMPLE_RATE),
+        "-f",
+        "f32le",
+        "-",
+      ],
+      { maxBuffer: 1 << 30 },
+    );
+  } catch (error) {
+    fail(`could not decode ${path}\n  ${error.message.split("\n")[0]}`);
+  }
+  if (raw.length === 0) fail(`no audio in ${path}`);
+  return new Float32Array(raw.buffer, raw.byteOffset, raw.length / 4);
+}
+
+const attrOf = (tag, name) => tag.match(new RegExp(`\\s${name}="([^"]*)"`, "i"))?.[1] ?? null;
+
+const unescapeAttr = (value) =>
+  value
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;/g, "&");
+
+const escapeAttr = (value) => value.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+
+/** Every media element with a src, as {id, tag, kind}. */
+function mediaElements(html) {
+  const found = [];
+  for (const match of html.matchAll(/<(audio|video)\b[^>]*>/gi)) {
+    const tag = match[0];
+    // `\sid=` and not `id=`: `data-hf-id` would match first.
+    const id = tag.match(/\sid="([^"]+)"/)?.[1];
+    if (id && attrOf(tag, "src")) found.push({ id, tag, kind: match[1].toLowerCase() });
+  }
+  return found;
+}
+
+/**
+ * Work out which track is the bed and which tracks are its voices.
+ *
+ * Names first, because they are what the author already told us and the answer is
+ * explainable: a track whose id or filename looks like music is the bed, ones that
+ * look like speech are voices, SFX-shaped names are neither. `classifyAudioName`
+ * comes from core so Studio's own picker and this cannot disagree.
+ *
+ * EVERY voice over the bed, not one of them. A bed usually runs under a whole
+ * sequence, and they are analysed together — so there is nothing to disambiguate,
+ * which is why this no longer refuses when several tracks look like speech.
+ *
+ * Only tracks that actually play while the bed does: one somewhere else on the
+ * timeline cannot mask it. It still refuses when it cannot find a bed at all, or
+ * finds no voice to make room for.
+ */
+function detectTracks(html, given, classify, overlaps) {
+  const all = mediaElements(html);
+  const kindOf = (el) => classify(el.id, unescapeAttr(attrOf(el.tag, "src") ?? ""));
+  const spanOf = (el) => {
+    const raw = attrOf(el.tag, "data-duration");
+    const n = raw === null ? Number.NaN : Number(raw);
+    return {
+      start: startOf(el.tag),
+      duration: Number.isFinite(n) ? n : null,
+    };
+  };
+  const pick = (id, what) => {
+    const found = all.find((el) => el.id === id);
+    if (!found) fail(`no <audio>/<video> with id="${id}" in the composition`);
+    return { ...found, why: `--${what}` };
+  };
+
+  let bed = given.bed ? pick(given.bed, "bed") : null;
+  const named = given.voices.map((id) => pick(id, "voice"));
+
+  if (!bed) {
+    const others = all.filter((el) => !named.some((v) => v.id === el.id));
+    const music = others.filter((el) => kindOf(el) === "music");
+    if (music.length === 1) bed = { ...music[0], why: "name looks like music" };
+    else if (music.length > 1) {
+      fail(
+        `several tracks look like music (${music.map((el) => el.id).join(", ")}) — name one with --bed`,
+      );
+    } else if (others.length === 1) {
+      bed = { ...others[0], why: "only track left" };
+    } else {
+      fail(
+        `cannot tell which track is the music bed\n` +
+          `  media in the composition: ${all.map((el) => el.id).join(", ") || "none"}\n` +
+          `  name it with --bed`,
+      );
+    }
+  }
+
+  const bedSpan = spanOf(bed);
+  const overlapping = (el) => overlaps(bedSpan, spanOf(el));
+  const plausible = all
+    .filter((el) => el.id !== bed.id && kindOf(el) !== "music" && kindOf(el) !== "sfx")
+    .filter(overlapping);
+  // A voiceover is normally its own <audio>. Video counts only when no audio track
+  // is left to be the voice — a talking-head recut — because otherwise every B-roll
+  // clip in the composition reads as somebody talking.
+  const spoken = plausible.filter((el) => el.kind === "audio");
+  const pool = spoken.length > 0 ? spoken : plausible;
+  const voices = named.length
+    ? named
+    : pool.map((el) => ({
+        ...el,
+        why: kindOf(el) === "voice" ? "name looks like a voice" : "plays over the bed",
+      }));
+
+  const usable = voices.filter((el) => attrOf(el.tag, "src"));
+  if (usable.length === 0) {
+    fail(
+      `no voice to make room for on ${bed.id}\n` +
+        `  media in the composition: ${all.map((el) => el.id).join(", ") || "none"}\n` +
+        `  name one with --voice`,
+    );
+  }
+  return { bed, voices: usable, all };
+}
+
+const startOf = (tag) => {
+  const raw = Number(attrOf(tag, "data-start"));
+  return Number.isFinite(raw) ? raw : 0;
+};
+
+async function main() {
+  const args = parseArgs(process.argv.slice(2));
+  const compPath = resolve(args.comp);
+  const compDir = dirname(compPath);
+  const { carve: carveApi, fx: fxApi } = await loadCore(args.core ? resolve(args.core) : compDir);
+
+  const html = readFileSync(compPath, "utf-8");
+  const {
+    bed: bedEl,
+    voices,
+    all: media,
+  } = detectTracks(html, args, carveApi.classifyAudioName, carveApi.clipsOverlap);
+  // Group membership + name classification for every audio track, so the source
+  // decision can see what the group will resolve to later and not just what this
+  // run analysed.
+  const members = media
+    .filter((el) => el.kind === "audio")
+    .map((el) => ({
+      id: el.id,
+      group: attrOf(el.tag, "data-audio-group"),
+      nameKind: carveApi.classifyAudioName(el.id, unescapeAttr(attrOf(el.tag, "src") ?? "")),
+    }));
+  const bedTag = bedEl.tag;
+  const bedSrc = attrOf(bedTag, "src");
+  process.stdout.write(
+    `bed    ${bedEl.id} (${bedEl.why})\n` +
+      voices.map((v) => `voice  ${v.id} (${v.why})`).join("\n") +
+      "\n",
+  );
+
+  const profile = carveApi.carveProfile(args.strength);
+  // Every voice summed onto the BED's clock before anything is measured. One
+  // question — where and when is speech masking this bed — with one answer, even
+  // when the answer comes from several people at different times.
+  const voice = carveApi.mixCarveSources(
+    voices.map((v) => ({
+      samples: decode(resolve(compDir, unescapeAttr(attrOf(v.tag, "src")))),
+      offsetSeconds: startOf(v.tag) - startOf(bedTag),
+    })),
+    SAMPLE_RATE,
+  );
+  if (voice.length === 0) fail("the voices do not overlap the bed, so there is nothing to carve");
+  const bands = carveApi.analyseCarveBands(voice, SAMPLE_RATE, profile);
+
+  // The level half of the carve needs both sides: "how far over the speech is this
+  // bed" cannot be answered by listening to one of them. No offset — the mix is
+  // already on the bed's clock.
+  const bed = profile.duckDb > 0 ? decode(resolve(compDir, unescapeAttr(bedSrc))) : null;
+  const duck = bed ? carveApi.analyseCarveDuck(voice, bed, SAMPLE_RATE, profile, 0) : [];
+
+  // Anything the author built by hand survives a carve; only the previous
+  // carve's own nodes are replaced. That is what `fromCarve` is for.
+  const existingChain = attrOf(bedTag, "data-fx-chain");
+  const existingNodes = existingChain
+    ? fxApi.parseAudioFxChain(unescapeAttr(existingChain)).nodes
+    : [];
+  const kept = existingNodes.filter((n) => !n.fromCarve);
+  // Lanes belonging to the carve being replaced, addressed by the ids the OLD
+  // nodes had. Taken before anything is minted: those ids are freed by the
+  // replacement and a new node can be handed one of them, so reading them off the
+  // new chain would keep exactly the stale lanes it is supposed to drop.
+  const stalePrefixes = existingNodes.filter((n) => n.fromCarve && n.id).map((n) => `fx.${n.id}.`);
+
+  let claimed = { version: 1, nodes: kept };
+  const mint = (node) => {
+    const withId = { ...node, id: fxApi.mintAudioFxNodeId(claimed), fromCarve: true };
+    claimed = { version: 1, nodes: [...claimed.nodes, withId] };
+    return withId;
+  };
+  const bandNodes = bands.map((band) => mint(carveApi.carveBandsToChain([band]).nodes[0]));
+
+  const duckNode =
+    duck.length > 0
+      ? mint({
+          type: "gain",
+          enabled: true,
+          params: {
+            ...fxApi.defaultAudioFxParams("gain"),
+            gain: 0,
+          },
+        })
+      : null;
+  const chain = {
+    version: 1,
+    nodes: [...bandNodes, ...(duckNode ? [duckNode] : []), ...kept],
+  };
+
+  /**
+   * One carve envelope as a lane on the BED's clock.
+   *
+   * Nothing to shift: the voices were summed onto that clock before the analysis
+   * ran. A lane does hold its first value backwards to the start of its clip, so an
+   * envelope that begins later needs an explicit "no cut" at zero or the bed starts
+   * out ducked.
+   */
+  const laneFor = (id, points) => {
+    const timed = points
+      .map((p) => ({ t: Number(p.t.toFixed(3)), v: p.v }))
+      .filter((p) => p.t >= 0);
+    if ((timed[0]?.t ?? 0) > 0) timed.unshift({ t: 0, v: 0 });
+    return timed.length > 1 ? [{ target: `fx.${id}.gain`, points: timed }] : [];
+  };
+
+  // Every carve follows the speech: a fixed depth thins the bed through every pause.
+  const carvedLanes = [
+    ...carveApi
+      .analyseCarveDynamics(voice, SAMPLE_RATE, bands)
+      .flatMap((dyn, i) => (bandNodes[i]?.id ? laneFor(bandNodes[i].id, dyn.points) : [])),
+    ...(duckNode?.id && duck.length > 0 ? laneFor(duckNode.id, duck) : []),
+  ];
+
+  // Hand-drawn lanes are kept the same way hand-built nodes are: by dropping only
+  // the ones that addressed the previous carve's nodes.
+  const existingAutomation = attrOf(bedTag, "data-automation");
+  const carriedLanes = existingAutomation
+    ? (JSON.parse(unescapeAttr(existingAutomation)).lanes ?? []).filter(
+        (lane) => !stalePrefixes.some((prefix) => String(lane.target).startsWith(prefix)),
+      )
+    : [];
+  const lanes = [...carriedLanes, ...carvedLanes];
+
+  const settings = {
+    enabled: true,
+    sources: carveSources(voices, bedEl, members),
+    strength: args.strength,
+  };
+  // Say why the group form was declined, or the lint rule tells the author to
+  // group clips they have already grouped.
+  const refusal = groupSourceRefusal(voices, bedEl, members);
+  if (refusal) {
+    process.stderr.write(
+      refusal.reason === "bed"
+        ? `note   bed ${bedEl.id} is in group "${refusal.group}" with the voices, so\n` +
+            `       sources are clip ids: naming that group would carve the bed\n` +
+            `       against itself on the next analysis. Move the bed to its own group.\n`
+        : `note   group "${refusal.group}" also holds ${refusal.ids.join(", ")}, which this run\n` +
+            `       did not analyse (music/sfx by name), so sources are clip ids: naming\n` +
+            `       the group would pull them into the sidechain on the next analysis.\n` +
+            `       Move them out of the voice group.\n`,
+    );
+  }
+  const written =
+    ` data-fx-carve="${escapeAttr(JSON.stringify(settings))}"` +
+    ` data-fx-chain="${escapeAttr(fxApi.serializeAudioFxChain(chain))}"` +
+    (lanes.length > 0
+      ? ` data-automation="${escapeAttr(JSON.stringify({ version: 1, lanes }))}"`
+      : "");
+
+  process.stdout.write(
+    `carve  strength ${args.strength}, ${voices.length} voice${voices.length === 1 ? "" : "s"}\n` +
+      `bands  ${bands.map((b) => `${b.freq}Hz ${b.gainDb}dB q${b.q}`).join(", ")}\n` +
+      `level  ${
+        duckNode
+          ? `${duck.length}-point envelope, floor ${Math.min(...duck.map((p) => p.v))} dB`
+          : "no level match at this strength"
+      }\n` +
+      `lanes  ${carvedLanes.length} carve${carriedLanes.length ? ` + ${carriedLanes.length} kept` : ""}\n`,
+  );
+  if (args.dryRun) {
+    process.stdout.write("dry run: nothing written\n");
+    return;
+  }
+
+  let stripped = bedTag;
+  for (const attr of ["data-fx-carve", "data-fx-chain", "data-automation"]) {
+    stripped = stripped.replace(new RegExp(`\\s${attr}="[^"]*"`, "i"), "");
+  }
+  // Inserted before the tag's own closing ">", which is the only place they can
+  // go: `stripped` is the opening tag alone, so appending would land outside it.
+  const nextTag = stripped.replace(/\/?>$/, (close) => `${written}${close}`);
+  if (nextTag === stripped) fail("attribute write produced no change — refusing to save");
+  writeFileSync(compPath, html.replace(bedTag, nextTag));
+  process.stdout.write(`wrote ${args.comp} (id="${bedEl.id}")\n`);
+}
+
+// Only run as a CLI. Guarded so the pure helpers above can be unit-tested by
+// importing this module (`skills/**/*.test.mjs`, run by `bun run test:skills`).
+if (isMainModule(import.meta.url)) {
+  await main();
+}
diff --git a/.claude/skills/media-use/audio/scripts/carve.test.mjs b/.claude/skills/media-use/audio/scripts/carve.test.mjs
new file mode 100644
index 0000000..bb85137
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/carve.test.mjs
@@ -0,0 +1,254 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { execFileSync } from "node:child_process";
+import { mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+  DEFAULT_STRENGTH,
+  carveSources,
+  groupSourceRefusal,
+  loadCore,
+  parseArgs,
+} from "./carve.mjs";
+
+const SCRIPTS_DIR = dirname(fileURLToPath(import.meta.url));
+
+/** A voice as `detectTracks` yields it: an id plus its raw opening tag. */
+function voice(id, group) {
+  const attr = group === undefined ? "" : ` data-audio-group="${group}"`;
+  return { id, tag: `<audio id="${id}"${attr} src="${id}.wav"></audio>` };
+}
+
+/** An audio member as `main` describes it for the source decision. */
+function member(id, group, nameKind) {
+  return { id, group, nameKind };
+}
+
+/** A bed as `mediaElements` yields it: `kind` is what decides group membership. */
+function bed(id, group, kind = "audio") {
+  const attr = group === undefined ? "" : ` data-audio-group="${group}"`;
+  return { id, kind, tag: `<${kind} id="${id}"${attr} src="${id}.mp3"></${kind}>` };
+}
+
+async function inTempDir(run) {
+  const dir = mkdtempSync(join(tmpdir(), "carve-test-"));
+  try {
+    return await run(dir);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+test("voices sharing one group carve against the group, not their ids", () => {
+  // SKILL.md's invariant: "A carve against more than one clip id is wrong.
+  // Group the clips and carve against the group." Naming the group lets
+  // membership resolve at analysis time, so a voice added later is covered.
+  const voices = [voice("vo1", "voiceover"), voice("vo2", "voiceover"), voice("vo3", "voiceover")];
+  assert.deepEqual(carveSources(voices, undefined, []), ["voiceover"]);
+});
+
+test("a single grouped voice still records the group", () => {
+  assert.deepEqual(carveSources([voice("vo1", "voiceover")], undefined, []), ["voiceover"]);
+});
+
+test("ungrouped voices keep their ids, so the lint rule can still say so", () => {
+  // Not silently inventing a group: `audio_carve_ungrouped_sources` is the
+  // right signal here, and it needs the ids to fire on.
+  assert.deepEqual(carveSources([voice("vo1"), voice("vo2")], undefined, []), ["vo1", "vo2"]);
+});
+
+test("voices in DIFFERENT groups keep their ids", () => {
+  // One carve cannot name two groups, and picking either would silently drop
+  // the other's members from the analysis.
+  const voices = [voice("vo1", "narration"), voice("vo2", "interview")];
+  assert.deepEqual(carveSources(voices, undefined, []), ["vo1", "vo2"]);
+});
+
+test("a partially grouped set keeps its ids", () => {
+  const voices = [voice("vo1", "voiceover"), voice("vo2")];
+  assert.deepEqual(carveSources(voices, undefined, []), ["vo1", "vo2"]);
+});
+
+test("an empty group attribute is not a group", () => {
+  assert.deepEqual(carveSources([voice("vo1", ""), voice("vo2", "")], undefined, []), [
+    "vo1",
+    "vo2",
+  ]);
+});
+
+// The nine cases above pass `[]` explicitly because they predate the membership
+// check and are about the bed and the group attributes alone. `members` is a
+// required argument: with `[]` the `mixed` refusal cannot fire, so a default
+// would let a call that forgot it return the group form and silently undo the
+// widening fix — see the wiring test at the bottom of this file.
+
+test("a bed inside the voices' group keeps clip ids, so it is never its own source", () => {
+  // `resolveCarveSourceIds` expands a group to every CURRENT member, and it gets
+  // no host element to exclude — so naming a group the bed belongs to puts the
+  // bed in its own voice list on the next analysis, and it is carved against
+  // itself. This run cannot see it (main sums the detected voices directly), so
+  // the check has to happen here.
+  const voices = [voice("vo1", "mix"), voice("vo2", "mix")];
+  assert.deepEqual(carveSources(voices, bed("bgm", "mix"), []), ["vo1", "vo2"]);
+});
+
+test("a bed in a DIFFERENT group leaves the group form alone", () => {
+  const voices = [voice("vo1", "voiceover"), voice("vo2", "voiceover")];
+  assert.deepEqual(carveSources(voices, bed("bgm", "music"), []), ["voiceover"]);
+});
+
+test("an ungrouped bed leaves the group form alone", () => {
+  assert.deepEqual(carveSources([voice("vo1", "voiceover")], bed("bgm"), []), ["voiceover"]);
+});
+
+test("a VIDEO bed is immune — group membership is audio-only", () => {
+  // `data-audio-group` on a <video> is ignored by core, so expanding the group
+  // can never pull this bed in and declining would be a false positive.
+  const voices = [voice("vo1", "mix"), voice("vo2", "mix")];
+  assert.deepEqual(carveSources(voices, bed("clip", "mix", "video"), []), ["mix"]);
+});
+
+test("an sfx member of the voices' group blocks the group form", () => {
+  // The group resolves wider than the analysis: `resolveCarveSourceIds` expands
+  // it to every current member and `resolveCarveVoices` keeps any audio with a
+  // src, so an sfx clip sharing the voice group enters the sidechain on the next
+  // analysis and ducks the bed under a whoosh. This run cannot see it — it sums
+  // the voices `detectTracks` returned, which correctly excluded the sfx.
+  const voices = [voice("vo1", "voiceover"), voice("vo2", "voiceover")];
+  const members = [
+    member("vo1", "voiceover", "voice"),
+    member("vo2", "voiceover", "voice"),
+    member("whoosh", "voiceover", "sfx"),
+    member("bgm", "music", "music"),
+  ];
+  assert.deepEqual(carveSources(voices, bed("bgm", "music"), members), ["vo1", "vo2"]);
+});
+
+test("a music member of the voices' group blocks it too", () => {
+  const voices = [voice("vo1", "voiceover")];
+  const members = [member("vo1", "voiceover", "voice"), member("pad", "voiceover", "music")];
+  assert.deepEqual(carveSources(voices, bed("bgm", "music"), members), ["vo1"]);
+});
+
+test("a voice member this run did NOT analyse keeps the group form", () => {
+  // The designed case, and the one a membership check must not break: a voice
+  // that does not overlap the bed is left out of the analysis on purpose, and
+  // covering it on a later analysis without editing `sources` is the entire
+  // reason SKILL.md says to name the group. Refusing here would collapse the
+  // group form into clip ids for every ordinary narration sequence.
+  const voices = [voice("vo1", "voiceover"), voice("vo2", "voiceover")];
+  const members = [
+    member("vo1", "voiceover", "voice"),
+    member("vo2", "voiceover", "voice"),
+    member("vo-outro", "voiceover", "voice"),
+  ];
+  assert.deepEqual(carveSources(voices, bed("bgm", "music"), members), ["voiceover"]);
+});
+
+test("an unclassifiable member keeps the group form", () => {
+  // `unknown` is what `detectTracks` itself treats as a possible voice, so it is
+  // not evidence of a non-voice member — loose in the safe direction, same as
+  // detection.
+  const voices = [voice("vo1", "voiceover")];
+  const members = [member("vo1", "voiceover", "voice"), member("track7", "voiceover", "unknown")];
+  assert.deepEqual(carveSources(voices, bed("bgm", "music"), members), ["voiceover"]);
+});
+
+test("an sfx member of a DIFFERENT group is irrelevant", () => {
+  const voices = [voice("vo1", "voiceover")];
+  const members = [member("vo1", "voiceover", "voice"), member("whoosh", "sfx", "sfx")];
+  assert.deepEqual(carveSources(voices, bed("bgm", "music"), members), ["voiceover"]);
+});
+
+test("groupSourceRefusal names which member blocked the group, and why", () => {
+  // The stderr note is built from this, so it has to carry the ids: "sources are
+  // clip ids" plus `audio_carve_ungrouped_sources` reads as nonsense to an author
+  // who did group their clips.
+  const voices = [voice("vo1", "voiceover"), voice("vo2", "voiceover")];
+  assert.deepEqual(
+    groupSourceRefusal(voices, bed("bgm", "music"), [member("whoosh", "voiceover", "sfx")]),
+    { group: "voiceover", reason: "mixed", ids: ["whoosh"] },
+  );
+  assert.deepEqual(groupSourceRefusal(voices, bed("bgm", "voiceover"), []), {
+    group: "voiceover",
+    reason: "bed",
+    ids: ["bgm"],
+  });
+  assert.equal(groupSourceRefusal(voices, bed("bgm", "music"), []), null);
+});
+
+test("the CLI still runs when invoked through a symlinked path", () => {
+  // argv[1] keeps the invoked spelling while import.meta.url is the realpath, so
+  // a raw compare in the entry guard skips main() and the CLI exits 0 having
+  // written nothing. macOS /tmp -> /private/tmp reaches this with no symlink of
+  // one's own; so does any skill install placed behind a link.
+  return inTempDir((dir) => {
+    const link = join(dir, "scripts-link");
+    symlinkSync(SCRIPTS_DIR, link, "junction");
+    let status = 0;
+    let stderr = "";
+    try {
+      execFileSync(process.execPath, [join(link, "carve.mjs")], { encoding: "utf-8" });
+    } catch (error) {
+      status = error.status;
+      stderr = String(error.stderr);
+    }
+    // Reaching parseArgs is the proof main() ran at all: no args is an error, and
+    // the broken guard's symptom is a silent exit 0 with no output.
+    assert.equal(status, 1, `expected the usage error, got status ${status}`);
+    assert.match(stderr, /--comp is required/);
+  });
+});
+
+test("loadCore honours an import-only export map, as the published core has", () => {
+  // The published manifest carries only `import` + `types` for these subpaths, so
+  // `require.resolve` cannot resolve them at all and the fallback has to read the
+  // export map itself. A fixture pins that without depending on npm.
+  return inTempDir(async (dir) => {
+    const pkgDir = join(dir, "node_modules", "@hyperframes", "core");
+    mkdirSync(join(pkgDir, "dist"), { recursive: true });
+    writeFileSync(join(dir, "package.json"), JSON.stringify({ name: "fixture-project" }));
+    writeFileSync(
+      join(pkgDir, "package.json"),
+      JSON.stringify({
+        name: "@hyperframes/core",
+        version: "0.0.0-fixture",
+        type: "module",
+        exports: {
+          "./package.json": "./package.json",
+          "./audio-carve": { import: "./dist/audioCarve.js" },
+          "./audio-fx": { import: "./dist/audioFx.js" },
+        },
+      }),
+    );
+    writeFileSync(join(pkgDir, "dist", "audioCarve.js"), 'export const marker = "carve";\n');
+    writeFileSync(join(pkgDir, "dist", "audioFx.js"), 'export const marker = "fx";\n');
+
+    const core = await loadCore(dir);
+    assert.equal(core.carve.marker, "carve");
+    assert.equal(core.fx.marker, "fx");
+  });
+});
+
+test("members is required, so dropping it cannot silently restore the group form", () => {
+  // The gap this closes: `main()` is the only code that BUILDS `members`, and no
+  // test runs `main()` (the symlink test stops at the usage error, a real run
+  // needs ffmpeg). With `members = []` defaulted, a refactor that dropped the
+  // third argument would return the group form again with the whole suite green
+  // — the same signature as the bug itself: first pass correct, persisted
+  // attribute wrong, nothing red. Omitting it now throws instead.
+  const voices = [voice("vo1", "voiceover"), voice("vo2", "voiceover")];
+  assert.throws(() => carveSources(voices, bed("bgm", "music")), TypeError);
+  assert.throws(() => groupSourceRefusal(voices, bed("bgm", "music")), TypeError);
+});
+
+test("the default strength is 0.8, and --strength still overrides it", () => {
+  // 0.25 left the bed audibly fighting the voice on narrated builds; a carve at
+  // the default has to already be a finished mix. Pinned so it cannot drift back
+  // unnoticed — core pins its own DEFAULT_CARVE the same way.
+  assert.equal(DEFAULT_STRENGTH, 0.8);
+  assert.equal(parseArgs(["--comp", "x.html"]).strength, 0.8);
+  assert.equal(parseArgs(["--comp", "x.html", "--strength", "0.25"]).strength, 0.25);
+});
diff --git a/.claude/skills/media-use/audio/scripts/extract-audio-data.py b/.claude/skills/media-use/audio/scripts/extract-audio-data.py
new file mode 100644
index 0000000..b76ad99
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/extract-audio-data.py
@@ -0,0 +1,199 @@
+#!/usr/bin/env python3
+"""
+Extract per-frame audio visualization data from an audio or video file.
+
+Outputs JSON with RMS amplitude and frequency band data at the target FPS,
+ready to embed in a HyperFrames composition.
+
+Usage:
+    python extract-audio-data.py input.mp3 -o audio-data.json
+    python extract-audio-data.py input.mp4 --fps 30 --bands 16 -o audio-data.json
+
+Requirements:
+    - Python 3.9+
+    - ffmpeg (for decoding audio)
+    - numpy (pip install numpy)
+"""
+
+import argparse
+import json
+import subprocess
+import sys
+
+import numpy as np
+
+# Windows sizes stdio to the ANSI code page (cp1252). These scripts emit UTF-8 on
+# every platform; say so rather than depending on the console's code page. Carry
+# `errors` across: reconfigure() resets it to "strict", and CPython deliberately gives
+# stderr "backslashreplace" so the diagnostic path can never itself raise.
+for _stream in (sys.stdout, sys.stderr):
+    if hasattr(_stream, "reconfigure"):
+        _stream.reconfigure(encoding="utf-8", errors=_stream.errors)
+
+# ---------------------------------------------------------------------------
+# FFT parameters
+#
+# A 4096-sample window gives ~10.8 Hz per bin at 44100Hz — enough to resolve
+# low-frequency bands cleanly. The per-frame audio slice (44100/30 = 1470
+# samples at 30fps) is too small and causes low bands to map to the same bins.
+#
+# Frequency range 30Hz–16kHz covers the useful range for music. Below 30Hz is
+# sub-bass most speakers can't reproduce; above 16kHz is noise/harmonics that
+# don't contribute to perceived rhythm or melody.
+# ---------------------------------------------------------------------------
+
+SAMPLE_RATE = 44100
+FFT_SIZE = 4096
+MIN_FREQ = 30.0
+MAX_FREQ = 16000.0
+
+
+def decode_audio(path: str) -> np.ndarray:
+    """Decode audio to mono float32 samples via ffmpeg."""
+    cmd = [
+        "ffmpeg", "-i", path,
+        "-vn", "-ac", "1", "-ar", str(SAMPLE_RATE),
+        "-f", "s16le", "-acodec", "pcm_s16le",
+        "-loglevel", "error",
+        "pipe:1",
+    ]
+    result = subprocess.run(cmd, capture_output=True)
+    if result.returncode != 0:
+        # Decoding ffmpeg's diagnostics strictly makes the reporter the thing that
+        # crashes: a Windows ffmpeg emits cp1252 bytes, and UnicodeDecodeError here
+        # would bury the actual failure it was trying to report.
+        print(f"ffmpeg error: {result.stderr.decode('utf-8', errors='replace')}", file=sys.stderr)
+        sys.exit(1)
+    return np.frombuffer(result.stdout, dtype=np.int16).astype(np.float32) / 32768.0
+
+
+def compute_band_edges(n_bands: int) -> np.ndarray:
+    """Logarithmically-spaced frequency band edges from MIN_FREQ to MAX_FREQ."""
+    return np.array([
+        MIN_FREQ * (MAX_FREQ / MIN_FREQ) ** (i / n_bands)
+        for i in range(n_bands + 1)
+    ])
+
+
+def compute_fft_bands(
+    windowed: np.ndarray, freq_per_bin: float, n_bins: int,
+    band_edges: np.ndarray, n_bands: int,
+) -> np.ndarray:
+    """Compute peak magnitude in logarithmically-spaced frequency bands."""
+    magnitudes = np.abs(np.fft.rfft(windowed))
+
+    bands = np.zeros(n_bands)
+    for b in range(n_bands):
+        low_bin = max(0, int(band_edges[b] / freq_per_bin))
+        high_bin = min(n_bins, int(band_edges[b + 1] / freq_per_bin))
+        if high_bin <= low_bin:
+            high_bin = low_bin + 1
+        # Clamp to valid range to avoid empty slices
+        low_bin = min(low_bin, n_bins - 1)
+        high_bin = min(high_bin, n_bins)
+        bands[b] = np.max(magnitudes[low_bin:high_bin])
+
+    return bands
+
+
+def extract(path: str, fps: int, n_bands: int) -> dict:
+    """Extract per-frame audio data."""
+    print(f"Decoding audio from {path}...", file=sys.stderr)
+    samples = decode_audio(path)
+    duration = len(samples) / SAMPLE_RATE
+    frame_step = SAMPLE_RATE // fps
+    total_frames = int(duration * fps)
+
+    print(f"Duration: {duration:.1f}s, {total_frames} frames at {fps}fps", file=sys.stderr)
+    print(f"FFT window: {FFT_SIZE} samples ({SAMPLE_RATE / FFT_SIZE:.1f} Hz/bin)", file=sys.stderr)
+    print(f"Frequency range: {MIN_FREQ:.0f}-{MAX_FREQ:.0f} Hz, {n_bands} bands", file=sys.stderr)
+
+    # Precompute constants
+    hann = np.hanning(FFT_SIZE)
+    band_edges = compute_band_edges(n_bands)
+    freq_per_bin = SAMPLE_RATE / FFT_SIZE
+    n_bins = FFT_SIZE // 2 + 1
+    half_fft = FFT_SIZE // 2
+
+    # Pass 1: extract raw values
+    rms_values = np.zeros(total_frames)
+    band_values = np.zeros((total_frames, n_bands))
+
+    for f in range(total_frames):
+        # RMS from the frame's audio slice
+        rms_start = f * frame_step
+        rms_end = rms_start + frame_step
+        frame_slice = samples[rms_start:min(rms_end, len(samples))]
+        if len(frame_slice) > 0:
+            rms_values[f] = np.sqrt(np.mean(frame_slice ** 2))
+
+        # FFT from a centered 4096-sample window
+        center = rms_start + frame_step // 2
+        win_start = center - half_fft
+        win_end = center + half_fft
+
+        if win_start >= 0 and win_end <= len(samples):
+            window = samples[win_start:win_end] * hann
+        else:
+            # Zero-pad at edges
+            padded = np.zeros(FFT_SIZE)
+            src_start = max(0, win_start)
+            src_end = min(len(samples), win_end)
+            dst_start = src_start - win_start
+            dst_end = dst_start + (src_end - src_start)
+            padded[dst_start:dst_end] = samples[src_start:src_end]
+            window = padded * hann
+
+        band_values[f] = compute_fft_bands(window, freq_per_bin, n_bins, band_edges, n_bands)
+
+    # Pass 2: normalize
+    peak_rms = rms_values.max() if total_frames > 0 else 1.0
+    if peak_rms > 0:
+        rms_values /= peak_rms
+
+    # Per-band normalization so treble is visible alongside louder bass
+    band_peaks = band_values.max(axis=0)
+    band_peaks[band_peaks == 0] = 1.0
+    band_values /= band_peaks
+
+    # Build output
+    frames = []
+    for f in range(total_frames):
+        frames.append({
+            "time": round(f / fps, 4),
+            "rms": round(float(rms_values[f]), 4),
+            "bands": [round(float(b), 4) for b in band_values[f]],
+        })
+
+    return {
+        "duration": round(duration, 4),
+        "fps": fps,
+        "bands": n_bands,
+        "totalFrames": total_frames,
+        "frames": frames,
+    }
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Extract per-frame audio visualization data")
+    parser.add_argument("input", help="Audio or video file")
+    parser.add_argument("-o", "--output", default="audio-data.json", help="Output JSON path")
+    parser.add_argument("--fps", type=int, default=30, help="Frames per second (default: 30)")
+    parser.add_argument("--bands", type=int, default=16, help="Number of frequency bands (default: 16)")
+    args = parser.parse_args()
+
+    if args.fps < 1:
+        parser.error("--fps must be at least 1")
+    if args.bands < 1:
+        parser.error("--bands must be at least 1")
+
+    data = extract(args.input, args.fps, args.bands)
+
+    with open(args.output, "w", encoding="utf-8") as f:
+        json.dump(data, f)
+
+    print(f"Wrote {args.output} ({data['totalFrames']} frames, {data['bands']} bands)", file=sys.stderr)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.claude/skills/media-use/audio/scripts/gemini-pipeline.test.mjs b/.claude/skills/media-use/audio/scripts/gemini-pipeline.test.mjs
new file mode 100644
index 0000000..842e508
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/gemini-pipeline.test.mjs
@@ -0,0 +1,131 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import { mkdtempSync, writeFileSync, readFileSync, mkdirSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { spawnSync } from "node:child_process";
+
+// Exercise the actual engine and provider together; only the paid API and
+// external audio tools are fixtures. This is not a live synthesis/render test.
+for (const expired of [false, true]) {
+  for (const only of ["tts", "tts,bgm,sfx"]) {
+    // With expired credentials the person already has an assets/voice/intro.wav, which the engine must keep.
+    const voicePath = expired ? "assets/voice/intro-2.wav" : "assets/voice/intro.wav";
+    test(`Gemini engine returns caption metadata with ${expired ? "expired" : "absent"} HeyGen credentials (${only})`, (t) => {
+      const dir = mkdtempSync(join(tmpdir(), "hf-gemini-pipeline-"));
+      t.after(() => rmSync(dir, { recursive: true, force: true }));
+      if (expired) {
+        mkdirSync(join(dir, "assets/voice"), { recursive: true });
+        writeFileSync(join(dir, "assets/voice/intro.wav"), "the person's own intro");
+      }
+      const config = join(dir, "heygen");
+      mkdirSync(config);
+      if (expired)
+        writeFileSync(
+          join(config, "credentials"),
+          JSON.stringify({
+            oauth: { access_token: "expired-fixture", expires_at: "2000-01-01T00:00:00Z" },
+          }),
+        );
+      const bin = join(dir, "bin");
+      mkdirSync(bin);
+      const preload = join(dir, "fetch.mjs");
+      writeFileSync(
+        preload,
+        `
+import assert from 'node:assert/strict';
+globalThis.fetch = async (url, options) => {
+  assert.equal(url, 'https://generativelanguage.googleapis.com/v1beta/interactions');
+  const body = JSON.parse(options.body);
+  assert.equal(body.model, 'gemini-3.8-flash-lite-tts');
+  assert.equal(body.input[0].content[0].annotations[0].style, 'Line direction');
+  const bytes = Buffer.alloc(48);
+  bytes.write('RIFF'); bytes.write('WAVE', 8);
+  return Response.json({status:'completed', steps:[{type:'model_output', content:[
+    {type:'audio', mime_type:'audio/wav', data:bytes.toString('base64')}
+  ]}]});
+};
+`,
+      );
+      writeFileSync(
+        join(bin, "npx"),
+        `#!${process.execPath}
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+const args = process.argv.slice(2);
+assert.deepEqual(args.slice(0, 3), ['hyperframes', 'transcribe', '${voicePath}']);
+assert.ok(fs.existsSync(args[2]));
+assert.equal(args[args.indexOf('--model')+1], 'small.en');
+fs.writeFileSync(path.join(args[args.indexOf('--dir')+1], 'transcript.json'), JSON.stringify([
+ {text:'Hello',start:0.1,end:0.4}, {text:'there.',start:0.5,end:0.9}
+]));
+`,
+        { mode: 0o755 },
+      );
+      writeFileSync(join(bin, "ffprobe"), "#!/bin/sh\necho 1.25\n", { mode: 0o755 });
+      writeFileSync(join(dir, ".env"), "");
+      writeFileSync(
+        join(dir, "audio_request.json"),
+        JSON.stringify({
+          provider: "gemini",
+          tts_model: "gemini-3.8-flash-lite-tts",
+          style: "Global direction",
+          lines: [{ id: "intro", text: "Hello there.", style: "Line direction" }],
+          bgm: { mode: "none" },
+        }),
+      );
+      const result = spawnSync(
+        process.execPath,
+        [
+          "--import",
+          preload,
+          new URL("./audio.mjs", import.meta.url).pathname,
+          "--hyperframes",
+          dir,
+          "--only",
+          only,
+        ],
+        {
+          encoding: "utf8",
+          env: {
+            ...process.env,
+            HEYGEN_CONFIG_DIR: config,
+            HEYGEN_API_KEY: "",
+            HYPERFRAMES_API_KEY: "",
+            GEMINI_API_KEY: "fixture-key",
+            PATH: `${bin}:${process.env.PATH}`,
+          },
+        },
+      );
+      assert.equal(result.status, 0, result.stderr);
+      const meta = JSON.parse(readFileSync(join(dir, "audio_meta.json"), "utf8"));
+      assert.equal(meta.tts_provider, "gemini");
+      assert.equal(meta.voice_id, "Kore");
+      assert.deepEqual(meta.voices, [
+        {
+          id: "intro",
+          path: voicePath,
+          duration_s: 1.25,
+          words: [
+            { id: "w0", text: "Hello", start: 0.1, end: 0.4 },
+            { id: "w1", text: "there.", start: 0.5, end: 0.9 },
+          ],
+        },
+      ]);
+      assert.equal(meta.total_duration_s, 1.25);
+      const manifest = readFileSync(join(dir, ".media/manifest.jsonl"), "utf8").trim().split("\n");
+      assert.deepEqual(
+        manifest
+          .map((line) => JSON.parse(line))
+          .map(({ path, type, source }) => [path, type, source]),
+        [[voicePath, "voice", "generated"]],
+      );
+      if (expired)
+        assert.equal(
+          readFileSync(join(dir, "assets/voice/intro.wav"), "utf8"),
+          "the person's own intro",
+        );
+    });
+  }
+}
diff --git a/.claude/skills/media-use/audio/scripts/heygen-tts.mjs b/.claude/skills/media-use/audio/scripts/heygen-tts.mjs
new file mode 100755
index 0000000..3e1de35
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/heygen-tts.mjs
@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+// Self-contained HeyGen TTS — single text in → one wav (+ optional words JSON)
+// out. A thin CLI over lib/tts.mjs (the same code the audio engine uses), so the
+// HeyGen REST call, starfish voice pick, mp3→wav transcode, and word-timestamp
+// filtering live in exactly one place. Bypasses the `hyperframes` CLI, which in
+// the published build is Kokoro-only.
+//
+// Usage:
+//   node heygen-tts.mjs "Text to speak"  -o narration.wav [--words narration.words.json]
+//   node heygen-tts.mjs ./script.txt     -o narration.wav --words narration.words.json
+//   node heygen-tts.mjs "Bonjour"        -o fr.wav --lang fr --voice <id>
+//   node heygen-tts.mjs --list           # list starfish voices and exit
+//
+// Flags: -o/--output (.wav → ffmpeg transcode; .mp3 → raw bytes), --words,
+//   --voice (starfish id), --speed, --lang, --list.
+// Requires: $HEYGEN_API_KEY / OAuth ~/.heygen credentials and ffmpeg for .wav output.
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { heygenAuthHeaders, heygenJSON, loadEnvFromDir } from "./lib/heygen.mjs";
+import { ffprobeDuration, resolveVoiceId, synthesizeOne, withWordIds } from "./lib/tts.mjs";
+
+const argv = process.argv.slice(2);
+function flag(name, def) {
+  const i = argv.indexOf(`--${name}`);
+  if (i < 0) return def;
+  if (i + 1 >= argv.length) return true;
+  const v = argv[i + 1];
+  return v.startsWith("--") ? true : v;
+}
+const die = (m) => {
+  console.error(`✗ heygen-tts: ${m}`);
+  process.exit(1);
+};
+
+// First arg that isn't a flag or the -o value is the text / .txt path.
+const positional = (() => {
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith("--")) {
+      const next = argv[i + 1];
+      if (next && !next.startsWith("--")) i++;
+      continue;
+    }
+    if (a === "-o") {
+      i++;
+      continue;
+    }
+    return a;
+  }
+  return null;
+})();
+
+const output = resolve(
+  (typeof flag("output") === "string" && flag("output")) ||
+    (argv.includes("-o") && argv[argv.indexOf("-o") + 1]) ||
+    "narration.wav",
+);
+const wordsPath = typeof flag("words") === "string" ? resolve(flag("words")) : null;
+const userVoice = typeof flag("voice") === "string" ? flag("voice") : null;
+const speedRaw = typeof flag("speed") === "string" ? Number(flag("speed")) : 1.0;
+const speed = isFinite(speedRaw) && speedRaw > 0 ? speedRaw : 1.0;
+const lang = typeof flag("lang") === "string" ? flag("lang") : "en";
+const listOnly = flag("list") === true;
+
+loadEnvFromDir(process.cwd());
+let authHeaders;
+try {
+  authHeaders = heygenAuthHeaders();
+} catch (e) {
+  die(e.message);
+}
+
+// ---------- --list ----------
+if (listOnly) {
+  const payload = await heygenJSON(`/voices?engine=starfish&type=public&limit=50`, {
+    headers: authHeaders,
+  });
+  for (const v of payload.data ?? payload.voices ?? []) {
+    console.log(`${v.voice_id}\t${v.name}\t${v.language ?? ""}`);
+  }
+  process.exit(0);
+}
+
+// ---------- resolve text + voice ----------
+if (!positional) die("no text given. Pass a string or a .txt path, or use --list.");
+const text =
+  positional.endsWith(".txt") && existsSync(resolve(positional))
+    ? readFileSync(resolve(positional), "utf8").trim()
+    : positional;
+if (!text) die("input text is empty");
+
+const voiceId = await resolveVoiceId({ provider: "heygen", userVoice, lang });
+if (!userVoice) console.error(`· using voice ${voiceId}`);
+
+// ---------- synthesize (shared engine code) ----------
+const { ok, words, error } = await synthesizeOne({
+  provider: "heygen",
+  text,
+  voiceId,
+  lang,
+  speed,
+  wavAbs: output,
+  hyperframesDir: process.cwd(),
+});
+// HeyGen's own refusal, verbatim: a caller shows it or acts on it (a deleted voice, a limit).
+if (!ok) die(error ?? "synthesis failed (HeyGen request/transcode error)");
+
+let wordCount = 0;
+if (wordsPath) {
+  if (words && words.length) {
+    mkdirSync(dirname(wordsPath), { recursive: true });
+    writeFileSync(wordsPath, JSON.stringify(withWordIds(words), null, 2));
+    wordCount = words.length;
+  } else {
+    console.error("⚠ no word_timestamps in response — run `hyperframes transcribe` instead");
+  }
+}
+
+const dur = ffprobeDuration(output);
+const durStr = isFinite(dur) ? ` (${dur.toFixed(2)}s)` : "";
+console.log(`✓ ${output}${durStr}${wordCount ? ` · ${wordsPath} (${wordCount} words)` : ""}`);
diff --git a/.claude/skills/media-use/audio/scripts/heygen-tts.test.mjs b/.claude/skills/media-use/audio/scripts/heygen-tts.test.mjs
new file mode 100644
index 0000000..1730ba8
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/heygen-tts.test.mjs
@@ -0,0 +1,38 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { mkdtempSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const script = fileURLToPath(new URL("./heygen-tts.mjs", import.meta.url));
+// Every fetch answers as HeyGen does for a voice that no longer exists.
+const refusing = `data:text/javascript,globalThis.fetch = async () => new Response(${JSON.stringify(
+  JSON.stringify({ error: { code: "voice_not_found", message: "Voice not found: vc_gone" } }),
+)}, { status: 404, headers: { "content-type": "application/json" } });`;
+
+test("a refused speech prints HeyGen's own message, so a caller can act on it", () => {
+  const dir = mkdtempSync(join(tmpdir(), "heygen-tts-"));
+  const run = spawnSync(
+    process.execPath,
+    ["--import", refusing, script, "Hello", "--voice", "vc_gone", "-o", join(dir, "out.mp3")],
+    {
+      cwd: dir,
+      encoding: "utf8",
+      env: {
+        ...process.env,
+        HEYGEN_API_KEY: "",
+        HYPERFRAMES_API_KEY: "",
+        HEYGEN_ACCESS_TOKEN: "t",
+      },
+    },
+  );
+  assert.equal(run.status, 1);
+  assert.match(run.stderr, /✗ heygen-tts: Voice not found: vc_gone\n/);
+  assert.doesNotMatch(
+    run.stderr,
+    /HTTP 404|"error"/,
+    "HeyGen's message alone, not the raw response",
+  );
+});
diff --git a/.claude/skills/media-use/audio/scripts/heygen-voice.mjs b/.claude/skills/media-use/audio/scripts/heygen-voice.mjs
new file mode 100644
index 0000000..0e25377
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/heygen-voice.mjs
@@ -0,0 +1,98 @@
+#!/usr/bin/env node
+// HeyGen voice clones: `clone <audio> --name <n>`, `delete <voice_id>`, `list --prefix <p>` (references/tts.md).
+// The clone id works as `heygen-tts.mjs --voice <id>`. A refusal prints HeyGen's own message and exits 1.
+// Auth: same resolver as heygen-tts.mjs (lib/heygen.mjs).
+
+import { readFileSync } from "node:fs";
+import { extname } from "node:path";
+import { parseArgs } from "node:util";
+import { heygenAuthHeaders, heygenJSON, heygenMessage, loadEnvFromDir } from "./lib/heygen.mjs";
+import { isMainModule } from "./lib/main-module.mjs";
+
+const MEDIA_TYPES = { ".mp3": "audio/mpeg", ".wav": "audio/wav" };
+const POLL_MS = 2_000;
+const DEADLINE_MS = 120_000;
+
+async function clone(file, name, headers, { sleep, now }) {
+  const mediaType = MEDIA_TYPES[extname(file).toLowerCase()];
+  if (!mediaType) throw new Error(`unsupported audio file ${file}: use .mp3 or .wav`);
+  const data = readFileSync(file).toString("base64");
+  const created = await heygenJSON("/voices/clone", {
+    method: "POST",
+    headers,
+    body: { voice_name: name, audio: { type: "base64", media_type: mediaType, data } },
+  });
+  const id = created.data.voice_clone_id;
+  const deadline = now() + DEADLINE_MS;
+  for (;;) {
+    const { data: voice } = await heygenJSON(`/voices/${id}`, { headers });
+    if (voice.status === "complete") return { voice_id: voice.voice_id ?? id };
+    if (voice.status === "failed") throw new Error(voice.failure_message || "voice clone failed");
+    if (now() >= deadline) throw new Error(`voice clone ${id} not ready after 120 s`);
+    await sleep(POLL_MS);
+  }
+}
+
+async function list(prefix, headers) {
+  const mine = [];
+  const seen = new Set();
+  let token;
+  do {
+    if (token && seen.has(token)) throw new Error(`HeyGen returned page token ${token} twice`);
+    if (token) seen.add(token);
+    const query = new URLSearchParams({ type: "private", limit: "100" });
+    if (token) query.set("token", token);
+    const page = await heygenJSON(`/voices?${query}`, { headers });
+    mine.push(...page.data.filter((v) => (v.name ?? "").startsWith(prefix)));
+    token = page.has_more ? page.next_token : null;
+  } while (token);
+  // ponytail: the list response has no created_at, so one GET per match; bounded by the clone limit.
+  return Promise.all(
+    mine.map(async ({ voice_id, name }) => {
+      const { data } = await heygenJSON(`/voices/${voice_id}`, { headers });
+      return { voice_id, name, created_at: data.created_at ?? null };
+    }),
+  );
+}
+
+export async function main(
+  argv,
+  {
+    sleep = (ms) => new Promise((r) => setTimeout(r, ms)),
+    now = Date.now,
+    out = (s) => process.stdout.write(`${s}\n`),
+    err = (s) => process.stderr.write(`${s}\n`),
+  } = {},
+) {
+  try {
+    const { positionals, values } = parseArgs({
+      args: argv,
+      allowPositionals: true,
+      options: { name: { type: "string" }, prefix: { type: "string", default: "" } },
+    });
+    const [command, arg] = positionals;
+    if (command === "clone") {
+      if (!arg || !values.name) throw new Error("usage: clone <audio-file> --name <name>");
+      out(JSON.stringify(await clone(arg, values.name, heygenAuthHeaders(), { sleep, now })));
+    } else if (command === "delete") {
+      if (!arg) throw new Error("usage: delete <voice_id>");
+      await heygenJSON(`/voices/${encodeURIComponent(arg)}`, {
+        method: "DELETE",
+        headers: heygenAuthHeaders(),
+      });
+    } else if (command === "list") {
+      out(JSON.stringify(await list(values.prefix, heygenAuthHeaders())));
+    } else {
+      throw new Error("usage: heygen-voice.mjs clone|delete|list (see the header of this file)");
+    }
+    return 0;
+  } catch (e) {
+    err(heygenMessage(e));
+    return 1;
+  }
+}
+
+if (isMainModule(import.meta.url)) {
+  loadEnvFromDir(process.cwd());
+  process.exitCode = await main(process.argv.slice(2));
+}
diff --git a/.claude/skills/media-use/audio/scripts/heygen-voice.test.mjs b/.claude/skills/media-use/audio/scripts/heygen-voice.test.mjs
new file mode 100644
index 0000000..717b1b1
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/heygen-voice.test.mjs
@@ -0,0 +1,233 @@
+import { afterEach, beforeEach, test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { main } from "./heygen-voice.mjs";
+
+const realFetch = globalThis.fetch;
+const savedEnv = {
+  HEYGEN_ACCESS_TOKEN: process.env.HEYGEN_ACCESS_TOKEN,
+  HEYGEN_API_KEY: process.env.HEYGEN_API_KEY,
+};
+let dir;
+let calls;
+
+beforeEach(() => {
+  dir = mkdtempSync(join(tmpdir(), "heygen-voice-"));
+  delete process.env.HEYGEN_ACCESS_TOKEN;
+  process.env.HEYGEN_API_KEY = "hg_test";
+  calls = [];
+});
+
+afterEach(() => {
+  globalThis.fetch = realFetch;
+  for (const [k, v] of Object.entries(savedEnv)) {
+    if (v === undefined) delete process.env[k];
+    else process.env[k] = v;
+  }
+  rmSync(dir, { recursive: true, force: true });
+});
+
+// routes: "METHOD /path" → array of [status, body] answered in order (last one repeats).
+function mockFetch(routes) {
+  globalThis.fetch = async (url, opts) => {
+    const key = `${opts.method} ${String(url).replace("https://api.heygen.com/v3", "")}`;
+    calls.push({ key, opts });
+    const queue = routes[key];
+    if (!queue) throw new Error(`unexpected request ${key}`);
+    const [status, body] = queue.length > 1 ? queue.shift() : queue[0];
+    return new Response(body === undefined ? null : JSON.stringify(body), { status });
+  };
+}
+
+async function run(argv, { sleep = async () => {}, now = () => 0 } = {}) {
+  const out = [];
+  const err = [];
+  const code = await main(argv, {
+    sleep,
+    now,
+    out: (s) => out.push(s),
+    err: (s) => err.push(s),
+  });
+  return { code, out: out.join("\n"), err: err.join("\n") };
+}
+
+function audioFile(name = "sample.mp3") {
+  const path = join(dir, name);
+  writeFileSync(path, Buffer.from("fake-audio"));
+  return path;
+}
+
+test("clone uploads base64 audio, polls until complete, prints the voice id", async () => {
+  mockFetch({
+    "POST /voices/clone": [[200, { data: { voice_clone_id: "vc1" } }]],
+    "GET /voices/vc1": [
+      [200, { data: { status: "processing", voice_id: "vc1" } }],
+      [200, { data: { status: "complete", voice_id: "vc1", name: "Me" } }],
+    ],
+  });
+  const sleeps = [];
+  const r = await run(["clone", audioFile(), "--name", "Me"], {
+    sleep: async (ms) => sleeps.push(ms),
+  });
+  assert.deepEqual(r, { code: 0, out: '{"voice_id":"vc1"}', err: "" });
+  assert.deepEqual(sleeps, [2000]);
+  const post = calls[0];
+  assert.equal(post.opts.headers["X-Api-Key"], "hg_test");
+  assert.deepEqual(JSON.parse(post.opts.body), {
+    voice_name: "Me",
+    audio: {
+      type: "base64",
+      media_type: "audio/mpeg",
+      data: Buffer.from("fake-audio").toString("base64"),
+    },
+  });
+});
+
+test("clone sends audio/wav for a .wav file", async () => {
+  mockFetch({
+    "POST /voices/clone": [[200, { data: { voice_clone_id: "vc1" } }]],
+    "GET /voices/vc1": [[200, { data: { status: "complete", voice_id: "vc1" } }]],
+  });
+  const r = await run(["clone", audioFile("take.WAV"), "--name", "Me"]);
+  assert.equal(r.code, 0);
+  assert.equal(JSON.parse(calls[0].opts.body).audio.media_type, "audio/wav");
+});
+
+test("clone prints HeyGen's refusal verbatim and exits 1", async () => {
+  const message =
+    "Voice clone limit reached (10). Delete unused clones or contact support to increase your limit.";
+  mockFetch({
+    "POST /voices/clone": [[400, { error: { code: "resource_limit_reached", message } }]],
+  });
+  const r = await run(["clone", audioFile(), "--name", "Me"]);
+  assert.deepEqual(r, { code: 1, out: "", err: message });
+});
+
+test("clone surfaces a failed clone's failure_message", async () => {
+  mockFetch({
+    "POST /voices/clone": [[200, { data: { voice_clone_id: "vc1" } }]],
+    "GET /voices/vc1": [[200, { data: { status: "failed", failure_message: "Audio too noisy" } }]],
+  });
+  const r = await run(["clone", audioFile(), "--name", "Me"]);
+  assert.deepEqual(r, { code: 1, out: "", err: "Audio too noisy" });
+});
+
+test("clone gives up after the 120 s deadline", async () => {
+  mockFetch({
+    "POST /voices/clone": [[200, { data: { voice_clone_id: "vc1" } }]],
+    "GET /voices/vc1": [[200, { data: { status: "processing" } }]],
+  });
+  let clock = 0;
+  const r = await run(["clone", audioFile(), "--name", "Me"], {
+    now: () => clock,
+    sleep: async (ms) => {
+      clock += ms;
+    },
+  });
+  assert.deepEqual(r, { code: 1, out: "", err: "voice clone vc1 not ready after 120 s" });
+  assert.equal(calls.filter((c) => c.key === "GET /voices/vc1").length, 61);
+});
+
+test("clone rejects an audio type other than mp3 or wav without calling HeyGen", async () => {
+  mockFetch({});
+  const r = await run(["clone", audioFile("take.ogg"), "--name", "Me"]);
+  assert.equal(r.code, 1);
+  assert.match(r.err, /use \.mp3 or \.wav/);
+  assert.equal(calls.length, 0);
+});
+
+test("delete calls DELETE /voices/<id> and exits 0", async () => {
+  mockFetch({ "DELETE /voices/vc1": [[200, { data: {} }]] });
+  const r = await run(["delete", "vc1"]);
+  assert.deepEqual(r, { code: 0, out: "", err: "" });
+});
+
+test("delete exits 0 on a 204 with no body, and escapes the id in the path", async () => {
+  mockFetch({ "DELETE /voices/a%2Fb": [[204]] });
+  const r = await run(["delete", "a/b"]);
+  assert.deepEqual(r, { code: 0, out: "", err: "" });
+});
+
+test("clone falls back to the clone id when the finished voice has no voice_id", async () => {
+  mockFetch({
+    "POST /voices/clone": [[200, { data: { voice_clone_id: "vc9" } }]],
+    "GET /voices/vc9": [[200, { data: { status: "complete" } }]],
+  });
+  const r = await run(["clone", audioFile(), "--name", "Me"]);
+  assert.deepEqual(r, { code: 0, out: '{"voice_id":"vc9"}', err: "" });
+});
+
+test("list skips a nameless voice and stops on a page token HeyGen repeats", async () => {
+  mockFetch({
+    "GET /voices?type=private&limit=100": [
+      [200, { data: [{ voice_id: "n", name: null }], has_more: true, next_token: "t2" }],
+    ],
+    "GET /voices?type=private&limit=100&token=t2": [
+      [200, { data: [], has_more: true, next_token: "t2" }],
+    ],
+  });
+  // A fake answers at once, so a list that never stops would starve any timeout: cap the calls instead.
+  const answer = globalThis.fetch;
+  globalThis.fetch = (...args) =>
+    calls.length >= 10 ? Promise.reject(new Error("paged forever")) : answer(...args);
+  const r = await run(["list", "--prefix", "desk-"]);
+  assert.deepEqual(r, { code: 1, out: "", err: "HeyGen returned page token t2 twice" });
+});
+
+test("delete prints HeyGen's 404 message verbatim and exits 1", async () => {
+  mockFetch({
+    "DELETE /voices/gone": [
+      [404, { error: { code: "voice_not_found", message: "Voice not found: gone" } }],
+    ],
+  });
+  const r = await run(["delete", "gone"]);
+  assert.deepEqual(r, { code: 1, out: "", err: "Voice not found: gone" });
+});
+
+test("list pages through private voices and returns prefix matches with created_at", async () => {
+  mockFetch({
+    "GET /voices?type=private&limit=100": [
+      [
+        200,
+        {
+          data: [
+            { voice_id: "a", name: "desk-1" },
+            { voice_id: "b", name: "other" },
+          ],
+          has_more: true,
+          next_token: "t2",
+        },
+      ],
+    ],
+    "GET /voices?type=private&limit=100&token=t2": [
+      [200, { data: [{ voice_id: "c", name: "desk-2" }], has_more: false }],
+    ],
+    "GET /voices/a": [[200, { data: { voice_id: "a", created_at: 1700000000 } }]],
+    "GET /voices/c": [[200, { data: { voice_id: "c", created_at: 1700000100 } }]],
+  });
+  const r = await run(["list", "--prefix", "desk-"]);
+  assert.equal(r.code, 0);
+  assert.deepEqual(JSON.parse(r.out), [
+    { voice_id: "a", name: "desk-1", created_at: 1700000000 },
+    { voice_id: "c", name: "desk-2", created_at: 1700000100 },
+  ]);
+});
+
+test("list prints HeyGen's refusal verbatim and exits 1", async () => {
+  const message = "Invalid or expired API key. Verify your x-api-key header.";
+  mockFetch({
+    "GET /voices?type=private&limit=100": [[401, { error: { code: "unauthorized", message } }]],
+  });
+  const r = await run(["list", "--prefix", "desk-"]);
+  assert.deepEqual(r, { code: 1, out: "", err: message });
+});
+
+test("a host-injected HEYGEN_ACCESS_TOKEN is sent as Bearer", async () => {
+  process.env.HEYGEN_ACCESS_TOKEN = "at_host";
+  mockFetch({ "DELETE /voices/vc1": [[200, { data: {} }]] });
+  await run(["delete", "vc1"]);
+  assert.equal(calls[0].opts.headers.Authorization, "Bearer at_host");
+  assert.equal(calls[0].opts.headers["X-Api-Key"], undefined);
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/audio-meta.mjs b/.claude/skills/media-use/audio/scripts/lib/audio-meta.mjs
new file mode 100644
index 0000000..f3c032a
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/audio-meta.mjs
@@ -0,0 +1,39 @@
+import { closeSync, ftruncateSync, openSync, readFileSync, writeSync } from "node:fs";
+
+// Keep the merge base and output on the same file even if its pathname changes
+// while audio generation runs. The CLI owns this handle until write or exit.
+export function openAudioMeta(path) {
+  let fd;
+  try {
+    fd = openSync(path, "r+");
+  } catch (error) {
+    if (error.code !== "ENOENT") throw error;
+  }
+  let value = {};
+  if (fd !== undefined) {
+    try {
+      value = JSON.parse(readFileSync(fd, "utf8"));
+    } catch (error) {
+      closeSync(fd);
+      throw error;
+    }
+  }
+  return {
+    value,
+    write(meta) {
+      const bytes = Buffer.from(JSON.stringify(meta, null, 2));
+      // Defer new-file creation until generation succeeds. Never overwrite a
+      // file (or follow a link) that appeared since the missing merge base.
+      if (fd === undefined) fd = openSync(path, "wx");
+      try {
+        let offset = 0;
+        while (offset < bytes.length) {
+          offset += writeSync(fd, bytes, offset, bytes.length - offset, offset);
+        }
+        ftruncateSync(fd, bytes.length);
+      } finally {
+        closeSync(fd);
+      }
+    },
+  };
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/audio-meta.test.mjs b/.claude/skills/media-use/audio/scripts/lib/audio-meta.test.mjs
new file mode 100644
index 0000000..2fa3a68
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/audio-meta.test.mjs
@@ -0,0 +1,136 @@
+import assert from "node:assert/strict";
+import { test } from "node:test";
+import {
+  mkdtempSync,
+  readFileSync,
+  renameSync,
+  rmSync,
+  statSync,
+  symlinkSync,
+  writeFileSync,
+} from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { openAudioMeta } from "./audio-meta.mjs";
+
+function fixture(t) {
+  const dir = mkdtempSync(join(tmpdir(), "audio-meta-"));
+  t.after(() => rmSync(dir, { recursive: true, force: true }));
+  return dir;
+}
+
+test("updates the read file from byte zero, truncates, and retains its mode", (t) => {
+  const path = join(fixture(t), "meta.json");
+  writeFileSync(path, JSON.stringify({ voices: ["long existing voice metadata"] }), {
+    mode: 0o600,
+  });
+  const originalMode = statSync(path).mode;
+  const handle = openAudioMeta(path);
+  assert.deepEqual(handle.value, { voices: ["long existing voice metadata"] });
+  handle.write({ voices: ["声"] });
+  assert.equal(readFileSync(path, "utf8"), JSON.stringify({ voices: ["声"] }, null, 2));
+  assert.equal(statSync(path).mode, originalMode);
+});
+
+test("pathname replacement cannot redirect the existing-file write", (t) => {
+  const dir = fixture(t);
+  const path = join(dir, "meta.json");
+  const moved = join(dir, "original.json");
+  writeFileSync(path, "{}");
+  const handle = openAudioMeta(path);
+  renameSync(path, moved);
+  writeFileSync(path, "replacement must survive");
+  handle.write({ voices: [] });
+  assert.equal(readFileSync(path, "utf8"), "replacement must survive");
+  assert.deepEqual(JSON.parse(readFileSync(moved, "utf8")), { voices: [] });
+});
+
+test("existing symlink outputs retain their original target even after retargeting", (t) => {
+  const dir = fixture(t);
+  const path = join(dir, "meta.json");
+  const target = join(dir, "target.json");
+  const victim = join(dir, "victim.json");
+  writeFileSync(target, "{}");
+  writeFileSync(victim, "untouched");
+  symlinkSync(target, path);
+  const handle = openAudioMeta(path);
+  rmSync(path);
+  symlinkSync(victim, path);
+  handle.write({ bgm: null });
+  assert.equal(readFileSync(victim, "utf8"), "untouched");
+  assert.deepEqual(JSON.parse(readFileSync(target, "utf8")), { bgm: null });
+});
+
+test("missing output is created only when saved", (t) => {
+  const path = join(fixture(t), "meta.json");
+  const handle = openAudioMeta(path);
+  assert.deepEqual(handle.value, {});
+  assert.throws(() => statSync(path), { code: "ENOENT" });
+  handle.write({ sfx: [] });
+  assert.deepEqual(JSON.parse(readFileSync(path, "utf8")), { sfx: [] });
+});
+
+for (const replacement of ["file", "symlink"]) {
+  test(`new output does not overwrite a racing ${replacement}`, (t) => {
+    const dir = fixture(t);
+    const path = join(dir, "meta.json");
+    const victim = join(dir, "victim.json");
+    const handle = openAudioMeta(path);
+    writeFileSync(victim, "untouched");
+    if (replacement === "symlink") symlinkSync(victim, path);
+    else writeFileSync(path, "untouched");
+    assert.throws(() => handle.write({}), { code: "EEXIST" });
+    assert.equal(readFileSync(path, "utf8"), "untouched");
+    assert.equal(readFileSync(victim, "utf8"), "untouched");
+  });
+}
+
+test("malformed merge base remains an error without changing bytes", (t) => {
+  const path = join(fixture(t), "meta.json");
+  writeFileSync(path, "bad json");
+  assert.throws(() => openAudioMeta(path), SyntaxError);
+  assert.equal(readFileSync(path, "utf8"), "bad json");
+});
+
+test("CLI partial run retains unselected voices, BGM and SFX", (t) => {
+  const dir = fixture(t);
+  const path = join(dir, "meta.json");
+  const request = join(dir, "request.json");
+  const previous = {
+    voices: [{ id: "a", duration_s: 2 }],
+    bgm: { path: "bgm.wav" },
+    sfx: [{ name: "click" }],
+    tts_provider: "kokoro",
+    voice_id: "voice-a",
+  };
+  writeFileSync(path, JSON.stringify(previous));
+  writeFileSync(request, "{}");
+  const result = spawnSync(
+    process.execPath,
+    [
+      fileURLToPath(new URL("../audio.mjs", import.meta.url)),
+      "--request",
+      request,
+      "--hyperframes",
+      dir,
+      "--out",
+      path,
+      "--only",
+      "none",
+    ],
+    {
+      encoding: "utf8",
+      env: {
+        ...process.env,
+        HEYGEN_CONFIG_DIR: dir,
+        HEYGEN_API_KEY: "",
+        HYPERFRAMES_API_KEY: "",
+      },
+    },
+  );
+  assert.equal(result.status, 0, result.stderr);
+  const actual = JSON.parse(readFileSync(path, "utf8"));
+  for (const key of Object.keys(previous)) assert.deepEqual(actual[key], previous[key]);
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/bgm-volume.mjs b/.claude/skills/media-use/audio/scripts/lib/bgm-volume.mjs
new file mode 100644
index 0000000..52ea0ce
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/bgm-volume.mjs
@@ -0,0 +1,4 @@
+// Music sits under narration; a silent film brings music forward.
+export const BGM_BED_VOLUME = 0.12;
+export const BGM_SILENT_VOLUME = 0.9;
+export const bgmDefaultVolume = (hasVoice) => (hasVoice ? BGM_BED_VOLUME : BGM_SILENT_VOLUME);
diff --git a/.claude/skills/media-use/audio/scripts/lib/bgm.mjs b/.claude/skills/media-use/audio/scripts/lib/bgm.mjs
new file mode 100644
index 0000000..d23c8c0
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/bgm.mjs
@@ -0,0 +1,257 @@
+// bgm.mjs — background music for the media audio engine. Two routes, gated the
+// same way as TTS/SFX:
+//
+//   retrieve (default when HeyGen is configured) — search HeyGen's music library
+//        by mood, download the top track. Synchronous. assets/bgm/track.mp3.
+//   generate (the alternative; the automatic choice when HeyGen is absent) —
+//        Lyria (cloud, $GEMINI_API_KEY/$GOOGLE_API_KEY + google-genai) preferred,
+//        else local MusicGen (facebook/musicgen-small via transformers). Spawned
+//        DETACHED so the engine can return while audio renders; the caller marks
+//        bgm_pending and runs wait-bgm.mjs before assembling. assets/bgm/track.wav.
+//
+// Missing/failed BGM never blocks a render.
+
+import { spawn, spawnSync } from "node:child_process";
+import { existsSync, mkdirSync, openSync, closeSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { downloadTo, searchSounds } from "./heygen.mjs";
+import { agentWritePath } from "./media-record.mjs";
+import { pythonInvocation } from "./python.mjs";
+
+const r3 = (x) => Number(x.toFixed(3));
+const lyriaKey = () => process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY || "";
+
+import { bgmDefaultVolume } from "./bgm-volume.mjs";
+export { BGM_BED_VOLUME, BGM_SILENT_VOLUME, bgmDefaultVolume } from "./bgm-volume.mjs";
+
+const BGM_PY_DEPS = ["transformers", "torch", "soundfile", "numpy"];
+const BGM_PY_PROBE =
+  "import transformers, soundfile, torch, numpy; from transformers import MusicgenForConditionalGeneration";
+const LYRIA_PY_DEPS = ["google-genai", "python-dotenv"];
+const LYRIA_PY_PROBE = "import google.genai";
+
+function pyOk(probe) {
+  const { cmd, args } = pythonInvocation(["-c", probe]);
+  return spawnSync(cmd, args, { stdio: "ignore" }).status === 0;
+}
+// `python -m pip`, not a bare `pip` binary: a Homebrew/system Python often
+// exposes only `python3`/`pip3` on PATH, so a plain `pip` spawn silently
+// no-ops (ENOENT) and the documented "auto-installed on demand" path never
+// actually installs. `-m pip` also guarantees the packages land in the SAME
+// interpreter pyOk() probes — a bare `pip`/`pip3` could resolve to a
+// different Python installation than `python3` if more than one is on PATH.
+function pipInstall(deps) {
+  const { cmd, args } = pythonInvocation(["-m", "pip", "install", "-q", ...deps]);
+  return spawnSync(cmd, args, { stdio: "ignore" }).status === 0;
+}
+
+// ── retrieval (HeyGen music library) ──────────────────────────────────────────
+export async function retrieveBgm({ query, headers, hyperframesDir, hasVoice, anomalies }) {
+  const q = query || "calm cinematic underscore";
+  const results = await searchSounds(q, "music", headers, { limit: 5 });
+  if (!results.length) return null;
+  const top = results[0];
+  const rel = agentWritePath(hyperframesDir, "assets/bgm/track.mp3", { anomalies });
+  await downloadTo(top.audio_url, join(hyperframesDir, rel));
+  return {
+    path: rel,
+    volume: bgmDefaultVolume(hasVoice),
+    query: q,
+    mode: "retrieve",
+    duration_s: typeof top.duration === "number" ? r3(top.duration) : null,
+  };
+}
+
+// ── mood inference (for the generate path's prompt) ──────────────────────────
+// Industry base → archetype shape → emotional-arc tiebreaker. Exported so a
+// workflow adapter can build a rich prompt from its own narrative metadata; the
+// engine also calls it when generate has only a plain mood query.
+export function inferBgmPrompt({ blob = "", archetype = "", arc = "", userPrompt = "" } = {}) {
+  if (userPrompt) return userPrompt;
+  const b = String(blob).toLowerCase();
+  let base;
+  let bpm;
+  if (/\b(crypto|nft|web3|defi|token|blockchain|exchange|wallet|dao)\b/.test(b)) {
+    base = "atmospheric electronic, deep bass, futuristic synths, restrained percussion";
+    bpm = 100;
+  } else if (/\b(finance|fintech|bank|payment|invest|wealth|insurance|treasury)\b/.test(b)) {
+    base = "calm cinematic, soft strings, subtle piano, restrained percussion";
+    bpm = 92;
+  } else if (/\b(creative|agency|design|studio|art|brand|marketing|content)\b/.test(b)) {
+    base = "playful electronic, warm pads, light percussion";
+    bpm = 115;
+  } else {
+    base = "uplifting corporate tech, bright modern piano with synth pads";
+    bpm = 108;
+  }
+  const at = String(archetype).toLowerCase();
+  const ar = String(arc).toLowerCase();
+  if (/\bpas\b|pain.agitate|pain.+solve/.test(at))
+    return `${base}, starts with subtle tension then builds to resolution, BPM ${bpm}, transitions from MINOR to MAJOR`;
+  if (/\bbab\b|before.after|future.pac|vision/.test(at))
+    return `${base}, cinematic and aspirational, steady build with rising energy, BPM ${bpm}, MAJOR`;
+  if (/cascade|feature.benefit/.test(at))
+    return `${base}, energetic and driving, consistent momentum, BPM ${Math.min(bpm + 10, 128)}, MAJOR`;
+  if (/demo.loop|question.+answer/.test(at))
+    return `${base}, clean and focused, minimal arrangement, BPM ${Math.max(bpm - 8, 88)}`;
+  if (/frustrat|anxiety|overwhelm|tension/.test(ar) && /relief|excite|triumph/.test(ar))
+    return `${base}, builds from understated tension to uplifting resolution, BPM ${bpm}, MINOR to MAJOR`;
+  if (/excit|awe|power|triumph/.test(ar))
+    return `${base}, energetic and confident, BPM ${bpm}, MAJOR`;
+  if (/trust|ease|clarity|reassur/.test(ar))
+    return `${base}, warm and reassuring, BPM ${Math.max(bpm - 5, 85)}`;
+  return `${base}, BPM ${bpm}, MAJOR`;
+}
+
+// ── generation (Lyria → MusicGen, detached) ──────────────────────────────────
+// Returns a bgmMeta the caller folds into audio_meta:
+//   { path, mode, volume, provider, pid, log, target_duration_s, seed_duration_s,
+//     loop_count, pending:true }  on success, or  { disabled:true, reason }.
+export function generateBgmDetached({
+  prompt,
+  durationS,
+  hyperframesDir,
+  lyriaRecipe,
+  seedSeconds = 28,
+  hasVoice,
+  anomalies,
+}) {
+  const rel = agentWritePath(hyperframesDir, "assets/bgm/track.wav", { anomalies });
+  const abs = join(hyperframesDir, rel);
+  mkdirSync(join(hyperframesDir, "assets", "bgm"), { recursive: true });
+  const log = join(hyperframesDir, "assets", "bgm", `bgm-${Date.now()}.log`);
+  const targetS = Math.max(1, durationS);
+  const baseMeta = { path: rel, mode: null, volume: bgmDefaultVolume(hasVoice), pending: true };
+
+  const lyriaConfigured = !!lyriaKey() && !!lyriaRecipe && existsSync(lyriaRecipe);
+
+  // Make a backend runnable: prefer Lyria when configured (install google-genai
+  // on demand), else ensure local MusicGen deps. Installs are synchronous here —
+  // generation itself is detached, so the engine still returns promptly.
+  if (lyriaConfigured && !pyOk(LYRIA_PY_PROBE)) pipInstall(LYRIA_PY_DEPS);
+  const useLyria = lyriaConfigured && pyOk(LYRIA_PY_PROBE);
+  if (!useLyria && !pyOk(BGM_PY_PROBE)) pipInstall(BGM_PY_DEPS);
+
+  const fd = openSync(log, "w");
+  if (useLyria) {
+    const { cmd, args } = pythonInvocation([
+      lyriaRecipe,
+      "--output",
+      abs,
+      "--duration",
+      String(targetS),
+      "--prompt",
+      prompt,
+    ]);
+    rmSync(abs, { force: true }); // wait-bgm takes any file here as the finished track
+    const proc = spawn(cmd, args, { detached: true, stdio: ["ignore", fd, fd] });
+    proc.unref();
+    closeSync(fd);
+    return {
+      ...baseMeta,
+      mode: "detached-single",
+      provider: "lyria",
+      pid: proc.pid,
+      log,
+      target_duration_s: r3(targetS),
+    };
+  }
+
+  if (pyOk(BGM_PY_PROBE)) {
+    const seedS = Math.min(Math.max(seedSeconds, 10), 30);
+    const loops = targetS > seedS ? Math.ceil(targetS / seedS) : 1;
+    const script = musicgenScript({ prompt, abs, targetS, seedS });
+    const { cmd, args } = pythonInvocation(["-c", script]);
+    rmSync(abs, { force: true });
+    const proc = spawn(cmd, args, { detached: true, stdio: ["ignore", fd, fd] });
+    proc.unref();
+    closeSync(fd);
+    return {
+      ...baseMeta,
+      mode: targetS > seedS ? "detached-seed-loop" : "detached-seed-trim",
+      provider: "musicgen",
+      pid: proc.pid,
+      log,
+      target_duration_s: r3(targetS),
+      seed_duration_s: seedS,
+      loop_count: loops,
+    };
+  }
+
+  closeSync(fd);
+  return {
+    disabled: true,
+    reason: lyriaConfigured
+      ? `Lyria configured but google-genai uninstallable, and local MusicGen unavailable (pip install ${BGM_PY_DEPS.join(" ")})`
+      : `no Lyria key/recipe and local MusicGen deps unavailable (pip install ${BGM_PY_DEPS.join(" ")})`,
+  };
+}
+
+// Inline MusicGen: generate ONE seed clip (≤30s to stay under the decoder's
+// positional limit), then trim it down or crossfade-loop it up to the target.
+function musicgenScript({ prompt, abs, targetS, seedS }) {
+  return `
+import math, os, sys, traceback
+from pathlib import Path
+import numpy as np
+import soundfile as sf
+from transformers import MusicgenForConditionalGeneration, AutoProcessor
+
+prompt = ${JSON.stringify(prompt)}
+out_path = ${JSON.stringify(abs)}
+target_s = float(${targetS.toFixed(3)})
+seed_s = float(${seedS.toFixed(3)})
+token_rate = 50
+crossfade_s = 0.3
+
+def apply_fade(arr, sr, fade_in_s=0.08, fade_out_s=0.5):
+    n_in = min(int(round(fade_in_s * sr)), arr.shape[0] // 2)
+    n_out = min(int(round(fade_out_s * sr)), arr.shape[0] // 2)
+    if n_in > 1: arr[:n_in] *= np.linspace(0.0, 1.0, n_in, dtype="float32")
+    if n_out > 1: arr[-n_out:] *= np.linspace(1.0, 0.0, n_out, dtype="float32")
+    return arr
+
+def loop_crossfade(seed, target_len, xf):
+    if seed.shape[0] >= target_len: return seed[:target_len]
+    xf = min(xf, seed.shape[0] // 2)
+    if xf < 1:
+        reps = int(math.ceil(target_len / seed.shape[0]))
+        return np.tile(seed, reps)[:target_len]
+    t = np.linspace(0.0, 1.0, xf, dtype="float32")
+    fade_out = np.cos(t * (math.pi / 2)); fade_in = np.sin(t * (math.pi / 2))
+    out = seed.copy()
+    while out.shape[0] < target_len:
+        tail = out[-xf:] * fade_out; head = seed[:xf] * fade_in
+        out = np.concatenate([out[:-xf], tail + head, seed[xf:]])
+    return out[:target_len]
+
+try:
+    Path(os.path.dirname(out_path)).mkdir(parents=True, exist_ok=True)
+    processor = AutoProcessor.from_pretrained("facebook/musicgen-small")
+    model = MusicgenForConditionalGeneration.from_pretrained("facebook/musicgen-small")
+    model.eval()
+    sr = int(model.config.audio_encoder.sampling_rate)
+    gen_s = min(seed_s, target_s)
+    tokens = max(1, int(math.ceil(gen_s * token_rate)))
+    print(f"[musicgen] seed dur={gen_s:.2f}s tokens={tokens}", flush=True)
+    inputs = processor(text=[prompt], padding=True, return_tensors="pt")
+    audio = model.generate(**inputs, max_new_tokens=tokens)
+    seed = audio[0, 0].detach().cpu().numpy().astype("float32")
+    peak = float(np.max(np.abs(seed)))
+    if peak > 1e-6: seed = seed * (0.89 / peak)
+    want = max(1, int(round(target_s * sr)))
+    if seed.shape[0] >= want:
+        final = seed[:want].copy()
+    else:
+        final = loop_crossfade(seed, want, int(round(crossfade_s * sr)))
+    if final.shape[0] < want: final = np.pad(final, (0, want - final.shape[0]))
+    else: final = final[:want]
+    final = apply_fade(final, sr)
+    peak = float(np.max(np.abs(final)))
+    if peak > 1.0: final = final / peak
+    sf.write(out_path, final, sr)
+    print(f"[musicgen] wrote {out_path} samples={final.shape[0]} sr={sr}", flush=True)
+except Exception:
+    traceback.print_exc(); sys.exit(1)
+`;
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/bgm.test.mjs b/.claude/skills/media-use/audio/scripts/lib/bgm.test.mjs
new file mode 100644
index 0000000..a31f6e7
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/bgm.test.mjs
@@ -0,0 +1,74 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { existsSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { appendRecord } from "../../../scripts/lib/manifest.mjs";
+import {
+  BGM_BED_VOLUME,
+  BGM_SILENT_VOLUME,
+  bgmDefaultVolume,
+  generateBgmDetached,
+} from "./bgm.mjs";
+
+// Regression: narrated pipelines used to ship BGM at 0.8 (≈ -2 dB), ~16 dB
+// hotter than a music bed under a voice should be. The default under narration
+// must be a proper bed (≈ -18 dB); a silent film keeps the louder default.
+
+const dbfs = (linear) => 20 * Math.log10(linear);
+
+test("BGM under narration is a bed near -18 dB", () => {
+  assert.equal(bgmDefaultVolume(true), BGM_BED_VOLUME);
+  assert.equal(BGM_BED_VOLUME, 0.12);
+  const db = dbfs(BGM_BED_VOLUME);
+  assert.ok(db < -17 && db > -19, `bed should be ≈ -18 dB, got ${db.toFixed(1)} dB`);
+});
+
+test("a silent film (no voice) keeps BGM forward", () => {
+  assert.equal(bgmDefaultVolume(false), BGM_SILENT_VOLUME);
+  assert.equal(BGM_SILENT_VOLUME, 0.9);
+});
+
+test("the narrated default is well below the voice (≈ 0 dBFS)", () => {
+  // Voice sits at data-volume="1" (0 dBFS); the bed must be ~16+ dB under it.
+  const separation = dbfs(1) - dbfs(bgmDefaultVolume(true));
+  assert.ok(
+    separation >= 16,
+    `bed should sit ≥16 dB under the voice, got ${separation.toFixed(1)} dB`,
+  );
+});
+
+test(
+  "generating music again clears the engine's old track, so waiting cannot mistake it for the new one",
+  { skip: process.platform === "win32" && "the fake python is a shell script" },
+  (t) => {
+    const dir = mkdtempSync(join(tmpdir(), "hf-bgm-"));
+    const path = process.env.PATH;
+    t.after(() => {
+      process.env.PATH = path;
+      rmSync(dir, { recursive: true, force: true });
+    });
+    mkdirSync(join(dir, "bin"));
+    for (const name of ["python3", "python"])
+      writeFileSync(join(dir, "bin", name), "#!/bin/sh\nexit 0\n", { mode: 0o755 });
+    process.env.PATH = `${join(dir, "bin")}:${path}`;
+    mkdirSync(join(dir, "assets/bgm"), { recursive: true });
+    writeFileSync(join(dir, "assets/bgm/track.wav"), "last run's track");
+    appendRecord(dir, {
+      id: "bgm_001",
+      type: "bgm",
+      path: "assets/bgm/track.wav",
+      source: "generated",
+    });
+
+    const gen = generateBgmDetached({
+      prompt: "calm",
+      durationS: 5,
+      hyperframesDir: dir,
+      anomalies: [],
+    });
+
+    assert.equal(gen.path, "assets/bgm/track.wav");
+    assert.equal(existsSync(join(dir, "assets/bgm/track.wav")), false);
+  },
+);
diff --git a/.claude/skills/media-use/audio/scripts/lib/concurrency.mjs b/.claude/skills/media-use/audio/scripts/lib/concurrency.mjs
new file mode 100644
index 0000000..4988b61
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/concurrency.mjs
@@ -0,0 +1,14 @@
+// mapWithConcurrency — run `fn` over `items` with at most `limit` in flight at
+// once. Preserves input order in the result array regardless of completion order.
+export async function mapWithConcurrency(items, limit, fn) {
+  const results = new Array(items.length);
+  let next = 0;
+  async function worker() {
+    while (next < items.length) {
+      const i = next++;
+      results[i] = await fn(items[i], i);
+    }
+  }
+  await Promise.all(Array.from({ length: Math.min(limit, items.length) }, worker));
+  return results;
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/concurrency.test.mjs b/.claude/skills/media-use/audio/scripts/lib/concurrency.test.mjs
new file mode 100644
index 0000000..d033860
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/concurrency.test.mjs
@@ -0,0 +1,41 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mapWithConcurrency } from "./concurrency.mjs";
+
+// Regression: audio.mjs used a bare Promise.all(lines.map(synthLine)) to
+// synthesize every TTS line at once, spawning one Kokoro/whisper model load
+// per line concurrently. Two independent reports of this overwhelming a
+// machine (OOM, and cold-start contention causing spurious failures).
+// mapWithConcurrency is the extracted cap; test it in isolation since
+// audio.mjs itself is a script (runs CLI/exit side effects on import).
+test("processes every item and preserves input order regardless of completion order", async () => {
+  const order = [5, 1, 3, 2, 4];
+  const results = await mapWithConcurrency(order, 2, async (n) => {
+    await new Promise((r) => setTimeout(r, n));
+    return n * 10;
+  });
+  assert.deepEqual(results, [50, 10, 30, 20, 40]);
+});
+
+test("never runs more than `limit` at once", async () => {
+  let inFlight = 0;
+  let maxInFlight = 0;
+  const items = Array.from({ length: 10 }, (_, i) => i);
+  await mapWithConcurrency(items, 3, async () => {
+    inFlight++;
+    maxInFlight = Math.max(maxInFlight, inFlight);
+    await new Promise((r) => setTimeout(r, 5));
+    inFlight--;
+  });
+  assert.equal(maxInFlight, 3);
+});
+
+test("limit larger than the item count runs everything without hanging", async () => {
+  const results = await mapWithConcurrency([1, 2], 10, async (n) => n * 2);
+  assert.deepEqual(results, [2, 4]);
+});
+
+test("empty input resolves to an empty array", async () => {
+  const results = await mapWithConcurrency([], 4, async (n) => n);
+  assert.deepEqual(results, []);
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/gemini-auth.mjs b/.claude/skills/media-use/audio/scripts/lib/gemini-auth.mjs
new file mode 100644
index 0000000..e20a6a4
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/gemini-auth.mjs
@@ -0,0 +1,43 @@
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { pythonInvocation } from "./python.mjs";
+
+export function geminiConfigured() {
+  return Boolean(
+    process.env.GEMINI_API_KEY ||
+    process.env.GOOGLE_API_KEY ||
+    process.env.GOOGLE_APPLICATION_CREDENTIALS ||
+    process.env.GCS_CREDS,
+  );
+}
+
+export function geminiAuth({ run = spawnSync } = {}) {
+  const key = process.env.GEMINI_API_KEY || process.env.GOOGLE_API_KEY;
+  if (key) return { headers: { "x-goog-api-key": key }, secret: key };
+  if (!geminiConfigured()) {
+    throw new Error(
+      "Gemini TTS needs GEMINI_API_KEY or GOOGLE_API_KEY, or service-account credentials (GOOGLE_APPLICATION_CREDENTIALS or GCS_CREDS)",
+    );
+  }
+  const { cmd, args } = pythonInvocation([
+    fileURLToPath(new URL("./gemini-auth.py", import.meta.url)),
+  ]);
+  const result = run(cmd, args, { encoding: "utf8", timeout: 60_000, maxBuffer: 1024 * 1024 });
+  let data;
+  try {
+    data = JSON.parse(result.stdout);
+  } catch {
+    throw new Error(
+      "Gemini service-account authentication failed; check Python and install google-auth requests",
+    );
+  }
+  if (result.status !== 0 || !data.token) {
+    // Do not echo subprocess output: it could contain credentials.
+    throw new Error(
+      "Gemini service-account authentication failed; check service-account JSON, permissions, and Python packages google-auth requests",
+    );
+  }
+  const headers = { Authorization: `Bearer ${data.token}` };
+  if (data.project) headers["x-goog-user-project"] = data.project;
+  return { headers, secret: data.token };
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/gemini-auth.py b/.claude/skills/media-use/audio/scripts/lib/gemini-auth.py
new file mode 100644
index 0000000..db5b3b2
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/gemini-auth.py
@@ -0,0 +1,52 @@
+"""Obtain Gemini OAuth headers without persisting credentials or tokens."""
+
+import json
+import os
+import sys
+
+# Keep the credential subprocess protocol UTF-8 on every platform.
+for _stream in (sys.stdout, sys.stderr):
+    if hasattr(_stream, "reconfigure"):
+        _stream.reconfigure(encoding="utf-8", errors=_stream.errors)
+
+
+def authenticate():
+    try:
+        from google.auth.transport.requests import Request
+        from google.oauth2 import service_account
+    except ImportError:
+        return {"error": "Service-account auth needs Python packages: pip install google-auth requests"}
+
+    try:
+        path = os.environ.get("GOOGLE_APPLICATION_CREDENTIALS")
+        if path:
+            with open(path, encoding="utf-8") as source:
+                info = json.load(source)
+        else:
+            info = json.loads(os.environ["GCS_CREDS"])
+        if info.get("type") != "service_account":
+            return {"error": "Gemini requires service-account JSON, not user ADC credentials"}
+        # Only exchange credentials with Google's OAuth server.
+        info["token_uri"] = "https://oauth2.googleapis.com/token"
+        credentials = service_account.Credentials.from_service_account_info(
+            info,
+            scopes=[
+                "https://www.googleapis.com/auth/generative-language.retriever",
+            ],
+        )
+        credentials.refresh(Request())
+        project = (
+            os.environ.get("GOOGLE_CLOUD_PROJECT")
+            or os.environ.get("GCLOUD_PROJECT_ID")
+            or info.get("project_id")
+        )
+        return {"token": credentials.token, "project": project}
+    except Exception:
+        # Library exceptions can contain credential data. Never forward them.
+        return {"error": "Gemini service-account authentication failed; check credentials, permissions, and network access"}
+
+
+if __name__ == "__main__":
+    result = authenticate()
+    print(json.dumps(result))
+    sys.exit(1 if "error" in result else 0)
diff --git a/.claude/skills/media-use/audio/scripts/lib/gemini-auth.test.mjs b/.claude/skills/media-use/audio/scripts/lib/gemini-auth.test.mjs
new file mode 100644
index 0000000..a7720e8
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/gemini-auth.test.mjs
@@ -0,0 +1,86 @@
+import { spawnSync } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { pythonInvocation } from "./python.mjs";
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { geminiAuth, geminiConfigured } from "./gemini-auth.mjs";
+import { pickProvider } from "./tts.mjs";
+
+function env(t) {
+  const saved = { ...process.env };
+  for (const key of [
+    "GEMINI_API_KEY",
+    "GOOGLE_API_KEY",
+    "GOOGLE_APPLICATION_CREDENTIALS",
+    "GCS_CREDS",
+  ])
+    delete process.env[key];
+  t.after(() => {
+    process.env = saved;
+  });
+}
+
+test("API keys take precedence over service accounts without invoking Python", (t) => {
+  env(t);
+  process.env.GEMINI_API_KEY = "gemini-key";
+  process.env.GOOGLE_API_KEY = "google-key";
+  process.env.GCS_CREDS = "private-json";
+  const run = () => assert.fail("must not spawn Python");
+  assert.deepEqual(geminiAuth({ run }).headers, { "x-goog-api-key": "gemini-key" });
+  delete process.env.GEMINI_API_KEY;
+  assert.deepEqual(geminiAuth({ run }).headers, { "x-goog-api-key": "google-key" });
+});
+
+test("service-account configuration selects Gemini and returns scoped helper headers", (t) => {
+  env(t);
+  assert.equal(geminiConfigured(), false);
+  assert.throws(() => geminiAuth(), /needs GEMINI_API_KEY/);
+  for (const key of ["GOOGLE_APPLICATION_CREDENTIALS", "GCS_CREDS"]) {
+    process.env[key] = "credential-source";
+    assert.equal(pickProvider("gemini"), "gemini");
+    const auth = geminiAuth({
+      run: (_, args, options) => {
+        assert.ok(args.at(-1).endsWith("gemini-auth.py"));
+        assert.ok(!args.includes("credential-source"));
+        assert.equal(options.timeout, 60000);
+        return {
+          status: 0,
+          stdout: JSON.stringify({ token: "access-token", project: "quota-project" }),
+        };
+      },
+    });
+    assert.deepEqual(auth.headers, {
+      Authorization: "Bearer access-token",
+      "x-goog-user-project": "quota-project",
+    });
+    delete process.env[key];
+  }
+});
+
+test("failed, malformed, or missing Python output cannot leak secrets or fall back", (t) => {
+  env(t);
+  process.env.GCS_CREDS = "private-json";
+  for (const result of [
+    { status: 1, stdout: '{"error":"private-json"}', stderr: "private-json" },
+    { status: null, stdout: "private-json", error: new Error("private-json") },
+    { status: 0, stdout: "{}" },
+  ]) {
+    assert.throws(
+      () => geminiAuth({ run: () => result }),
+      (error) => {
+        assert.match(error.message, /authentication failed/);
+        assert.ok(!error.message.includes("private-json"));
+        return true;
+      },
+    );
+  }
+});
+
+// Keep the Python credential-boundary suite reachable from the normal Node CI runner.
+test("Python service-account boundary validates credentials, scope, transport and errors", () => {
+  const { cmd, args } = pythonInvocation([
+    fileURLToPath(new URL("./gemini-auth_test.py", import.meta.url)),
+  ]);
+  const result = spawnSync(cmd, args, { encoding: "utf8", timeout: 30_000 });
+  assert.equal(result.status, 0, result.stderr || result.error?.message);
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/gemini-auth_test.py b/.claude/skills/media-use/audio/scripts/lib/gemini-auth_test.py
new file mode 100644
index 0000000..598d4b4
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/gemini-auth_test.py
@@ -0,0 +1,90 @@
+"""Credential-boundary tests; stub Google's transport, never use real secrets."""
+
+import importlib.util
+import json
+import os
+import sys
+from pathlib import Path
+import tempfile
+import types
+import unittest
+from unittest.mock import Mock, patch
+
+
+# Keep the credential subprocess protocol UTF-8 on every platform.
+for _stream in (sys.stdout, sys.stderr):
+    if hasattr(_stream, "reconfigure"):
+        _stream.reconfigure(encoding="utf-8", errors=_stream.errors)
+
+spec = importlib.util.spec_from_file_location("gemini_auth", Path(__file__).with_name("gemini-auth.py"))
+auth = importlib.util.module_from_spec(spec)
+spec.loader.exec_module(auth)
+
+
+class AuthenticationTests(unittest.TestCase):
+    def setUp(self):
+        self.info = {"type": "service_account", "project_id": "account-project", "token_uri": "https://untrusted.invalid/token"}
+        self.credentials = Mock(token="fixture-token")
+        self.factory = Mock(return_value=self.credentials)
+        self.request = Mock(return_value=object())
+        transport = types.ModuleType("google.auth.transport.requests")
+        transport.Request = self.request
+        oauth = types.ModuleType("google.oauth2")
+        oauth.service_account = types.SimpleNamespace(Credentials=types.SimpleNamespace(from_service_account_info=self.factory))
+        modules = {name: types.ModuleType(name) for name in ("google", "google.auth", "google.auth.transport")}
+        modules.update({"google.auth.transport.requests": transport, "google.oauth2": oauth})
+        self.addCleanup(patch.stopall)
+        patch.dict("sys.modules", modules).start()
+        patch.dict(os.environ, {"GCS_CREDS": json.dumps(self.info)}, clear=True).start()
+
+    def test_scope_endpoint_and_refresh(self):
+        self.assertEqual(auth.authenticate(), {"token": "fixture-token", "project": "account-project"})
+        info = self.factory.call_args.args[0]
+        self.assertEqual(info["token_uri"], "https://oauth2.googleapis.com/token")
+        self.assertEqual(self.factory.call_args.kwargs["scopes"], ["https://www.googleapis.com/auth/generative-language.retriever"])
+        self.credentials.refresh.assert_called_once_with(self.request.return_value)
+
+    def test_file_takes_precedence_over_json_environment(self):
+        with tempfile.TemporaryDirectory() as directory:
+            path = Path(directory) / "service.json"
+            path.write_text(json.dumps({**self.info, "project_id": "file-project"}), encoding="utf-8")
+            os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = str(path)
+            os.environ["GCS_CREDS"] = "invalid-json"
+            self.assertEqual(auth.authenticate()["project"], "file-project")
+
+    def test_quota_project_precedence(self):
+        os.environ["GCLOUD_PROJECT_ID"] = "alias-project"
+        self.assertEqual(auth.authenticate()["project"], "alias-project")
+        os.environ["GOOGLE_CLOUD_PROJECT"] = "explicit-project"
+        self.assertEqual(auth.authenticate()["project"], "explicit-project")
+
+    def test_user_adc_is_rejected_before_exchange(self):
+        os.environ["GCS_CREDS"] = json.dumps({"type": "authorized_user"})
+        self.assertIn("service-account JSON", auth.authenticate()["error"])
+        self.factory.assert_not_called()
+
+    def test_invalid_json_or_missing_file_does_not_fall_back(self):
+        os.environ["GCS_CREDS"] = "private-invalid-json"
+        self.assertIn("error", auth.authenticate())
+        os.environ["GCS_CREDS"] = json.dumps(self.info)
+        os.environ["GOOGLE_APPLICATION_CREDENTIALS"] = "/missing/service-account-fixture.json"
+        self.assertIn("error", auth.authenticate())
+        self.factory.assert_not_called()
+
+    def test_library_errors_are_redacted(self):
+        for boundary in (self.factory, self.credentials.refresh):
+            with self.subTest(boundary=boundary):
+                boundary.side_effect = RuntimeError("private-key-and-token")
+                result = auth.authenticate()
+                self.assertIn("error", result)
+                self.assertNotIn("private-key-and-token", json.dumps(result))
+                boundary.side_effect = None
+
+    def test_missing_dependency_has_actionable_error(self):
+        with patch.dict("sys.modules", {"google.auth.transport.requests": None}):
+            self.assertIn("pip install google-auth requests", auth.authenticate()["error"])
+        self.factory.assert_not_called()
+
+
+if __name__ == "__main__":
+    unittest.main()
diff --git a/.claude/skills/media-use/audio/scripts/lib/gemini-tts.mjs b/.claude/skills/media-use/audio/scripts/lib/gemini-tts.mjs
new file mode 100644
index 0000000..bf94cb8
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/gemini-tts.mjs
@@ -0,0 +1,122 @@
+import { mkdirSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
+import { geminiAuth } from "./gemini-auth.mjs";
+
+export const GEMINI_TTS_MODEL = "gemini-3.8-flash-tts";
+
+export const GEMINI_TTS_MODELS = [
+  GEMINI_TTS_MODEL,
+  "gemini-3.8-flash-lite-tts",
+  "gemini-3.1-flash-tts-preview",
+  "gemini-2.5-pro-preview-tts",
+  "gemini-2.5-flash-preview-tts",
+];
+
+// 3.8 returns WAV; older models return PCM that we wrap without resampling.
+// The shared engine transcribes the saved audio for word timings.
+export async function synthesizeGemini(
+  { text, voiceId = "Kore", model = GEMINI_TTS_MODEL, style, speed = 1, wavAbs },
+  { fetchImpl = fetch, authenticate = geminiAuth } = {},
+) {
+  let secret;
+  try {
+    if (!GEMINI_TTS_MODELS.includes(model)) {
+      throw new Error(`Unsupported Gemini TTS model: ${model}`);
+    }
+    if (speed !== 1) throw new Error("Gemini TTS uses style for pacing; omit speed or use 1");
+    const modern = model.startsWith("gemini-3.8-");
+    if (!modern && /^(voice_|voicekey_)/.test(voiceId)) {
+      throw new Error(
+        "Custom Gemini voices require a 3.8 TTS model; use a prebuilt voice with older models",
+      );
+    }
+    const auth = authenticate();
+    secret = auth.secret;
+    const content = {
+      type: "text",
+      text:
+        !modern && style ? `Read the following text with this delivery: ${style}\n\n${text}` : text,
+    };
+    if (modern && style) content.annotations = [{ type: "speech_metadata", style }];
+    const response = await fetchImpl(
+      "https://generativelanguage.googleapis.com/v1beta/interactions",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...auth.headers },
+        signal: AbortSignal.timeout(120_000),
+        body: JSON.stringify({
+          model,
+          input: [{ type: "user_input", content: [content] }],
+          response_format: modern ? { type: "audio", mime_type: "audio/wav" } : { type: "audio" },
+          generation_config: { speech_config: [{ voice: voiceId }] },
+          store: false,
+        }),
+      },
+    );
+    if (!response.ok) {
+      const detail = await response.text();
+      throw new Error(`Gemini TTS HTTP ${response.status}: ${detail}`);
+    }
+    const payload = await response.json();
+    if (payload.status !== "completed") {
+      throw new Error(`Gemini TTS did not complete (${payload.status ?? "missing status"})`);
+    }
+    const audio = (payload.steps ?? [])
+      .filter((step) => step.type === "model_output")
+      .flatMap((step) => step.content ?? [])
+      .filter((part) => part.type === "audio");
+    if (audio.length !== 1 || !audio[0].data) {
+      throw new Error("Gemini TTS returned no single audio block");
+    }
+    let bytes = Buffer.from(audio[0].data, "base64");
+    if (!modern && /^audio\/l16(?:;|$)/i.test(audio[0].mime_type ?? "")) {
+      bytes = pcmToWav(bytes, audio[0].mime_type);
+    } else if (audio[0].mime_type !== "audio/wav") {
+      throw new Error("Gemini TTS returned an unsupported audio format");
+    }
+    if (
+      bytes.length <= 44 ||
+      bytes.toString("ascii", 0, 4) !== "RIFF" ||
+      bytes.toString("ascii", 8, 12) !== "WAVE"
+    ) {
+      throw new Error("Gemini TTS returned invalid WAV audio");
+    }
+    mkdirSync(dirname(wavAbs), { recursive: true });
+    writeFileSync(wavAbs, bytes);
+    return { ok: true, words: null };
+  } catch (error) {
+    // Error responses must never echo the credential into logs or metadata.
+    const message = String(error?.message ?? error);
+    return {
+      ok: false,
+      words: null,
+      error: secret ? message.split(secret).join("[redacted]") : message,
+    };
+  }
+}
+
+function pcmToWav(pcm, mime) {
+  const rate = Number(/(?:^|;)\s*rate=(\d+)(?:;|$)/i.exec(mime)?.[1]);
+  const channels = /(?:^|;)\s*channels=([^;]+)/i.exec(mime)?.[1];
+  const codec = /(?:^|;)\s*codec=([^;]+)/i.exec(mime)?.[1];
+  if ((channels && channels.trim() !== "1") || (codec && codec.trim() !== "pcm")) {
+    throw new Error("Gemini TTS returned unsupported PCM channels or codec");
+  }
+  if (!Number.isInteger(rate) || rate < 8000 || rate > 96000 || !pcm.length || pcm.length % 2) {
+    throw new Error("Gemini TTS returned invalid PCM audio or sample rate");
+  }
+  const header = Buffer.alloc(44);
+  header.write("RIFF");
+  header.writeUInt32LE(36 + pcm.length, 4);
+  header.write("WAVEfmt ", 8);
+  header.writeUInt32LE(16, 16);
+  header.writeUInt16LE(1, 20);
+  header.writeUInt16LE(1, 22);
+  header.writeUInt32LE(rate, 24);
+  header.writeUInt32LE(rate * 2, 28);
+  header.writeUInt16LE(2, 32);
+  header.writeUInt16LE(16, 34);
+  header.write("data", 36);
+  header.writeUInt32LE(pcm.length, 40);
+  return Buffer.concat([header, pcm]);
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/gemini-tts.test.mjs b/.claude/skills/media-use/audio/scripts/lib/gemini-tts.test.mjs
new file mode 100644
index 0000000..7c28e8d
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/gemini-tts.test.mjs
@@ -0,0 +1,243 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, readFileSync, rmSync, existsSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { synthesizeGemini, GEMINI_TTS_MODEL } from "./gemini-tts.mjs";
+import { pickProvider, resolveVoiceId, synthesizeOne } from "./tts.mjs";
+
+function fixture(t) {
+  const dir = mkdtempSync(join(tmpdir(), "gemini-tts-"));
+  const saved = { ...process.env };
+  process.env.GEMINI_API_KEY = "test-gemini-key";
+  delete process.env.GOOGLE_API_KEY;
+  delete process.env.GOOGLE_APPLICATION_CREDENTIALS;
+  delete process.env.GCS_CREDS;
+  t.after(() => {
+    process.env = saved;
+    rmSync(dir, { recursive: true, force: true });
+  });
+  const wav = Buffer.alloc(48);
+  wav.write("RIFF");
+  wav.writeUInt32LE(40, 4);
+  wav.write("WAVEfmt ", 8);
+  wav.writeUInt32LE(16, 16);
+  wav.writeUInt16LE(1, 20);
+  wav.writeUInt16LE(1, 22);
+  wav.writeUInt32LE(24000, 24);
+  wav.writeUInt32LE(48000, 28);
+  wav.writeUInt16LE(2, 32);
+  wav.writeUInt16LE(16, 34);
+  wav.write("data", 36);
+  wav.writeUInt32LE(4, 40);
+  const audio = { type: "audio", mime_type: "audio/wav", data: wav.toString("base64") };
+  const payload = { status: "completed", steps: [{ type: "model_output", content: [audio] }] };
+  return {
+    wav,
+    audio,
+    payload,
+    args: { text: "Hello there.", voiceId: "Kore", wavAbs: join(dir, "voice", "one.wav") },
+  };
+}
+
+test("Gemini preserves verbatim text, directs style separately, saves WAV and requests transcription", async (t) => {
+  const { wav, payload, args } = fixture(t);
+  t.mock.method(globalThis, "fetch", async (url, options) => {
+    assert.equal(url, "https://generativelanguage.googleapis.com/v1beta/interactions");
+    assert.equal(options.headers["x-goog-api-key"], "test-gemini-key");
+    const body = JSON.parse(options.body);
+    assert.equal(body.model, GEMINI_TTS_MODEL);
+    assert.equal(body.store, false);
+    assert.deepEqual(body.input[0].content, [
+      {
+        type: "text",
+        text: args.text,
+        annotations: [{ type: "speech_metadata", style: "Warm and calm" }],
+      },
+    ]);
+    assert.deepEqual(body.generation_config.speech_config, [{ voice: "Kore" }]);
+    assert.equal(body.response_format.mime_type, "audio/wav");
+    return Response.json(payload);
+  });
+  const result = await synthesizeOne({ ...args, provider: "gemini", style: "Warm and calm" });
+  assert.deepEqual(result, { ok: true, words: null });
+  assert.deepEqual(readFileSync(args.wavAbs), wav);
+});
+
+test("Flash-Lite and GOOGLE_API_KEY work without a Gemini key", async (t) => {
+  const { payload, args } = fixture(t);
+  delete process.env.GEMINI_API_KEY;
+  process.env.GOOGLE_API_KEY = "test-google-key";
+  assert.equal(pickProvider("gemini"), "gemini");
+  assert.equal(await resolveVoiceId({ provider: "gemini" }), "Kore");
+  const result = await synthesizeGemini(
+    { ...args, model: "gemini-3.8-flash-lite-tts" },
+    {
+      fetchImpl: async (_, options) => {
+        assert.equal(options.headers["x-goog-api-key"], "test-google-key");
+        const body = JSON.parse(options.body);
+        assert.equal(body.model, "gemini-3.8-flash-lite-tts");
+        assert.equal(body.input[0].content[0].annotations, undefined);
+        return Response.json(payload);
+      },
+    },
+  );
+  assert.equal(result.ok, true);
+});
+
+test("Gemini remains opt-in even with a key and preserves explicitly chosen voices", async (t) => {
+  fixture(t);
+  assert.notEqual(pickProvider(), "gemini");
+  assert.equal(
+    await resolveVoiceId({ provider: "gemini", userVoice: "voice_custom" }),
+    "voice_custom",
+  );
+  delete process.env.GEMINI_API_KEY;
+  assert.throws(() => pickProvider("gemini"), /GEMINI_API_KEY or GOOGLE_API_KEY/);
+});
+
+test("invalid config fails before spending a generation request", async (t) => {
+  const { args } = fixture(t);
+  const deps = { fetchImpl: () => assert.fail("must not call the API") };
+  for (const change of [{ model: "gemini-2.5-flash" }, { speed: 1.2 }]) {
+    const result = await synthesizeGemini({ ...args, ...change }, deps);
+    assert.equal(result.ok, false);
+    assert.ok(result.error);
+  }
+  delete process.env.GEMINI_API_KEY;
+  assert.match((await synthesizeGemini(args, deps)).error, /needs GEMINI_API_KEY/);
+  assert.equal(existsSync(args.wavAbs), false);
+});
+
+test("HTTP and network failures stay actionable without leaking the key", async (t) => {
+  const { args } = fixture(t);
+  const result = await synthesizeGemini(args, {
+    fetchImpl: async () => new Response("quota exceeded test-gemini-key", { status: 429 }),
+  });
+  assert.equal(result.ok, false);
+  assert.match(result.error, /HTTP 429: quota exceeded/);
+  assert.ok(!result.error.includes("test-gemini-key"));
+  const timeout = await synthesizeGemini(args, {
+    fetchImpl: async () => {
+      throw new Error("timed out");
+    },
+  });
+  assert.match(timeout.error, /timed out/);
+  assert.equal(existsSync(args.wavAbs), false);
+});
+
+test("incomplete, missing, raw PCM and malformed audio cannot become a successful WAV", async (t) => {
+  const { args, payload, audio } = fixture(t);
+  const cases = [
+    { ...payload, status: "incomplete" },
+    { status: "completed", steps: [] },
+    ...[{ ...audio, mime_type: "audio/l16" }, { ...audio, data: "not audio" }, audio].map(
+      (part, i) => ({
+        status: "completed",
+        steps: [{ type: "model_output", content: i === 2 ? [part, part] : [part] }],
+      }),
+    ),
+  ];
+  for (const body of cases) {
+    const result = await synthesizeGemini(args, { fetchImpl: async () => Response.json(body) });
+    assert.equal(result.ok, false);
+    assert.equal(existsSync(args.wavAbs), false);
+  }
+});
+
+for (const model of [
+  "gemini-3.1-flash-tts-preview",
+  "gemini-2.5-pro-preview-tts",
+  "gemini-2.5-flash-preview-tts",
+]) {
+  test(`${model} uses legacy delivery prompts and wraps PCM as mono WAV`, async (t) => {
+    const { args, wav } = fixture(t);
+    const pcm = wav.subarray(44);
+    const result = await synthesizeGemini(
+      { ...args, model, style: "Warm and clear" },
+      {
+        fetchImpl: async (_, options) => {
+          const body = JSON.parse(options.body);
+          assert.deepEqual(body.response_format, { type: "audio" });
+          assert.equal(body.input[0].content[0].annotations, undefined);
+          assert.ok(body.input[0].content[0].text.endsWith(args.text));
+          assert.ok(body.input[0].content[0].text.includes("Warm and clear"));
+          return Response.json({
+            status: "completed",
+            steps: [
+              {
+                type: "model_output",
+                content: [
+                  {
+                    type: "audio",
+                    mime_type: "audio/L16;codec=pcm;rate=24000",
+                    data: pcm.toString("base64"),
+                  },
+                ],
+              },
+            ],
+          });
+        },
+      },
+    );
+    assert.equal(result.ok, true, result.error);
+    assert.deepEqual(readFileSync(args.wavAbs), wav);
+  });
+}
+
+test("service-account bearer and quota project reach synthesis, and token errors are redacted", async (t) => {
+  const { args, payload } = fixture(t);
+  const authenticate = () => ({
+    headers: { Authorization: "Bearer secret-token", "x-goog-user-project": "test-project" },
+    secret: "secret-token",
+  });
+  const ok = await synthesizeGemini(args, {
+    authenticate,
+    fetchImpl: async (_, options) => {
+      assert.equal(options.headers.Authorization, "Bearer secret-token");
+      assert.equal(options.headers["x-goog-user-project"], "test-project");
+      assert.equal(options.headers["x-goog-api-key"], undefined);
+      return Response.json(payload);
+    },
+  });
+  assert.equal(ok.ok, true);
+  const failed = await synthesizeGemini(args, {
+    authenticate,
+    fetchImpl: async () => new Response("denied secret-token", { status: 403 }),
+  });
+  assert.match(failed.error, /HTTP 403/);
+  assert.ok(!failed.error.includes("secret-token"));
+});
+
+test("older models reject unsupported PCM and custom voices", async (t) => {
+  const { args } = fixture(t);
+  for (const mime of [
+    "audio/l16",
+    "audio/l16;rate=0",
+    "audio/l16;rate=24000;channels=2",
+    "audio/l16;rate=24000;codec=other",
+  ]) {
+    const result = await synthesizeGemini(
+      { ...args, model: "gemini-3.1-flash-tts-preview" },
+      {
+        fetchImpl: async () =>
+          Response.json({
+            status: "completed",
+            steps: [
+              {
+                type: "model_output",
+                content: [{ type: "audio", mime_type: mime, data: "AAAAAA==" }],
+              },
+            ],
+          }),
+      },
+    );
+    assert.equal(result.ok, false);
+    assert.equal(existsSync(args.wavAbs), false);
+  }
+  const result = await synthesizeGemini(
+    { ...args, model: "gemini-2.5-pro-preview-tts", voiceId: "voice_custom" },
+    { fetchImpl: () => assert.fail("must not generate") },
+  );
+  assert.match(result.error, /Custom Gemini voices require/);
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/heygen.mjs b/.claude/skills/media-use/audio/scripts/lib/heygen.mjs
new file mode 100644
index 0000000..24ab9ed
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/heygen.mjs
@@ -0,0 +1,240 @@
+import { fetchMedia } from "../../../scripts/lib/media-fetch.mjs";
+// heygen.mjs — vendored HeyGen REST helpers (auth + transport) for the audio
+// pipeline. The credential resolver matches the hyperframes CLI auth: first
+// usable source wins — a host gateway ($HEYGEN_API_BASE with its own
+// $HEYGEN_API_KEY) → a host-injected OAuth $HEYGEN_ACCESS_TOKEN (Bearer) →
+// $HEYGEN_API_KEY / $HYPERFRAMES_API_KEY → a nearby .env → ~/.heygen/
+// credentials (oauth → Bearer, else api_key → X-Api-Key; $HEYGEN_CONFIG_DIR
+// overrides the dir). $HEYGEN_API_BASE moves every request to that host, as it
+// does for the heygen CLI; plain HTTP needs $HEYGEN_ALLOW_HTTP=1, as there.
+// Vendored so the skill ships standalone. Pure node.
+
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+
+export const HEYGEN_BASE = "https://api.heygen.com/v3";
+
+// The v3 base every request goes to: $HEYGEN_API_BASE when a host app names its own gateway (HyperFrames Desktop
+// forwards it to HeyGen with the API key saved in its Settings), else HeyGen's public API. Plain HTTP carries the key
+// in the clear, so it needs $HEYGEN_ALLOW_HTTP=1, the heygen CLI's own rule.
+export function heygenBase() {
+  const host = process.env.HEYGEN_API_BASE?.trim().replace(/\/+$/, "");
+  if (!host) return HEYGEN_BASE;
+  if (host.startsWith("http://") && process.env.HEYGEN_ALLOW_HTTP !== "1")
+    throw new Error(
+      `HEYGEN_API_BASE (${host}) uses HTTP, which sends the key in plaintext. Set HEYGEN_ALLOW_HTTP=1 to allow it.`,
+    );
+  return `${host}/v3`;
+}
+
+// No base override, or one on HeyGen's own hosts (a canary or dev API).
+function heygenOwnBase() {
+  const host = process.env.HEYGEN_API_BASE?.trim();
+  if (!host) return true;
+  try {
+    const name = new URL(host).hostname;
+    return name === "heygen.com" || name.endsWith(".heygen.com");
+  } catch {
+    return false;
+  }
+}
+
+// A host gateway: the host named its own API base and the key that base accepts. It pays for every call, so it wins
+// over any other credential the environment carries.
+const hostGatewayKey = () =>
+  process.env.HEYGEN_API_BASE?.trim() && process.env.HEYGEN_API_KEY
+    ? process.env.HEYGEN_API_KEY
+    : null;
+export const HEYGEN_CLI_SOURCE_HEADERS = { "X-HeyGen-Source": "cli" };
+// Tool-attribution sent on EVERY media-use HeyGen call regardless of auth type, so
+// the backend can isolate media-use consumption from other free TTS / avatar video.
+// Unconditional — a paying user's media-use call is still media-use — unlike the
+// OAuth-only cli-source header above, which also gates the free allowance.
+export const HEYGEN_CLIENT_SOURCE_HEADERS = { "X-HeyGen-Client-Source": "media-use" };
+
+// A missing `.env`, or a `.env` folder (some home dirs have one), is no env file: null. Read without checking first,
+// so the file cannot change between a check and the read.
+function envFileText(path) {
+  try {
+    return readFileSync(path, "utf8");
+  } catch (error) {
+    if (["ENOENT", "ENOTDIR", "EISDIR"].includes(error.code)) return null;
+    throw error;
+  }
+}
+
+// A host app sets these in the environment it spawns, never in a project file: a project's .env naming its own base
+// would send the person's shell HEYGEN_API_KEY to that host.
+const HOST_ONLY = new Set(["HEYGEN_API_BASE", "HEYGEN_ALLOW_HTTP"]);
+
+// Walk up ≤5 dirs from startDir; load the first .env (shell env always wins).
+export function loadEnvFromDir(startDir) {
+  let dir = resolve(startDir);
+  for (let i = 0; i < 5; i++) {
+    const text = envFileText(join(dir, ".env"));
+    if (text != null) {
+      for (const raw of text.split("\n")) {
+        let line = raw.trim();
+        if (!line || line.startsWith("#")) continue;
+        if (line.startsWith("export ")) line = line.slice(7).trim();
+        const eq = line.indexOf("=");
+        if (eq < 1) continue;
+        const key = line.slice(0, eq).trim();
+        let val = line.slice(eq + 1).trim();
+        if (val.startsWith('"') || val.startsWith("'")) {
+          const q = val[0];
+          const end = val.indexOf(q, 1);
+          val = end > 0 ? val.slice(1, end) : val.slice(1);
+        }
+        if (!HOST_ONLY.has(key) && !(key in process.env)) process.env[key] = val;
+      }
+      return;
+    }
+    const parent = dirname(dir);
+    if (parent === dir) break;
+    dir = parent;
+  }
+}
+
+// → { headers } | { expired: true } | null. Never throws.
+export function heygenCredential() {
+  const cred = resolveCredential();
+  return cred?.unreadable ? null : cred;
+}
+
+// heygenCredential's answer, or { unreadable: { file, code } } when the credentials path exists but cannot be read
+// (a folder, a locked ~/.heygen), so heygenAuthHeaders can say to fix that path: logging in again would fail there too.
+// Read without checking first, so the file cannot change between a check and the read.
+function resolveCredential() {
+  const gatewayKey = hostGatewayKey();
+  if (gatewayKey) return { headers: { "X-Api-Key": gatewayKey } };
+  // Every other credential belongs to HeyGen: a base on any other host gets none of them.
+  if (!heygenOwnBase()) return null;
+  const accessToken = process.env.HEYGEN_ACCESS_TOKEN;
+  if (accessToken) return { headers: { Authorization: `Bearer ${accessToken}` } };
+  const envKey = process.env.HEYGEN_API_KEY || process.env.HYPERFRAMES_API_KEY;
+  if (envKey) return { headers: { "X-Api-Key": envKey } };
+
+  const file = join(process.env.HEYGEN_CONFIG_DIR || join(homedir(), ".heygen"), "credentials");
+  let raw;
+  try {
+    raw = readFileSync(file, "utf8").trim();
+  } catch (error) {
+    return error.code === "ENOENT" ? null : { unreadable: { file, code: error.code } };
+  }
+  if (!raw) return null;
+  if (!raw.startsWith("{")) return { headers: { "X-Api-Key": raw } };
+
+  // A malformed credentials file (partial write / wrong shape) must degrade to
+  // "no credential", not crash the engine at startup.
+  let cred;
+  try {
+    cred = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  const oauth = cred.oauth;
+  if (oauth?.access_token) {
+    const expired = oauth.expires_at && new Date(oauth.expires_at).getTime() - 60_000 < Date.now();
+    if (!expired) return { headers: { Authorization: `Bearer ${oauth.access_token}` } };
+    if (!cred.api_key) return { expired: true };
+  }
+  if (cred.api_key) return { headers: { "X-Api-Key": cred.api_key } };
+  return null;
+}
+
+// → "oauth" | "api_key" | null. Same oauth-vs-api-key check heygenAuthHeaders()
+// makes internally, exposed on its own so callers that only need to *tag* the
+// auth path (telemetry) don't have to parse headers back apart. Never throws:
+// no credential (or an expired one) is just `null`, same as a fresh resolve
+// with nothing to tag.
+export function heygenAuthMethod() {
+  const cred = heygenCredential();
+  if (!cred?.headers) return null;
+  return "Authorization" in cred.headers ? "oauth" : "api_key";
+}
+
+// → auth headers object, or throw with a fix hint.
+export function heygenAuthHeaders() {
+  const cred = resolveCredential();
+  if (cred?.headers) {
+    // Only tag OAuth (Bearer) traffic as cli-source — the backend uses it to
+    // grant the free allowance for OAuth requests and ignores it for API-key
+    // (X-Api-Key) traffic, where it's dead metadata.
+    const isOauth = "Authorization" in cred.headers;
+    return isOauth
+      ? { ...cred.headers, ...HEYGEN_CLI_SOURCE_HEADERS, ...HEYGEN_CLIENT_SOURCE_HEADERS }
+      : { ...cred.headers, ...HEYGEN_CLIENT_SOURCE_HEADERS };
+  }
+  if (cred?.unreadable)
+    throw new Error(
+      `HeyGen credentials at ${cred.unreadable.file} can't be read (${cred.unreadable.code}) — fix or remove that path, then run \`npx hyperframes auth login\``,
+    );
+  if (cred?.expired)
+    throw new Error(
+      "HeyGen OAuth token expired — run `npx hyperframes auth refresh` (or `npx hyperframes auth login`)",
+    );
+  throw new Error(
+    "no HeyGen credentials — set $HEYGEN_API_KEY, or run `npx hyperframes auth login` (writes ~/.heygen/credentials)",
+  );
+}
+
+// Authed JSON request against the v3 API; throws on a non-OK status.
+export async function heygenJSON(path, { method = "GET", headers = {}, body } = {}) {
+  const opts = { method, headers: { ...HEYGEN_CLIENT_SOURCE_HEADERS, ...headers } };
+  if (body !== undefined) {
+    opts.headers["Content-Type"] = "application/json";
+    opts.body = JSON.stringify(body);
+  }
+  const res = await fetch(`${heygenBase()}${path}`, opts);
+  if (!res.ok) {
+    const detail = await res.text().catch(() => "");
+    const message = `HeyGen ${method} ${path} → HTTP ${res.status}${detail ? `\n${detail.slice(0, 300)}` : ""}`;
+    throw Object.assign(new Error(message), { status: res.status, body: detail });
+  }
+  // A DELETE may answer 204 with no body.
+  const text = await res.text();
+  return text ? JSON.parse(text) : {};
+}
+
+// HeyGen's own words for a failed call: its {"error":{"message"}}, else the raw body, else the error's message.
+export function heygenMessage(e) {
+  if (!e?.body) return e?.message ? String(e.message) : String(e);
+  try {
+    return JSON.parse(e.body).error?.message ?? e.body;
+  } catch {
+    return e.body;
+  }
+}
+
+// Download a (presigned) URL to destPath; returns byte length.
+export async function downloadTo(url, destPath) {
+  const res = await fetchMedia(url);
+  if (!res.ok) throw new Error(`download HTTP ${res.status}: ${String(url).slice(0, 80)}`);
+  const bytes = Buffer.from(await res.arrayBuffer());
+  mkdirSync(dirname(destPath), { recursive: true });
+  writeFileSync(destPath, bytes);
+  return bytes.length;
+}
+
+// Retrieval search over HeyGen's audio catalog (NOT generation). type =
+// "music" | "sound_effects". Returns the ranked results array (best first); each
+// item has a presigned `audio_url` (+ `duration`, `description`, `name`, `score`).
+// `query` is required (≥1 char, empty → HTTP 400) and `limit` is capped at 50.
+// `minScore`: omit to use the server default (0.7). That default is TOO HIGH for
+// sound_effects — good SFX hits score ~0.5–0.67, so callers wanting SFX should
+// pass a lower floor (~0.4); music scores high and is fine at the default.
+export async function searchSounds(query, type, headers, { limit = 5, minScore } = {}) {
+  const params = new URLSearchParams({ query, type, limit: String(limit) });
+  if (minScore != null) params.set("min_score", String(minScore));
+  const payload = await heygenJSON(`/audio/sounds?${params.toString()}`, { headers });
+  // `data` comes back as a ranked array (best first). Older responses keyed it by
+  // numeric index ("0","1",…); normalize both shapes to an array (empty → []).
+  const data = payload?.data ?? payload;
+  if (Array.isArray(data)) return data;
+  if (data && typeof data === "object") return Object.values(data);
+  throw new Error(
+    `unexpected /audio/sounds shape — top keys: ${Object.keys(payload ?? {}).join(", ")}`,
+  );
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/heygen.test.mjs b/.claude/skills/media-use/audio/scripts/lib/heygen.test.mjs
new file mode 100644
index 0000000..8698feb
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/heygen.test.mjs
@@ -0,0 +1,292 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from "node:fs";
+import { createServer } from "node:http";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import {
+  heygenAuthHeaders,
+  heygenAuthMethod,
+  heygenBase,
+  heygenCredential,
+  heygenJSON,
+  loadEnvFromDir,
+} from "./heygen.mjs";
+
+const HEYGEN_ENV = [
+  "HEYGEN_ACCESS_TOKEN",
+  "HEYGEN_API_KEY",
+  "HYPERFRAMES_API_KEY",
+  "HEYGEN_CONFIG_DIR",
+  "HEYGEN_API_BASE",
+  "HEYGEN_ALLOW_HTTP",
+];
+
+// Runs fn with every HeyGen variable unset, then puts them back; an async fn restores once it settles.
+function withCleanHeygenEnv(fn) {
+  const previous = Object.fromEntries(HEYGEN_ENV.map((name) => [name, process.env[name]]));
+  const restore = () => {
+    for (const [name, value] of Object.entries(previous)) {
+      if (value === undefined) delete process.env[name];
+      else process.env[name] = value;
+    }
+  };
+  for (const name of HEYGEN_ENV) delete process.env[name];
+  let result;
+  try {
+    result = fn();
+  } catch (error) {
+    restore();
+    throw error;
+  }
+  if (result && typeof result.then === "function") return result.finally(restore);
+  restore();
+  return result;
+}
+
+test("heygenAuthHeaders does not tag API-key requests as CLI traffic, but still carries the media-use tool tag", () => {
+  withCleanHeygenEnv(() => {
+    process.env.HEYGEN_API_KEY = "hg_test";
+    // API-key requests use normal billing; the backend ignores the cli-source
+    // header for them, so it's not sent. The tool-attribution header IS sent on
+    // every media-use call (any auth type) so the backend can isolate media-use.
+    assert.deepEqual(heygenAuthHeaders(), {
+      "X-Api-Key": "hg_test",
+      "X-HeyGen-Client-Source": "media-use",
+    });
+  });
+});
+
+test("heygenAuthHeaders tags OAuth requests as CLI traffic and with the media-use tool tag", () => {
+  withCleanHeygenEnv(() => {
+    const dir = mkdtempSync(join(tmpdir(), "heygen-cred-"));
+    try {
+      process.env.HEYGEN_CONFIG_DIR = dir;
+      writeFileSync(
+        join(dir, "credentials"),
+        JSON.stringify({
+          oauth: {
+            access_token: "at_test",
+            expires_at: "2099-01-01T00:00:00Z",
+          },
+        }),
+      );
+      assert.deepEqual(heygenAuthHeaders(), {
+        Authorization: "Bearer at_test",
+        "X-HeyGen-Source": "cli",
+        "X-HeyGen-Client-Source": "media-use",
+      });
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
+test("a host-injected HEYGEN_ACCESS_TOKEN wins over an API key and is treated as OAuth", () => {
+  withCleanHeygenEnv(() => {
+    process.env.HEYGEN_ACCESS_TOKEN = "at_host";
+    process.env.HEYGEN_API_KEY = "hg_test";
+    assert.deepEqual(heygenAuthHeaders(), {
+      Authorization: "Bearer at_host",
+      "X-HeyGen-Source": "cli",
+      "X-HeyGen-Client-Source": "media-use",
+    });
+    assert.equal(heygenAuthMethod(), "oauth");
+  });
+});
+
+test("heygenAuthMethod returns api_key for an env API key, without tagging headers", () => {
+  withCleanHeygenEnv(() => {
+    process.env.HEYGEN_API_KEY = "hg_test";
+    assert.equal(heygenAuthMethod(), "api_key");
+  });
+});
+
+test("heygenAuthMethod returns oauth for a live OAuth credential", () => {
+  withCleanHeygenEnv(() => {
+    const dir = mkdtempSync(join(tmpdir(), "heygen-cred-"));
+    try {
+      process.env.HEYGEN_CONFIG_DIR = dir;
+      writeFileSync(
+        join(dir, "credentials"),
+        JSON.stringify({
+          oauth: {
+            access_token: "at_test",
+            expires_at: "2099-01-01T00:00:00Z",
+          },
+        }),
+      );
+      assert.equal(heygenAuthMethod(), "oauth");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
+test("heygenAuthMethod returns null with no credential at all", () => {
+  withCleanHeygenEnv(() => {
+    const dir = mkdtempSync(join(tmpdir(), "heygen-cred-"));
+    try {
+      process.env.HEYGEN_CONFIG_DIR = dir; // no credentials file written
+      assert.equal(heygenAuthMethod(), null);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
+test("loadEnvFromDir skips a .env folder and loads the .env file above it", () => {
+  const root = mkdtempSync(join(tmpdir(), "heygen-env-"));
+  const project = join(root, "project");
+  mkdirSync(join(project, ".env"), { recursive: true });
+  writeFileSync(join(root, ".env"), "MEDIA_USE_ENV_DIR_TEST=from-parent\n");
+  try {
+    loadEnvFromDir(project);
+    assert.equal(process.env.MEDIA_USE_ENV_DIR_TEST, "from-parent");
+  } finally {
+    delete process.env.MEDIA_USE_ENV_DIR_TEST;
+    rmSync(root, { recursive: true, force: true });
+  }
+});
+
+test("a project's .env cannot name the HeyGen base, so a shell key never leaves for its host", () => {
+  withCleanHeygenEnv(() => {
+    const project = mkdtempSync(join(tmpdir(), "heygen-env-"));
+    writeFileSync(
+      join(project, ".env"),
+      "HEYGEN_API_BASE=https://proxy.example.com\nHEYGEN_ALLOW_HTTP=1\nMEDIA_USE_ENV_BASE_TEST=loaded\n",
+    );
+    try {
+      process.env.HEYGEN_API_KEY = "hg_shell_real";
+      loadEnvFromDir(project);
+      assert.equal(process.env.MEDIA_USE_ENV_BASE_TEST, "loaded");
+      assert.equal(process.env.HEYGEN_API_BASE, undefined);
+      assert.equal(process.env.HEYGEN_ALLOW_HTTP, undefined);
+      assert.equal(heygenBase(), "https://api.heygen.com/v3");
+    } finally {
+      delete process.env.MEDIA_USE_ENV_BASE_TEST;
+      rmSync(project, { recursive: true, force: true });
+    }
+  });
+});
+
+test("heygenAuthMethod returns null when the credentials path is a folder", () => {
+  withCleanHeygenEnv(() => {
+    const dir = mkdtempSync(join(tmpdir(), "heygen-cred-"));
+    try {
+      mkdirSync(join(dir, "credentials"));
+      process.env.HEYGEN_CONFIG_DIR = dir;
+      assert.equal(heygenAuthMethod(), null);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
+test("heygenAuthMethod returns null when the credentials path is a symlink loop", () => {
+  withCleanHeygenEnv(() => {
+    const dir = mkdtempSync(join(tmpdir(), "heygen-cred-"));
+    try {
+      symlinkSync(join(dir, "credentials"), join(dir, "credentials"));
+      process.env.HEYGEN_CONFIG_DIR = dir;
+      assert.equal(heygenAuthMethod(), null);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
+test("heygenAuthHeaders says to fix an unreadable credentials path, and to log in when there is none", () => {
+  withCleanHeygenEnv(() => {
+    const dir = mkdtempSync(join(tmpdir(), "heygen-cred-"));
+    try {
+      process.env.HEYGEN_CONFIG_DIR = dir;
+      assert.throws(() => heygenAuthHeaders(), /no HeyGen credentials/);
+      mkdirSync(join(dir, "credentials"));
+      assert.equal(heygenCredential(), null);
+      assert.throws(
+        () => heygenAuthHeaders(),
+        (error) =>
+          error.message.includes(join(dir, "credentials")) &&
+          /fix or remove that path/.test(error.message),
+      );
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
+
+test("heygenBase is HeyGen's public API unless a host names another", () => {
+  withCleanHeygenEnv(() => {
+    assert.equal(heygenBase(), "https://api.heygen.com/v3");
+    process.env.HEYGEN_API_BASE = "https://api-canary.heygen.com/";
+    assert.equal(heygenBase(), "https://api-canary.heygen.com/v3");
+  });
+});
+
+test("heygenBase refuses a plain-HTTP host unless HEYGEN_ALLOW_HTTP is set, as the heygen CLI does", () => {
+  withCleanHeygenEnv(() => {
+    process.env.HEYGEN_API_BASE = "http://127.0.0.1:4100";
+    assert.throws(() => heygenBase(), /HEYGEN_ALLOW_HTTP=1/);
+    process.env.HEYGEN_ALLOW_HTTP = "1";
+    assert.equal(heygenBase(), "http://127.0.0.1:4100/v3");
+  });
+});
+
+test("a host gateway (HEYGEN_API_BASE with its own HEYGEN_API_KEY) wins over a host OAuth token", () => {
+  withCleanHeygenEnv(() => {
+    process.env.HEYGEN_API_BASE = "http://127.0.0.1:4100";
+    process.env.HEYGEN_ALLOW_HTTP = "1";
+    process.env.HEYGEN_API_KEY = "gateway-token";
+    process.env.HEYGEN_ACCESS_TOKEN = "at_host";
+    assert.deepEqual(heygenAuthHeaders(), {
+      "X-Api-Key": "gateway-token",
+      "X-HeyGen-Client-Source": "media-use",
+    });
+    assert.equal(heygenAuthMethod(), "api_key");
+  });
+});
+
+test("heygenJSON sends its request to the host's HEYGEN_API_BASE with the host's key", async () => {
+  /** @type {{ url?: string, key?: string | string[] }} */
+  const seen = {};
+  const server = createServer((req, res) => {
+    seen.url = req.url;
+    seen.key = req.headers["x-api-key"];
+    res.writeHead(200, { "content-type": "application/json" }).end('{"data":[]}');
+  });
+  await new Promise((done) => server.listen(0, "127.0.0.1", done));
+  const { port } = /** @type {import("node:net").AddressInfo} */ (server.address());
+  try {
+    await withCleanHeygenEnv(async () => {
+      process.env.HEYGEN_API_BASE = `http://127.0.0.1:${port}`;
+      process.env.HEYGEN_ALLOW_HTTP = "1";
+      process.env.HEYGEN_API_KEY = "gateway-token";
+      const reply = await heygenJSON("/voices?limit=1", { headers: heygenAuthHeaders() });
+      assert.deepEqual(reply, { data: [] });
+    });
+    assert.equal(seen.url, "/v3/voices?limit=1");
+    assert.equal(seen.key, "gateway-token");
+  } finally {
+    server.close();
+  }
+});
+
+test("a base that isn't HeyGen's gets no stored or host OAuth credential, only a key named for it", () => {
+  withCleanHeygenEnv(() => {
+    const dir = mkdtempSync(join(tmpdir(), "heygen-cred-"));
+    try {
+      process.env.HEYGEN_CONFIG_DIR = dir;
+      writeFileSync(join(dir, "credentials"), JSON.stringify({ api_key: "hg_stored" }));
+      process.env.HEYGEN_ACCESS_TOKEN = "at_host";
+      process.env.HEYGEN_API_BASE = "https://proxy.example.com";
+      assert.equal(heygenCredential(), null);
+      assert.throws(() => heygenAuthHeaders(), /no HeyGen credentials/);
+      // HeyGen's own hosts keep every credential source.
+      process.env.HEYGEN_API_BASE = "https://api-canary.heygen.com";
+      assert.equal(heygenAuthMethod(), "oauth");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/main-module.mjs b/.claude/skills/media-use/audio/scripts/lib/main-module.mjs
new file mode 100644
index 0000000..5fd2fa9
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/main-module.mjs
@@ -0,0 +1,13 @@
+import { realpathSync } from "node:fs";
+import { pathToFileURL } from "node:url";
+
+// Node resolves symlinks in the main module's import.meta.url but argv[1] keeps the invoked
+// spelling (a symlinked skills dir, or /tmp vs /private/tmp on macOS), so compare real paths.
+export function isMainModule(importMetaUrl) {
+  if (!process.argv[1]) return false;
+  try {
+    return pathToFileURL(realpathSync(process.argv[1])).href === importMetaUrl;
+  } catch {
+    return false;
+  }
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/media-record.mjs b/.claude/skills/media-use/audio/scripts/lib/media-record.mjs
new file mode 100644
index 0000000..a11433c
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/media-record.mjs
@@ -0,0 +1,118 @@
+import { existsSync } from "node:fs";
+import { extname, join } from "node:path";
+import { AGENT_SOURCES, latestRecordFor, recordInPlace } from "../../../scripts/lib/manifest.mjs";
+import { regenerateIndex } from "../../../scripts/lib/index-gen.mjs";
+
+/**
+ * Where the engine may write `rel`: there, unless another file of this run has `taken` it or the file there is
+ * the person's (not `reusable` and not recorded as agent-made). Then the first free `name-2.ext`, with an anomaly.
+ */
+export function agentWritePath(
+  hyperframesDir,
+  rel,
+  { anomalies, taken = new Set(), reusable = () => false },
+) {
+  const free = (path) =>
+    !taken.has(path) &&
+    (!existsSync(join(hyperframesDir, path)) ||
+      reusable(path) ||
+      AGENT_SOURCES.includes(latestRecordFor(hyperframesDir, path)?.source));
+  if (free(rel)) return rel;
+  const ext = extname(rel);
+  const stem = rel.slice(0, rel.length - ext.length);
+  let n = 2;
+  while (!free(`${stem}-${n}${ext}`)) n++;
+  const path = `${stem}-${n}${ext}`;
+  const why = taken.has(rel)
+    ? "another file of this run goes there"
+    : "the file there is yours (the media manifest does not record it as made by the engine)";
+  const note = `${rel}: kept, because ${why}; writing ${path} instead (audio_meta.json has the path used)`;
+  if (!anomalies.includes(note)) anomalies.push(note);
+  return path;
+}
+
+/** Each spoken line's file, picked before lines synthesize concurrently so two never land on one free name. */
+export function voicePaths(hyperframesDir, lines, anomalies) {
+  const taken = new Set();
+  const paths = new Map();
+  for (const line of lines.filter((l) => String(l.text ?? "").trim())) {
+    const rel = agentWritePath(hyperframesDir, `assets/voice/${line.id}.wav`, { anomalies, taken });
+    taken.add(rel);
+    paths.set(String(line.id), rel);
+  }
+  return paths;
+}
+
+// A cue's source as the manifest records it, and who provided it. A source missing here records as the person's
+// file, so every rerun would write a numbered copy beside it.
+const SFX_SOURCES = {
+  openverse: { source: "search", provider: "openverse.audio" },
+  local: { source: "bundled", provider: "bundled.sfx" },
+};
+
+// The files one engine run wrote, each with how it was made, for the project's media manifest.
+export function writtenAssets({ only, lines, voices, ttsProvider, bgm, bgmFields, sfx }) {
+  const textById = new Map(lines.map((line) => [String(line.id), String(line.text ?? "").trim()]));
+  const assets = [];
+  if (only.has("tts")) {
+    for (const voice of voices) {
+      assets.push({
+        path: voice.path,
+        type: "voice",
+        source: "generated",
+        intent: textById.get(voice.id),
+        duration: voice.duration_s,
+        provider: ttsProvider,
+      });
+    }
+  }
+  if (only.has("bgm") && bgm && !bgmFields.bgm_pending) {
+    assets.push({
+      path: bgm.path,
+      type: "bgm",
+      source: bgmFields.bgm_mode === "retrieve" ? "search" : "generated",
+      intent: bgm.query,
+      duration: bgm.duration_s,
+      provider: bgmFields.bgm_provider,
+    });
+  }
+  if (only.has("sfx")) {
+    for (const cue of new Map(sfx.map((entry) => [entry.file, entry])).values()) {
+      const { source, provider } = SFX_SOURCES[cue.source];
+      assets.push({
+        path: cue.file,
+        type: "sfx",
+        source,
+        intent: cue.name,
+        duration: cue.duration_s,
+        provider,
+      });
+    }
+  }
+  return assets;
+}
+
+/** Records each asset where it lies; returns one anomaly per file left unrecorded. */
+export function recordInManifest(hyperframesDir, assets) {
+  const anomalies = [];
+  for (const { path, type, source, intent, duration, provider } of assets) {
+    try {
+      recordInPlace(hyperframesDir, {
+        type,
+        path,
+        source,
+        description: intent,
+        duration,
+        provenance: { provider: provider || "local", ...(intent && { prompt: intent }) },
+      });
+    } catch (error) {
+      anomalies.push(`${path}: not recorded in the media manifest (${error.message})`);
+    }
+  }
+  try {
+    if (anomalies.length < assets.length) regenerateIndex(hyperframesDir);
+  } catch (error) {
+    anomalies.push(`.media/index.md: not refreshed (${error.message})`);
+  }
+  return anomalies;
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/media-record.test.mjs b/.claude/skills/media-use/audio/scripts/lib/media-record.test.mjs
new file mode 100644
index 0000000..d6e7458
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/media-record.test.mjs
@@ -0,0 +1,224 @@
+import { strict as assert } from "node:assert";
+import { test } from "node:test";
+import { mkdirSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { findByPrompt, readManifest } from "../../../scripts/lib/manifest.mjs";
+import { agentWritePath, recordInManifest, voicePaths, writtenAssets } from "./media-record.mjs";
+
+const noBgm = { bgm: null, bgmFields: { bgm_pending: false } };
+
+function project(t) {
+  const dir = mkdtempSync(join(tmpdir(), "mu-record-"));
+  t.after(() => rmSync(dir, { recursive: true, force: true }));
+  return dir;
+}
+
+test("a voice run leaves a manifest entry marked generated", (t) => {
+  const dir = project(t);
+  const assets = writtenAssets({
+    only: new Set(["tts"]),
+    lines: [{ id: "01", text: "Welcome to the launch" }],
+    voices: [{ id: "01", path: "assets/voice/01.wav", duration_s: 2.34 }],
+    ttsProvider: "kokoro",
+    sfx: [],
+    ...noBgm,
+  });
+
+  assert.deepEqual(recordInManifest(dir, assets), []);
+
+  assert.deepEqual(
+    readManifest(dir).map(({ path, type, source, description, duration, provenance }) => ({
+      path,
+      type,
+      source,
+      description,
+      duration,
+      provenance,
+    })),
+    [
+      {
+        path: "assets/voice/01.wav",
+        type: "voice",
+        source: "generated",
+        description: "Welcome to the launch",
+        duration: 2.3,
+        provenance: { provider: "kokoro", prompt: "Welcome to the launch" },
+      },
+    ],
+  );
+});
+
+const voiceLine = (intent, duration) => [
+  { path: "assets/voice/01.wav", type: "voice", source: "generated", intent, duration },
+];
+
+test("a rerun that writes the same take keeps one record, and a new length is a new take", (t) => {
+  const dir = project(t);
+
+  recordInManifest(dir, voiceLine("Hello world", 1.25));
+  recordInManifest(dir, voiceLine("Hello world", 1.25));
+  assert.equal(readManifest(dir).length, 1);
+
+  recordInManifest(dir, voiceLine("Hello world", 2));
+  assert.deepEqual(
+    readManifest(dir).map(({ duration }) => duration),
+    [1.3, 2],
+  );
+});
+
+test("a rerun with new text records the new take, and the old text no longer finds the file", (t) => {
+  const dir = project(t);
+
+  recordInManifest(dir, voiceLine("Hello world", 1.25));
+  recordInManifest(dir, voiceLine("Welcome back to the show", 3.5));
+
+  assert.deepEqual(
+    readManifest(dir).map(({ description, duration }) => [description, duration]),
+    [
+      ["Hello world", 1.3],
+      ["Welcome back to the show", 3.5],
+    ],
+  );
+  assert.equal(findByPrompt(dir, "Hello world", "voice"), null);
+  const index = readFileSync(join(dir, ".media/index.md"), "utf8");
+  assert.match(index, /Welcome back to the show/);
+  assert.doesNotMatch(index, /Hello world/);
+  assert.equal(findByPrompt(dir, "Welcome back to the show", "voice")?.path, "assets/voice/01.wav");
+});
+
+test("music and sound effects are marked by where they came from", () => {
+  const assets = writtenAssets({
+    only: new Set(["bgm", "sfx"]),
+    lines: [],
+    voices: [{ id: "01", path: "assets/voice/01.wav" }],
+    bgm: { path: "assets/bgm/track.mp3", query: "calm" },
+    bgmFields: { bgm_pending: false, bgm_mode: "retrieve" },
+    sfx: [
+      { file: "assets/sfx/whoosh.mp3", name: "whoosh", source: "local" },
+      { file: "assets/sfx/whoosh.mp3", name: "whoosh", source: "local" },
+      { file: "assets/sfx/glass.mp3", name: "glass", source: "openverse" },
+    ],
+  });
+
+  assert.deepEqual(
+    assets.map(({ path, source, provider }) => [path, source, provider]),
+    [
+      ["assets/bgm/track.mp3", "search", undefined],
+      ["assets/sfx/whoosh.mp3", "bundled", "bundled.sfx"],
+      ["assets/sfx/glass.mp3", "search", "openverse.audio"],
+    ],
+  );
+});
+
+test("a rerun of an Openverse sound effect writes over its own file, not a numbered copy", (t) => {
+  const dir = project(t);
+  mkdirSync(join(dir, "assets/sfx"), { recursive: true });
+  const anomalies = [];
+  for (let run = 0; run < 3; run++) {
+    const file = agentWritePath(dir, "assets/sfx/door-knock.mp3", { anomalies });
+    writeFileSync(join(dir, file), "knock");
+    const sfx = [{ file, name: "door knock", source: "openverse", duration_s: 1 }];
+    recordInManifest(
+      dir,
+      writtenAssets({ only: new Set(["sfx"]), lines: [], voices: [], sfx, ...noBgm }),
+    );
+  }
+
+  assert.deepEqual(readdirSync(join(dir, "assets/sfx")), ["door-knock.mp3"]);
+  assert.deepEqual(anomalies, []);
+  assert.equal(readManifest(dir).length, 1);
+});
+
+test("music made locally is marked generated once it is ready, not while pending", () => {
+  const written = (bgm_pending) =>
+    writtenAssets({
+      only: new Set(["bgm"]),
+      lines: [],
+      voices: [],
+      sfx: [],
+      bgm: { path: "assets/bgm/track.wav" },
+      bgmFields: { bgm_pending, bgm_mode: "detached-single" },
+    }).map(({ source }) => source);
+
+  assert.deepEqual(written(true), []);
+  assert.deepEqual(written(false), ["generated"]);
+});
+
+test("a file that cannot be recorded becomes an anomaly, not a failure", (t) => {
+  const dir = project(t);
+  writeFileSync(join(dir, ".media"), "a file where the media folder should be");
+
+  const anomalies = recordInManifest(dir, [
+    { path: "assets/voice/01.wav", type: "voice", source: "generated" },
+  ]);
+
+  assert.equal(anomalies.length, 1);
+  assert.match(anomalies[0], /^assets\/voice\/01\.wav: not recorded in the media manifest/);
+});
+
+test("the engine writes over only its own files, else the next free name", (t) => {
+  const dir = project(t);
+  mkdirSync(join(dir, "assets/sfx"), { recursive: true });
+  const names = ["mine", "made", "adopted", "twice", "twice-2", "kept", "kept-2"];
+  for (const name of names) writeFileSync(join(dir, `assets/sfx/${name}.mp3`), name);
+  for (const path of ["assets/sfx/made.mp3", "assets/sfx/kept-2.mp3"])
+    recordInManifest(dir, [{ path, type: "sfx", source: "search" }]);
+  recordInManifest(dir, [{ path: "assets/sfx/adopted.mp3", type: "sfx", source: "existing" }]);
+  const anomalies = [];
+  const at = (name, reusable) =>
+    agentWritePath(dir, `assets/sfx/${name}.mp3`, { anomalies, reusable });
+
+  assert.equal(at("new"), "assets/sfx/new.mp3");
+  assert.equal(at("made"), "assets/sfx/made.mp3");
+  assert.equal(
+    at("mine", (path) => path === "assets/sfx/mine.mp3"),
+    "assets/sfx/mine.mp3",
+  );
+  assert.deepEqual(anomalies, []);
+  assert.equal(at("mine"), "assets/sfx/mine-2.mp3");
+  assert.equal(at("adopted"), "assets/sfx/adopted-2.mp3");
+  assert.equal(at("twice"), "assets/sfx/twice-3.mp3");
+  assert.equal(at("kept"), "assets/sfx/kept-2.mp3");
+  assert.equal(anomalies.length, 4);
+  assert.match(
+    anomalies[0],
+    /^assets\/sfx\/mine\.mp3: kept, .* writing assets\/sfx\/mine-2\.mp3 instead/,
+  );
+});
+
+test("two spoken lines never share a file when one's name is taken by the person", (t) => {
+  const dir = project(t);
+  mkdirSync(join(dir, "assets/voice"), { recursive: true });
+  writeFileSync(join(dir, "assets/voice/hook.wav"), "the person's own hook");
+  const anomalies = [];
+
+  const paths = voicePaths(
+    dir,
+    [
+      { id: "hook", text: "First" },
+      { id: "hook-2", text: "Second" },
+      { id: "blank", text: " " },
+    ],
+    anomalies,
+  );
+
+  assert.deepEqual(Object.fromEntries(paths), {
+    hook: "assets/voice/hook-2.wav",
+    "hook-2": "assets/voice/hook-2-2.wav",
+  });
+  assert.equal(anomalies.length, 2);
+});
+
+test("a record never takes the id of a download still in flight", (t) => {
+  const dir = project(t);
+  mkdirSync(join(dir, ".media/audio/bgm"), { recursive: true });
+  writeFileSync(join(dir, ".media/audio/bgm/bgm_001.mp3"), "");
+
+  recordInManifest(dir, [{ path: "assets/bgm/track.wav", type: "bgm", source: "generated" }]);
+
+  assert.deepEqual(
+    readManifest(dir).map(({ id }) => id),
+    ["bgm_002"],
+  );
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/openverse.mjs b/.claude/skills/media-use/audio/scripts/lib/openverse.mjs
new file mode 100644
index 0000000..87f80aa
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/openverse.mjs
@@ -0,0 +1,134 @@
+// Sound effects from Openverse (https://api.openverse.org): free, no key.
+// Anonymous use is rate limited (20 requests a minute, 200 a day); callers fall
+// back to the bundled library when it is unavailable.
+
+import { mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { dirname } from "node:path";
+
+const OPENVERSE_AUDIO_URL = "https://api.openverse.org/v1/audio/";
+// The only licences media-use accepts: no NonCommercial, ShareAlike or NoDerivatives.
+export const OPENVERSE_SFX_LICENSES = new Set(["cc0", "by"]);
+const PLAYABLE_FILETYPES = new Set(["mp3", "wav", "ogg", "flac"]);
+const MAX_SFX_MS = 15000;
+const IDEAL_SFX_MS = 4000;
+const BY_PENALTY = 2;
+const SEARCH_TIMEOUT_MS = 10000;
+
+// Openverse text lands in markdown and JSON: one line, no control or markdown-structure characters, bounded.
+const oneLine = (text) =>
+  String(text ?? "")
+    .replace(/[\p{Cc}`[\]<>\\]+/gu, " ")
+    .trim()
+    .slice(0, 300);
+// Openverse's audio providers (api.openverse.org/v1/audio/stats/); a new provider's link is dropped until listed.
+const SOURCE_HOSTS = new Set(["freesound.org", "www.jamendo.com", "commons.wikimedia.org"]);
+function httpsUrl(url, hosts) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" && (!hosts || hosts.has(parsed.hostname))
+      ? oneLine(parsed.href)
+      : "";
+  } catch {
+    return "";
+  }
+}
+
+/** Openverse could not answer (offline, rate limited, server error): stop asking it this run. */
+export class OpenverseUnavailableError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "OpenverseUnavailableError";
+  }
+}
+
+function usable(result) {
+  return (
+    OPENVERSE_SFX_LICENSES.has(result?.license) &&
+    PLAYABLE_FILETYPES.has(result.filetype) &&
+    typeof result.url === "string" &&
+    result.url.startsWith("https://") &&
+    Number.isFinite(result.duration) &&
+    result.duration > 0 &&
+    result.duration <= MAX_SFX_MS
+  );
+}
+
+// Lower is better: relevance position, then seconds past a typical cue length, then CC0 over CC BY.
+function penalty(result, position) {
+  const longBy = Math.max(0, result.duration - IDEAL_SFX_MS) / 1000;
+  return position + longBy + (result.license === "by" ? BY_PENALTY : 0);
+}
+
+/** Best usable sound in Openverse's relevance-ordered results, or null. */
+export function pickOpenverseSfx(results) {
+  let best = null;
+  results.forEach((result, position) => {
+    if (!usable(result)) return;
+    const score = penalty(result, position);
+    if (!best || score < best.score) best = { result, score };
+  });
+  if (!best) return null;
+  const r = best.result;
+  return {
+    id: r.id,
+    url: r.url,
+    ext: `.${r.filetype}`,
+    title: oneLine(r.title),
+    creator: oneLine(r.creator),
+    license: r.license,
+    licenseUrl: httpsUrl(r.license_url),
+    sourceUrl: httpsUrl(r.foreign_landing_url, SOURCE_HOSTS),
+    credit: oneLine(r.attribution),
+    durationS: Math.round(r.duration) / 1000,
+  };
+}
+
+/** Best licensed sound effect for `query`, null on no match; throws OpenverseUnavailableError. */
+export async function searchOpenverseSfx(query, { fetchImpl = fetch } = {}) {
+  const params = new URLSearchParams({
+    q: query,
+    page_size: "20",
+    license: [...OPENVERSE_SFX_LICENSES].join(","),
+  });
+  let response;
+  try {
+    response = await fetchImpl(`${OPENVERSE_AUDIO_URL}?${params}`, {
+      headers: { Accept: "application/json" },
+      signal: AbortSignal.timeout(SEARCH_TIMEOUT_MS),
+    });
+  } catch (error) {
+    throw new OpenverseUnavailableError(`Openverse unreachable (${error.message})`);
+  }
+  if (response.status === 429)
+    throw new OpenverseUnavailableError("Openverse rate limit reached (HTTP 429)");
+  if (!response.ok) throw new OpenverseUnavailableError(`Openverse HTTP ${response.status}`);
+  let body;
+  try {
+    body = await response.json();
+  } catch {
+    throw new OpenverseUnavailableError("Openverse returned non-JSON");
+  }
+  return pickOpenverseSfx(Array.isArray(body?.results) ? body.results : []);
+}
+
+/** Record a CC BY sound's credit for `file` in the project's credits file (one line per file). */
+export function writeSfxCredit(creditsPath, file, sound) {
+  if (sound.license !== "by") return;
+  // The sound may come from a saved record, not this run's pick: clean it again here.
+  const sourceUrl = httpsUrl(sound.sourceUrl, SOURCE_HOSTS);
+  const source = sourceUrl ? ` Source: ${sourceUrl}` : "";
+  const line = `- \`${file}\`: ${oneLine(sound.credit)}${source}`;
+  let prior = "";
+  try {
+    prior = readFileSync(creditsPath, "utf8");
+  } catch (error) {
+    if (error.code !== "ENOENT") throw error;
+  }
+  const kept = prior
+    .split("\n")
+    .filter((l) => l.startsWith("- ") && !l.startsWith(`- \`${file}\`:`));
+  const header =
+    "# Sound effect credits\n\nThese sounds are licensed CC BY: credit them wherever the video is published.\n\n";
+  mkdirSync(dirname(creditsPath), { recursive: true });
+  writeFileSync(creditsPath, `${header}${[...kept, line].join("\n")}\n`);
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/python.mjs b/.claude/skills/media-use/audio/scripts/lib/python.mjs
new file mode 100644
index 0000000..f5cd7fe
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/python.mjs
@@ -0,0 +1,77 @@
+// python.mjs — resolve which Python 3 executable to spawn, per platform.
+//
+// The audio engine (tts.mjs, bgm.mjs) shells out to `python3` for ElevenLabs
+// TTS and the local Lyria/MusicGen BGM paths. `python3` is the right name on
+// macOS/Linux, but on Windows the python.org installer only creates
+// `python.exe` plus the `py` launcher — there is no `python3.exe` (only the
+// Microsoft Store build adds one). So a bare `spawn("python3", …)` ENOENTs on a
+// standard Windows Python install, silently disabling every Python-backed audio
+// feature until the user hand-creates a `python3.exe` shim (reported twice).
+//
+// Resolve once, per process: probe the platform's candidates in order and take
+// the first that actually runs. `py` is the launcher, so it needs a `-3` arg to
+// select Python 3 — hence candidates are argv PREFIXES, not bare names.
+//
+// `HYPERFRAMES_PYTHON` (the documented PEP 668 venv setup) wins over the PATH probe, matching
+// the CLI's `findPython()`; ignoring it made BGM silently disable itself (#4614).
+
+import { spawnSync } from "node:child_process";
+
+// Accept only an interpreter whose `--version` reports Python 3, as the CLI's
+// `validatePythonOverride()` does. Exit status alone would take a Python 2
+// `python` (or any executable that exits 0) that `doctor` rejects. Python 2
+// prints its version to stderr, so read both streams.
+export function defaultProbe(cmd, args) {
+  try {
+    const result = spawnSync(cmd, args, { encoding: "utf-8", timeout: 5000 });
+    return result.status === 0 && /Python 3/.test(`${result.stdout}${result.stderr}`);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Pick the argv prefix that launches Python 3 on this platform.
+ * Returns e.g. `["python3"]`, `["python"]`, or `["py", "-3"]`.
+ *
+ * Pure except for `probe` (which runs `<cmd> … --version`); `platform`, `probe`
+ * and `env` are injectable so every branch is unit-testable without spawning.
+ * If nothing probes OK, falls back to the canonical name for the platform so
+ * the eventual spawn fails loudly exactly as it did before — never worse.
+ */
+export function resolvePythonCommand(
+  platform = process.platform,
+  probe = defaultProbe,
+  env = process.env,
+) {
+  const override = env.HYPERFRAMES_PYTHON;
+  if (override && probe(override, ["--version"])) return [override];
+  const candidates =
+    platform === "win32" ? [["python3"], ["python"], ["py", "-3"]] : [["python3"], ["python"]];
+  for (const prefix of candidates) {
+    if (probe(prefix[0], [...prefix.slice(1), "--version"])) return prefix;
+  }
+  return candidates[0];
+}
+
+let cached = null;
+
+/** Cached `resolvePythonCommand()` — probing spawns, so resolve at most once. */
+export function pythonCommand() {
+  if (!cached) cached = resolvePythonCommand();
+  return cached;
+}
+
+/**
+ * Build a `{ cmd, args }` for running Python 3 with `extraArgs`, using the
+ * resolved (or supplied) prefix. Keeps the launcher's `-3` (and any future
+ * prefix args) ahead of the caller's own arguments.
+ */
+export function pythonInvocation(extraArgs, prefix = pythonCommand()) {
+  return { cmd: prefix[0], args: [...prefix.slice(1), ...extraArgs] };
+}
+
+/** Test-only: clear the cached resolution so a test can re-probe. */
+export function _resetPythonCommandCacheForTests() {
+  cached = null;
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/python.test.mjs b/.claude/skills/media-use/audio/scripts/lib/python.test.mjs
new file mode 100644
index 0000000..babea4e
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/python.test.mjs
@@ -0,0 +1,136 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { chmodSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { defaultProbe, resolvePythonCommand, pythonInvocation } from "./python.mjs";
+
+// Regression: on Windows a standard python.org install has no `python3.exe`
+// (only `python.exe` + the `py` launcher), so `spawn("python3", …)` ENOENTs and
+// every Python-backed audio feature silently no-ops. resolvePythonCommand takes
+// injectable platform/probe params so all branches are testable without
+// spawning a real interpreter.
+
+// probeFor(names): a probe that reports success only for the given argv-0 names.
+function probeFor(...names) {
+  const ok = new Set(names);
+  return (cmd) => ok.has(cmd);
+}
+
+test("non-win32 uses python3 when it runs", () => {
+  assert.deepEqual(resolvePythonCommand("linux", probeFor("python3")), ["python3"]);
+  assert.deepEqual(resolvePythonCommand("darwin", probeFor("python3")), ["python3"]);
+});
+
+test("win32 prefers python3 when the Microsoft Store build provides it", () => {
+  assert.deepEqual(resolvePythonCommand("win32", probeFor("python3", "python", "py")), ["python3"]);
+});
+
+test("win32 falls back to python.exe when python3 is absent (python.org install)", () => {
+  // The exact reported scenario: no python3, but `python` exists.
+  assert.deepEqual(resolvePythonCommand("win32", probeFor("python", "py")), ["python"]);
+});
+
+test("win32 falls back to the py launcher with -3 when only py exists", () => {
+  assert.deepEqual(resolvePythonCommand("win32", probeFor("py")), ["py", "-3"]);
+});
+
+test("py launcher is probed as `py -3 --version`, not bare `py`", () => {
+  const seen = [];
+  const probe = (cmd, args) => {
+    seen.push([cmd, ...args]);
+    return cmd === "py";
+  };
+  resolvePythonCommand("win32", probe);
+  assert.deepEqual(seen.at(-1), ["py", "-3", "--version"]);
+});
+
+test("falls back to the canonical name (loud failure, unchanged) when nothing runs", () => {
+  // No interpreter anywhere — must not throw, and must return python3 so the
+  // eventual spawn fails exactly as it did before this fix, never worse.
+  assert.deepEqual(
+    resolvePythonCommand("win32", () => false),
+    ["python3"],
+  );
+  assert.deepEqual(
+    resolvePythonCommand("linux", () => false),
+    ["python3"],
+  );
+});
+
+// Regression (#4614): on PEP 668 systems the documented setup is a venv named
+// by HYPERFRAMES_PYTHON; the audio engine ignored it and probed the bare
+// system python3, so MusicGen BGM was skipped while `doctor` said installed.
+const VENV = "/home/u/.venvs/hf/bin/python";
+
+test("HYPERFRAMES_PYTHON wins over python3 on PATH when it runs", () => {
+  const env = { HYPERFRAMES_PYTHON: VENV };
+  assert.deepEqual(resolvePythonCommand("darwin", probeFor(VENV, "python3"), env), [VENV]);
+  assert.deepEqual(resolvePythonCommand("win32", probeFor(VENV, "python", "py"), env), [VENV]);
+});
+
+test("a HYPERFRAMES_PYTHON that doesn't run falls through to the PATH probe", () => {
+  const env = { HYPERFRAMES_PYTHON: "/nope/python" };
+  assert.deepEqual(resolvePythonCommand("linux", probeFor("python3"), env), ["python3"]);
+});
+
+test("an empty HYPERFRAMES_PYTHON is ignored without being probed", () => {
+  const seen = [];
+  const probe = (cmd) => {
+    seen.push(cmd);
+    return cmd === "python3";
+  };
+  assert.deepEqual(resolvePythonCommand("linux", probe, { HYPERFRAMES_PYTHON: "" }), ["python3"]);
+  assert.deepEqual(seen, ["python3"]);
+});
+
+// defaultProbe must match the CLI's validatePythonOverride(): exiting 0 is not
+// enough, `--version` has to report Python 3. Stubs are shell scripts, so
+// these run on POSIX only.
+function withStub(script, fn) {
+  const dir = mkdtempSync(join(tmpdir(), "hf-python-probe-"));
+  try {
+    const stub = join(dir, "python");
+    writeFileSync(stub, `#!/bin/sh\n${script}\n`);
+    chmodSync(stub, 0o755);
+    fn(stub);
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+const posixOnly = { skip: process.platform === "win32" && "stub scripts need a POSIX shell" };
+
+test("defaultProbe accepts an interpreter reporting Python 3", posixOnly, () => {
+  withStub('echo "Python 3.12.4"', (stub) => assert.equal(defaultProbe(stub, ["--version"]), true));
+});
+
+test("defaultProbe rejects Python 2, which prints its version to stderr", posixOnly, () => {
+  withStub('echo "Python 2.7.18" >&2', (stub) =>
+    assert.equal(defaultProbe(stub, ["--version"]), false),
+  );
+});
+
+test(
+  "defaultProbe rejects an executable that exits 0 without a Python 3 version",
+  posixOnly,
+  () => {
+    withStub("exit 0", (stub) => assert.equal(defaultProbe(stub, ["--version"]), false));
+  },
+);
+
+test("defaultProbe rejects a command that doesn't exist", () => {
+  assert.equal(defaultProbe("/nonexistent/hf-python", ["--version"]), false);
+});
+
+test("pythonInvocation prepends the resolved prefix ahead of caller args", () => {
+  assert.deepEqual(pythonInvocation(["-c", "import x"], ["python"]), {
+    cmd: "python",
+    args: ["-c", "import x"],
+  });
+  // The py launcher's -3 must stay ahead of the caller's own arguments.
+  assert.deepEqual(pythonInvocation(["-c", "import x"], ["py", "-3"]), {
+    cmd: "py",
+    args: ["-3", "-c", "import x"],
+  });
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/sfx.mjs b/.claude/skills/media-use/audio/scripts/lib/sfx.mjs
new file mode 100644
index 0000000..b967e89
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/sfx.mjs
@@ -0,0 +1,196 @@
+// sfx.mjs — sound effects for the media audio engine. Each cue is searched on
+// Openverse (CC0 / CC BY only, see openverse.mjs). A cue Openverse cannot answer,
+// and every cue after Openverse is unreachable or rate limited, resolves against
+// the bundled 21-file library (assets/sfx/manifest.json) instead.
+//
+// A cue that matches nothing is skipped (recorded as an anomaly); SFX never
+// blocks a render. Every cue sits at volume ~0.35, under voice + BGM.
+
+import { copyFileSync, existsSync, mkdirSync, readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { downloadTo } from "./heygen.mjs";
+import { OpenverseUnavailableError, searchOpenverseSfx, writeSfxCredit } from "./openverse.mjs";
+import { latestRecordFor } from "../../../scripts/lib/manifest.mjs";
+import { agentWritePath } from "./media-record.mjs";
+
+export const BUNDLED_SFX_DIR = join(
+  dirname(fileURLToPath(import.meta.url)),
+  "..",
+  "..",
+  "assets",
+  "sfx",
+);
+const SFX_VOLUME = 0.35;
+const slug = (s) =>
+  s
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 40) || "x";
+const r3 = (x) => Number(x.toFixed(3));
+
+// Lookups by manifest key, file basename, and slug of either, so a cue can name
+// "whoosh", "whoosh.mp3", or "ui click" (→ slug match). { error } when unusable.
+function loadBundledLibrary(sfxLibDir) {
+  const manifestPath = join(sfxLibDir, "manifest.json");
+  if (!existsSync(manifestPath)) return { error: `no bundled SFX library at ${sfxLibDir}` };
+  let manifest;
+  try {
+    manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+  } catch (e) {
+    return { error: `bundled SFX manifest parse failed (${e.message})` };
+  }
+  const byKey = new Map();
+  for (const [key, entry] of Object.entries(manifest)) {
+    if (!entry?.file || !isFinite(entry.duration)) continue;
+    const rec = { key, file: entry.file, duration: entry.duration };
+    byKey.set(key, rec);
+    byKey.set(entry.file, rec);
+    byKey.set(slug(key), rec);
+    byKey.set(slug(entry.file.replace(/\.\w+$/, "")), rec);
+  }
+  return { byKey };
+}
+
+// cues: [{ id, name }] (id = the line/frame/scene the cue fires in). Returns
+// { sfx: [{ id, name, file, source, offset_s, duration_s, volume, license?, credit? }], anomalies }.
+export async function resolveSfx({ cues, hyperframesDir, sfxLibDir = BUNDLED_SFX_DIR }) {
+  const sfx = [];
+  const anomalies = [];
+  const destDir = join(hyperframesDir, "assets", "sfx");
+  // Each effect's file this run: one effect named twice gets one file, and two effects never share one.
+  const fileFor = new Map();
+  const taken = () => new Set(fileFor.values());
+  // One Openverse sound per effect name this run, so a repeated cue costs no second request.
+  const openverseFor = new Map();
+  let openverseDown = false;
+  let library;
+
+  // Dedupe identical (id,name) cues — the same effect named twice in one line
+  // downloads/copies once.
+  const seen = new Set();
+  const uniq = cues.filter((c) => {
+    const k = `${c.id}:${c.name}`;
+    if (seen.has(k)) return false;
+    seen.add(k);
+    return true;
+  });
+
+  async function fromOpenverse({ id, name }) {
+    const key = `openverse:${slug(name)}`;
+    let entry = openverseFor.get(key);
+    if (!entry) {
+      const sound = await searchOpenverseSfx(name);
+      if (!sound) return null;
+      const file = agentWritePath(hyperframesDir, `assets/sfx/${slug(name)}${sound.ext}`, {
+        anomalies,
+        taken: taken(),
+      });
+      try {
+        await downloadTo(sound.url, join(hyperframesDir, file));
+      } catch (e) {
+        anomalies.push(`sfx "${name}" (id ${id}): Openverse download failed — ${e.message}`);
+        return null;
+      }
+      fileFor.set(key, file);
+      writeSfxCredit(join(destDir, "CREDITS.md"), file, sound);
+      entry = {
+        file,
+        source: "openverse",
+        duration_s: r3(sound.durationS),
+        license: sound.license,
+        credit: sound.credit,
+      };
+      openverseFor.set(key, entry);
+    }
+    return { id, name, ...entry, offset_s: 0, volume: SFX_VOLUME };
+  }
+
+  function fromBundled({ id, name }) {
+    library ??= loadBundledLibrary(sfxLibDir);
+    if (library.error) {
+      anomalies.push(`sfx "${name}" (id ${id}): ${library.error} — skipped`);
+      return null;
+    }
+    const { byKey } = library;
+    const hit = byKey.get(name) ?? byKey.get(slug(name));
+    if (!hit) {
+      const known = [...new Set([...byKey.values()].map((v) => v.key))].slice(0, 8).join(", ");
+      anomalies.push(
+        `sfx "${name}" (id ${id}): not in bundled library — skipped (have: ${known}…)`,
+      );
+      return null;
+    }
+    mkdirSync(destDir, { recursive: true });
+    const src = join(sfxLibDir, hit.file);
+    const bytes = existsSync(src) ? readFileSync(src) : null;
+    const isLibraryCopy = (rel) =>
+      bytes &&
+      existsSync(join(hyperframesDir, rel)) &&
+      readFileSync(join(hyperframesDir, rel)).equals(bytes);
+    const destRel =
+      fileFor.get(hit.file) ??
+      agentWritePath(hyperframesDir, `assets/sfx/${hit.file}`, {
+        anomalies,
+        taken: taken(),
+        // An unrecorded copy of the library file is one an engine run made before the manifest had it.
+        reusable: (rel) => !latestRecordFor(hyperframesDir, rel) && isLibraryCopy(rel),
+      });
+    const dest = join(hyperframesDir, destRel);
+    // Some installs of the skill ship manifest.json without the mp3s. An entry
+    // pointing at a file we never copied would silently drop downstream, so
+    // skip the cue with a loud anomaly instead.
+    if (bytes) {
+      if (!isLibraryCopy(destRel)) copyFileSync(src, dest);
+    } else if (!existsSync(dest)) {
+      anomalies.push(
+        `sfx "${name}" (id ${id}): bundled file ${hit.file} missing from the offline ` +
+          `library (${sfxLibDir}) — skipped. Reinstall the media-use skill to ` +
+          `restore assets/sfx/*.mp3.`,
+      );
+      return null;
+    } // else the engine's earlier copy at dest stands in for the file this install lacks
+    fileFor.set(hit.file, destRel);
+    return {
+      id,
+      name,
+      file: destRel,
+      source: "local",
+      offset_s: 0,
+      duration_s: r3(hit.duration),
+      volume: SFX_VOLUME,
+    };
+  }
+
+  for (const cue of uniq) {
+    let entry = null;
+    if (!openverseDown) {
+      try {
+        entry = await fromOpenverse(cue);
+      } catch (e) {
+        if (!(e instanceof OpenverseUnavailableError)) throw e;
+        openverseDown = true;
+        anomalies.push(`${e.message}: the remaining SFX cues use the bundled library`);
+      }
+    }
+    entry ??= fromBundled(cue);
+    if (entry) sfx.push(entry);
+  }
+  return { sfx, anomalies };
+}
+
+/**
+ * One sound effect for `query`, saved under the project's assets/sfx/ (the entry point for hosts).
+ * { sound: { file, source, duration_s, license?, credit? } | null, anomalies }.
+ */
+export async function findSoundEffect(query, { hyperframesDir, sfxLibDir = BUNDLED_SFX_DIR }) {
+  const { sfx, anomalies } = await resolveSfx({
+    cues: [{ id: "1", name: query }],
+    hyperframesDir,
+    sfxLibDir,
+  });
+  if (!sfx.length) return { sound: null, anomalies };
+  const { file, source, duration_s, license, credit } = sfx[0];
+  return { sound: { file, source, duration_s, ...(license && { license, credit }) }, anomalies };
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/sfx.test.mjs b/.claude/skills/media-use/audio/scripts/lib/sfx.test.mjs
new file mode 100644
index 0000000..2b437d6
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/sfx.test.mjs
@@ -0,0 +1,331 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { mkdtempSync, mkdirSync, writeFileSync, existsSync, readFileSync, rmSync } from "node:fs";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { appendRecord } from "../../../scripts/lib/manifest.mjs";
+import { BUNDLED_SFX_DIR, findSoundEffect, resolveSfx } from "./sfx.mjs";
+
+// No real network: each test serves Openverse's answers; by default it is unreachable.
+const offline = async () => {
+  throw new TypeError("fetch failed");
+};
+let serve = offline;
+const UNREACHABLE =
+  "Openverse unreachable (fetch failed): the remaining SFX cues use the bundled library";
+globalThis.fetch = (url, init) => serve(String(url), init);
+
+// Offline SFX resolution: the bundled library may ship manifest.json
+// without the actual mp3s. The old code copied only when the source existed but
+// pushed the sfx entry unconditionally — producing a dangling reference that
+// silently dropped downstream ("not on disk"). These tests lock in the loud
+// behavior: a present file is copied + referenced; a missing file yields an
+// anomaly and NO dangling entry.
+
+async function withDirs(fn) {
+  const root = mkdtempSync(join(tmpdir(), "hf-sfx-"));
+  const libDir = join(root, "lib");
+  const projDir = join(root, "proj");
+  mkdirSync(libDir, { recursive: true });
+  mkdirSync(projDir, { recursive: true });
+  try {
+    // `await` is load-bearing: without it the finally cleanup runs before the
+    // async test body resolves, deleting the temp dir mid-assertion.
+    return await fn({ libDir, projDir });
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+}
+
+test("offline: copies and references a present bundled file", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    writeFileSync(
+      join(libDir, "manifest.json"),
+      JSON.stringify({ whoosh: { file: "whoosh.mp3", duration: 0.8 } }),
+    );
+    writeFileSync(join(libDir, "whoosh.mp3"), "ID3-fake-bytes");
+    const { sfx, anomalies } = await resolveSfx({
+      cues: [{ id: "s1", name: "whoosh" }],
+      hyperframesDir: projDir,
+      sfxLibDir: libDir,
+    });
+    assert.equal(sfx.length, 1);
+    assert.equal(sfx[0].file, "assets/sfx/whoosh.mp3");
+    assert.equal(sfx[0].source, "local");
+    assert.ok(existsSync(join(projDir, "assets/sfx/whoosh.mp3")), "mp3 copied into project");
+    assert.deepEqual(anomalies, [UNREACHABLE]);
+  });
+});
+
+test("offline: a matched-but-missing bundled file yields an anomaly and NO dangling entry", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    // Manifest names whoosh.mp3, but the mp3 was never shipped (the reported bug).
+    writeFileSync(
+      join(libDir, "manifest.json"),
+      JSON.stringify({ whoosh: { file: "whoosh.mp3", duration: 0.8 } }),
+    );
+    const { sfx, anomalies } = await resolveSfx({
+      cues: [{ id: "s1", name: "whoosh" }],
+      hyperframesDir: projDir,
+      sfxLibDir: libDir,
+    });
+    assert.equal(sfx.length, 0, "no dangling entry for a file that was never copied");
+    assert.equal(anomalies.length, 2);
+    assert.match(anomalies[1], /missing from the offline library/);
+    assert.ok(!existsSync(join(projDir, "assets/sfx/whoosh.mp3")), "nothing copied");
+  });
+});
+
+const whooshLibrary = (libDir, withFile) => {
+  writeFileSync(
+    join(libDir, "manifest.json"),
+    JSON.stringify({ whoosh: { file: "whoosh.mp3", duration: 0.8 } }),
+  );
+  if (withFile) writeFileSync(join(libDir, "whoosh.mp3"), "ID3-library-bytes");
+};
+const record = (projDir, source) =>
+  appendRecord(projDir, { id: "sfx_001", type: "sfx", path: "assets/sfx/whoosh.mp3", source });
+const bundledOnly = (libDir, projDir) =>
+  resolveSfx({
+    cues: [{ id: "s1", name: "whoosh" }],
+    hyperframesDir: projDir,
+    sfxLibDir: libDir,
+  });
+
+test("offline: the engine's earlier copy stands in for a library file this install lacks", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    whooshLibrary(libDir, false);
+    mkdirSync(join(projDir, "assets/sfx"), { recursive: true });
+    writeFileSync(join(projDir, "assets/sfx/whoosh.mp3"), "engine copy");
+    record(projDir, "bundled");
+
+    const { sfx, anomalies } = await bundledOnly(libDir, projDir);
+
+    assert.deepEqual(
+      sfx.map(({ file }) => file),
+      ["assets/sfx/whoosh.mp3"],
+    );
+    assert.deepEqual(anomalies, [UNREACHABLE]);
+  });
+});
+
+test("offline: a person's file with the library's bytes stays theirs once recorded as their own", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    whooshLibrary(libDir, true);
+    mkdirSync(join(projDir, "assets/sfx"), { recursive: true });
+    writeFileSync(join(projDir, "assets/sfx/whoosh.mp3"), "ID3-library-bytes");
+    record(projDir, "existing");
+
+    const { sfx } = await bundledOnly(libDir, projDir);
+
+    assert.deepEqual(
+      sfx.map(({ file }) => file),
+      ["assets/sfx/whoosh-2.mp3"],
+    );
+    assert.equal(readFileSync(join(projDir, "assets/sfx/whoosh.mp3"), "utf8"), "ID3-library-bytes");
+  });
+});
+
+const libraryWith = (libDir, names) => {
+  const manifest = {};
+  for (const name of names) {
+    manifest[name] = { file: `${name}.mp3`, duration: 0.5 };
+    writeFileSync(join(libDir, `${name}.mp3`), `library ${name}`);
+  }
+  writeFileSync(join(libDir, "manifest.json"), JSON.stringify(manifest));
+};
+const sound = (overrides = {}) => ({
+  id: "ov-1",
+  title: "Swoosh",
+  creator: "Ana",
+  license: "by",
+  foreign_landing_url: "https://freesound.org/s/1",
+  url: "https://cdn.freesound.test/swoosh.mp3",
+  filetype: "mp3",
+  duration: 820,
+  attribution: '"Swoosh" by Ana is licensed under CC BY 4.0.',
+  ...overrides,
+});
+// Openverse stand-in: `answer(query)` gives a search response; any other URL is the sound file.
+function openverse(answer) {
+  const searches = [];
+  serve = async (url) => {
+    const query = new URL(url).searchParams.get("q");
+    if (!url.startsWith("https://api.openverse.org/")) return new Response(`bytes of ${url}`);
+    searches.push(query);
+    return answer(query);
+  };
+  return searches;
+}
+const run = (libDir, projDir, names) =>
+  resolveSfx({
+    cues: names.map((name, index) => ({ id: String(index + 1), name })),
+    hyperframesDir: projDir,
+    sfxLibDir: libDir,
+  });
+
+test("openverse: each cue gets the best licensed sound, with its licence and credit", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    libraryWith(libDir, ["whoosh"]);
+    openverse(() => Response.json({ results: [sound()] }));
+    try {
+      const { sfx, anomalies } = await run(libDir, projDir, ["whoosh"]);
+      assert.deepEqual(sfx, [
+        {
+          id: "1",
+          name: "whoosh",
+          file: "assets/sfx/whoosh.mp3",
+          source: "openverse",
+          duration_s: 0.82,
+          license: "by",
+          credit: '"Swoosh" by Ana is licensed under CC BY 4.0.',
+          offset_s: 0,
+          volume: 0.35,
+        },
+      ]);
+      assert.deepEqual(anomalies, []);
+      assert.equal(
+        readFileSync(join(projDir, "assets/sfx/whoosh.mp3"), "utf8"),
+        "bytes of https://cdn.freesound.test/swoosh.mp3",
+      );
+      assert.match(
+        readFileSync(join(projDir, "assets/sfx/CREDITS.md"), "utf8"),
+        /- `assets\/sfx\/whoosh\.mp3`: "Swoosh" by Ana is licensed under CC BY 4\.0\. Source: https:\/\/freesound\.org\/s\/1/,
+      );
+    } finally {
+      serve = offline;
+    }
+  });
+});
+
+test("openverse: a rate limit sends this and every later cue to the bundled library, asking once", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    libraryWith(libDir, ["whoosh", "pop"]);
+    const searches = openverse(() => new Response("slow down", { status: 429 }));
+    try {
+      const { sfx, anomalies } = await run(libDir, projDir, ["whoosh", "pop"]);
+      assert.deepEqual(searches, ["whoosh"]);
+      assert.deepEqual(
+        sfx.map(({ file, source }) => [file, source]),
+        [
+          ["assets/sfx/whoosh.mp3", "local"],
+          ["assets/sfx/pop.mp3", "local"],
+        ],
+      );
+      assert.equal(readFileSync(join(projDir, "assets/sfx/pop.mp3"), "utf8"), "library pop");
+      assert.deepEqual(anomalies, [
+        "Openverse rate limit reached (HTTP 429): the remaining SFX cues use the bundled library",
+      ]);
+    } finally {
+      serve = offline;
+    }
+  });
+});
+
+test("openverse: a cue with no licensed match falls back to the bundled library alone", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    libraryWith(libDir, ["pop"]);
+    const searches = openverse((query) =>
+      Response.json({ results: query === "pop" ? [sound({ license: "by-nc" })] : [sound()] }),
+    );
+    try {
+      const { sfx } = await run(libDir, projDir, ["pop", "swoosh"]);
+      assert.deepEqual(searches, ["pop", "swoosh"]);
+      assert.deepEqual(
+        sfx.map(({ file, source }) => [file, source]),
+        [
+          ["assets/sfx/pop.mp3", "local"],
+          ["assets/sfx/swoosh.mp3", "openverse"],
+        ],
+      );
+    } finally {
+      serve = offline;
+    }
+  });
+});
+
+test("openverse: a failed download falls back to the bundled file with an anomaly", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    libraryWith(libDir, ["whoosh"]);
+    serve = async (url) =>
+      url.startsWith("https://api.openverse.org/")
+        ? Response.json({ results: [sound()] })
+        : new Response("gone", { status: 404 });
+    try {
+      const { sfx, anomalies } = await run(libDir, projDir, ["whoosh"]);
+      assert.deepEqual(
+        sfx.map(({ file, source }) => [file, source]),
+        [["assets/sfx/whoosh.mp3", "local"]],
+      );
+      assert.match(anomalies[0], /Openverse download failed — download HTTP 404/);
+    } finally {
+      serve = offline;
+    }
+  });
+});
+
+test("openverse: one effect named in two lines is searched and downloaded once", async () => {
+  await withDirs(async ({ libDir, projDir }) => {
+    libraryWith(libDir, []);
+    const searches = openverse(() => Response.json({ results: [sound({ license: "cc0" })] }));
+    try {
+      const { sfx } = await run(libDir, projDir, ["whoosh", "whoosh"]);
+      assert.deepEqual(searches, ["whoosh"]);
+      assert.deepEqual(
+        sfx.map(({ id, file }) => [id, file]),
+        [
+          ["1", "assets/sfx/whoosh.mp3"],
+          ["2", "assets/sfx/whoosh.mp3"],
+        ],
+      );
+      assert.equal(
+        existsSync(join(projDir, "assets/sfx/CREDITS.md")),
+        false,
+        "CC0 needs no credit",
+      );
+    } finally {
+      serve = offline;
+    }
+  });
+});
+
+test("findSoundEffect: a host gets the saved file, licence, credit and duration for one query", async () => {
+  await withDirs(async ({ projDir }) => {
+    const searches = openverse(() => Response.json({ results: [sound()] }));
+    try {
+      assert.deepEqual(await findSoundEffect("whoosh", { hyperframesDir: projDir }), {
+        sound: {
+          file: "assets/sfx/whoosh.mp3",
+          source: "openverse",
+          duration_s: 0.82,
+          license: "by",
+          credit: '"Swoosh" by Ana is licensed under CC BY 4.0.',
+        },
+        anomalies: [],
+      });
+      assert.deepEqual(searches, ["whoosh"]);
+    } finally {
+      serve = offline;
+    }
+  });
+});
+
+test("findSoundEffect: offline, the skill's own bundled library answers", async () => {
+  await withDirs(async ({ projDir }) => {
+    const { sound, anomalies } = await findSoundEffect("whoosh", { hyperframesDir: projDir });
+    assert.deepEqual(sound, {
+      file: "assets/sfx/whoosh.mp3",
+      source: "local",
+      duration_s: sound.duration_s,
+    });
+    assert.deepEqual(
+      readFileSync(join(projDir, sound.file)),
+      readFileSync(join(BUNDLED_SFX_DIR, "whoosh.mp3")),
+    );
+    assert.deepEqual(anomalies, [UNREACHABLE]);
+    assert.equal(
+      (await findSoundEffect("no such sound at all", { hyperframesDir: projDir })).sound,
+      null,
+    );
+  });
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/tts.cleanup.test.mjs b/.claude/skills/media-use/audio/scripts/lib/tts.cleanup.test.mjs
new file mode 100644
index 0000000..1275e60
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/tts.cleanup.test.mjs
@@ -0,0 +1,175 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { chmodSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+
+const ttsUrl = new URL("./tts.mjs", import.meta.url).href;
+const stub = `#!${process.execPath}
+const fs = require("node:fs");
+const path = require("node:path");
+const args = process.argv.slice(2);
+if (args[0] === "--version") {
+  console.log("Python 3.12.0");
+  process.exit(0);
+}
+const input = args[2];
+const output = args[0] === "-c" ? args[4] : args[args.indexOf("--output") + 1];
+const text = fs.readFileSync(input, "utf8");
+fs.writeFileSync(output + ".started", input);
+const finish = () => {
+  if (text === "slow" && !fs.existsSync(process.env.RELEASE_FILE)) {
+    setTimeout(finish, 5);
+    return;
+  }
+  const consumed = fs.readFileSync(input, "utf8");
+  fs.writeFileSync(output + ".json", JSON.stringify({ input, text, consumed, args }));
+  if (process.env.CASE_MODE === "nonzero") process.exit(7);
+  if (process.env.CASE_MODE !== "no-output") fs.writeFileSync(output, consumed);
+};
+setTimeout(finish, 10);
+`;
+
+const exercise = `
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import childProcess from "node:child_process";
+import { syncBuiltinESMExports } from "node:module";
+import { join, dirname } from "node:path";
+const { CASE_ROOT: root, CASE_MODE: mode, CASE_PROVIDER: provider } = process.env;
+const temp = join(root, "tmp");
+const preexisting = join(temp, "hf-txt-preexisting");
+fs.mkdirSync(preexisting);
+fs.writeFileSync(join(preexisting, "marker"), "keep");
+const injected = Object.assign(new Error("synthetic " + mode), { code: "EACCES" });
+const originalMkdtemp = fs.mkdtempSync;
+const originalWrite = fs.writeFileSync;
+const originalRm = fs.rmSync;
+if (mode === "allocation") fs.mkdtempSync = (prefix, ...args) => {
+  if (prefix.startsWith(join(temp, "hf-txt-"))) throw injected;
+  return originalMkdtemp(prefix, ...args);
+};
+if (mode === "write") fs.writeFileSync = (file, ...args) => {
+  if (String(file).endsWith("line.txt")) {
+    originalWrite(file, "partial");
+    throw injected;
+  }
+  return originalWrite(file, ...args);
+};
+if (mode === "spawn-throw") childProcess.spawn = () => { throw injected; };
+if (mode === "cleanup") fs.rmSync = (dir, ...args) => {
+  if (String(dir).startsWith(join(temp, "hf-txt-"))) throw injected;
+  return originalRm(dir, ...args);
+};
+syncBuiltinESMExports();
+const { synthesizeOne } = await import(${JSON.stringify(ttsUrl)});
+const project = join(root, "project");
+const wavAbs = join(project, "line.wav");
+const request = (chosen = provider, text = "synthetic café", output = wavAbs) =>
+  synthesizeOne({ provider: chosen, text, voiceId: "synthetic-voice", lang: "es",
+    speed: 0.8, wavAbs: output, hyperframesDir: project });
+const owned = () => fs.readdirSync(temp).filter(name => name !== "hf-txt-preexisting");
+if (["allocation", "write", "spawn-throw"].includes(mode)) {
+  await assert.rejects(request(), error => error === injected);
+  assert.equal(fs.existsSync(wavAbs), false);
+} else if (mode === "concurrent") {
+  const slowWav = join(project, "slow.wav");
+  const slow = request("elevenlabs", "slow", slowWav);
+  try {
+    const deadline = Date.now() + 5000;
+    while (!fs.existsSync(slowWav + ".started")) {
+      assert.ok(Date.now() < deadline, "slow subprocess must start");
+      await new Promise(resolve => setTimeout(resolve, 5));
+    }
+    const slowInput = fs.readFileSync(slowWav + ".started", "utf8");
+    assert.deepEqual(await request("kokoro"), { ok: true, words: null });
+    assert.deepEqual(owned(), [dirname(slowInput).split(/[\\\\/]/).pop()]);
+    assert.equal(fs.readFileSync(slowInput, "utf8"), "slow");
+  } finally {
+    fs.writeFileSync(process.env.RELEASE_FILE, "release");
+    await slow;
+  }
+  assert.equal(fs.readFileSync(slowWav, "utf8"), "slow");
+} else {
+  const result = await request();
+  const label = provider === "elevenlabs" ? "elevenlabs (python)" : "kokoro (npx hyperframes tts)";
+  if (["nonzero", "enoent", "no-output"].includes(mode)) {
+    const error = mode === "no-output" ? label + " produced no wav file" :
+      label + " exited with status " + (mode === "enoent" ? -1 : 7);
+    assert.deepEqual(result, { ok: false, words: null, error });
+    assert.equal(fs.existsSync(wavAbs), false);
+  } else {
+    assert.deepEqual(result, { ok: true, words: null });
+    assert.equal(fs.readFileSync(wavAbs, "utf8"), "synthetic café");
+  }
+  if (mode !== "enoent") {
+    const log = JSON.parse(fs.readFileSync(wavAbs + ".json", "utf8"));
+    assert.equal(log.text, "synthetic café");
+    assert.equal(log.consumed, log.text);
+    if (provider === "kokoro") assert.deepEqual(log.args.slice(-4), ["--lang", "es", "--speed", "0.8"]);
+  }
+}
+if (mode === "cleanup") assert.equal(owned().length, 1);
+else assert.deepEqual(owned(), [], "owned text directories must be removed");
+assert.equal(fs.readFileSync(join(preexisting, "marker"), "utf8"), "keep");
+`;
+
+function runCase(provider, mode) {
+  const root = mkdtempSync(join(tmpdir(), "tts-cleanup-test-"));
+  try {
+    for (const dir of ["home", "tmp", "bin", "project"]) mkdirSync(join(root, dir));
+    if (mode !== "enoent") {
+      for (const name of ["npx", "python3"]) {
+        const executable = join(root, "bin", name);
+        writeFileSync(executable, stub);
+        chmodSync(executable, 0o755);
+      }
+    }
+    const result = spawnSync(process.execPath, ["--input-type=module", "-e", exercise], {
+      encoding: "utf8",
+      timeout: 15000,
+      env: {
+        HOME: join(root, "home"),
+        USERPROFILE: join(root, "home"),
+        TMPDIR: join(root, "tmp"),
+        TMP: join(root, "tmp"),
+        TEMP: join(root, "tmp"),
+        PATH: join(root, "bin"),
+        CASE_ROOT: root,
+        CASE_PROVIDER: provider,
+        CASE_MODE: mode,
+        RELEASE_FILE: join(root, "release"),
+      },
+    });
+    assert.equal(result.error, undefined);
+    assert.equal(result.status, 0, result.stdout + result.stderr);
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+}
+
+for (const provider of ["elevenlabs", "kokoro"]) {
+  for (const mode of [
+    "success",
+    "nonzero",
+    "no-output",
+    "enoent",
+    "spawn-throw",
+    "allocation",
+    "write",
+    "cleanup",
+  ]) {
+    test(
+      `synthesizeOne(${provider}) preserves ${mode} behavior and cleans only its text directory`,
+      { skip: process.platform === "win32" },
+      () => runCase(provider, mode),
+    );
+  }
+}
+
+test(
+  "concurrent providers retain each other's text until their subprocess finishes",
+  { skip: process.platform === "win32" },
+  () => runCase("kokoro", "concurrent"),
+);
diff --git a/.claude/skills/media-use/audio/scripts/lib/tts.mjs b/.claude/skills/media-use/audio/scripts/lib/tts.mjs
new file mode 100644
index 0000000..879fb89
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/tts.mjs
@@ -0,0 +1,394 @@
+import { fetchMedia } from "../../../scripts/lib/media-fetch.mjs";
+// tts.mjs — multi-provider TTS for the media audio engine. The provider chain,
+// auto-detected from env, is the one documented in ../SKILL.md:
+//
+//   1. HeyGen (Starfish)  — $HEYGEN_API_KEY / $HYPERFRAMES_API_KEY / ~/.heygen.
+//        Direct v3 REST (NOT `hyperframes tts`, which in the published build is
+//        Kokoro-only and silently ignores a HeyGen key). Returns word_timestamps
+//        in the same call, so no separate transcribe pass.
+//   2. ElevenLabs         — $ELEVENLABS_API_KEY + `pip install elevenlabs`. No
+//        word timings → caller chains transcribeWav().
+//   3. Kokoro-82M (local) — always available, via the published `hyperframes tts`
+//        CLI. No word timings → caller chains transcribeWav().
+//
+// "HeyGen available" is decided by CREDENTIAL presence (heygenCredential), never
+// by the CLI — see the note above.
+
+import { spawn, spawnSync } from "node:child_process";
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join } from "node:path";
+import { heygenAuthHeaders, heygenCredential, heygenJSON, heygenMessage } from "./heygen.mjs";
+import { pythonInvocation } from "./python.mjs";
+import { synthesizeGemini } from "./gemini-tts.mjs";
+import { geminiConfigured } from "./gemini-auth.mjs";
+
+// ── provider detection ────────────────────────────────────────────────────────
+export function heygenAvailable() {
+  return heygenCredential() !== null;
+}
+export function elevenlabsAvailable() {
+  if (!process.env.ELEVENLABS_API_KEY) return false;
+  const { cmd, args } = pythonInvocation(["-c", "import elevenlabs"]);
+  const r = spawnSync(cmd, args, {
+    stdio: "ignore",
+  });
+  return r.status === 0;
+}
+
+// First available provider wins; an explicit choice is honored (and validated).
+export function pickProvider(userProvider) {
+  if (userProvider) {
+    if (!["heygen", "elevenlabs", "kokoro", "gemini"].includes(userProvider))
+      throw new Error(`invalid provider "${userProvider}" (heygen | elevenlabs | kokoro | gemini)`);
+    if (userProvider === "gemini" && !geminiConfigured())
+      throw new Error(
+        "provider=gemini needs GEMINI_API_KEY or GOOGLE_API_KEY, or service-account credentials (GOOGLE_APPLICATION_CREDENTIALS or GCS_CREDS)",
+      );
+    // heygenAuthHeaders owns the reason and its fix: no credential, or a credentials path that cannot be read.
+    if (userProvider === "heygen" && !heygenAvailable()) heygenAuthHeaders();
+    if (userProvider === "elevenlabs" && !process.env.ELEVENLABS_API_KEY)
+      throw new Error("provider=elevenlabs but $ELEVENLABS_API_KEY is not set");
+    return userProvider;
+  }
+  return heygenAvailable() ? "heygen" : elevenlabsAvailable() ? "elevenlabs" : "kokoro";
+}
+
+// ── voice resolution ──────────────────────────────────────────────────────────
+// HeyGen /v3/voices/speech only accepts STARFISH voice_ids; auto-pick the first
+// English public starfish voice when none is pinned. ElevenLabs/Kokoro have
+// their own defaults.
+export async function resolveVoiceId({ provider, userVoice, lang = "en" }) {
+  if (userVoice) return userVoice;
+  if (provider === "gemini") return "Kore";
+  if (provider === "elevenlabs") return "21m00Tcm4TlvDq8ikWAM"; // Rachel
+  if (provider === "kokoro") {
+    if (lang === "en") return "am_michael";
+    throw new Error("Kokoro non-English needs an explicit --voice (see references/tts.md)");
+  }
+  // heygen — pin a fixed English default so the choice is deterministic. The old
+  // "first English voice the API returns" drifts whenever HeyGen re-sorts the
+  // public catalog. Marcia (mature, low female). Override with --voice / request.voice.
+  if (lang === "en") return "05f19352e8f74b0392a8f411eba40de1"; // Marcia · English · female
+  // Non-English: no fixed default — fall back to the first matching catalog voice.
+  const payload = await heygenJSON(`/voices?engine=starfish&type=public&limit=50`, {
+    headers: heygenAuthHeaders(),
+  });
+  const voices = payload.data ?? payload.voices ?? [];
+  const pick = voices.find((v) => v.language === "English") ?? voices[0];
+  if (!pick) throw new Error("no public starfish voice to default to — pass --voice");
+  return pick.voice_id;
+}
+
+// ── helpers ─────────────────────────────────────────────────────────────────
+export function withWordIds(words) {
+  return (words ?? []).map((w, i) => ({
+    id: `w${i}`,
+    text: w.text,
+    start: w.start,
+    end: w.end,
+  }));
+}
+
+// `ffmpeg -i <file>` prints a `Duration: HH:MM:SS.ms` line to stderr even
+// though it exits non-zero with no output requested. Parsing pulled out as
+// a pure function so the ENOENT fallback below can be tested without
+// depending on whether ffprobe/ffmpeg are actually installed on the
+// machine running the tests.
+export function parseFfmpegDurationBanner(stderrText) {
+  const match = /Duration:\s*(\d+):(\d+):(\d+(?:\.\d+)?)/.exec(stderrText ?? "");
+  if (!match) return NaN;
+  const [, hours, minutes, seconds] = match;
+  return Number(hours) * 3600 + Number(minutes) * 60 + Number(seconds);
+}
+
+// Some "essentials"-style ffmpeg distributions (common on Windows) ship
+// ffmpeg.exe without ffprobe.exe. ffprobeDuration's caller (audio.mjs)
+// otherwise reads a spurious NaN as "the WAV file is corrupt" and drops an
+// already-successfully-synthesized TTS line, rather than "the tool for
+// measuring it is missing".
+function ffmpegDurationFallback(absPath) {
+  const r = spawnSync("ffmpeg", ["-i", absPath], { encoding: "utf8" });
+  return parseFfmpegDurationBanner(r.stderr);
+}
+
+export function ffprobeDuration(absPath) {
+  const r = spawnSync(
+    "ffprobe",
+    ["-v", "error", "-show_entries", "format=duration", "-of", "default=nw=1:nk=1", "--", absPath],
+    { encoding: "utf8" },
+  );
+  if (r.error?.code === "ENOENT") return ffmpegDurationFallback(absPath);
+  if (r.status !== 0) return NaN;
+  return parseFloat(String(r.stdout).trim());
+}
+
+export function resolveNpxCliFromNpmExecPath(
+  npmExecPath = process.env.npm_execpath,
+  pathExists = existsSync,
+) {
+  if (!npmExecPath) return null;
+  const fileName = npmExecPath.replace(/\\/g, "/").split("/").pop()?.toLowerCase();
+  const npxCliPath =
+    fileName === "npx-cli.js" ? npmExecPath : join(dirname(npmExecPath), "npx-cli.js");
+  return pathExists(npxCliPath) ? npxCliPath : null;
+}
+
+export function resolveNpxCliPath(
+  npmExecPath = process.env.npm_execpath,
+  nodeExecPath = process.env.npm_node_execpath || process.execPath,
+  pathExists = existsSync,
+) {
+  const fromNpm = resolveNpxCliFromNpmExecPath(npmExecPath, pathExists);
+  if (fromNpm) return fromNpm;
+  const besideNode = join(dirname(nodeExecPath), "node_modules", "npm", "bin", "npx-cli.js");
+  return pathExists(besideNode) ? besideNode : null;
+}
+
+export function resolveSpawnCommand(
+  cmd,
+  args,
+  opts = {},
+  platform = process.platform,
+  env = process.env,
+  pathExists = existsSync,
+) {
+  if (cmd !== "npx" || platform !== "win32") {
+    return { cmd, args, opts: { stdio: "ignore", ...opts } };
+  }
+
+  // On Windows, npx resolves to npx.cmd, which Node cannot execute directly.
+  // Avoid `shell:true` and the .cmd shim entirely by invoking npm's JS CLI with
+  // node, preserving request-provided values as argv data instead of shell text.
+  const nodeExecPath = env.npm_node_execpath || process.execPath;
+  const npxCliPath = resolveNpxCliPath(env.npm_execpath, nodeExecPath, pathExists);
+  if (!npxCliPath) return null;
+  return {
+    cmd: nodeExecPath,
+    args: [npxCliPath, ...args.map((arg) => String(arg))],
+    opts: { stdio: "ignore", windowsHide: true, ...opts },
+  };
+}
+
+// `platform`/`spawnFn` params (default process.platform / the real spawn)
+// exist so tests can exercise the win32 branch without mocking node:child_process
+// (its ESM exports are non-configurable, so mock.method can't patch it).
+// One-shot so a whole batch of TTS lines doesn't repeat the same diagnostic.
+let _warnedNpxResolution = false;
+/** Test-only: reset the one-shot npx-resolution warning latch. */
+export function _resetNpxResolutionWarnForTests() {
+  _warnedNpxResolution = false;
+}
+
+export function spawnP(
+  cmd,
+  args,
+  opts = {},
+  platform = process.platform,
+  spawnFn = spawn,
+  env = process.env,
+  pathExists = existsSync,
+) {
+  const resolved = resolveSpawnCommand(cmd, args, opts, platform, env, pathExists);
+  if (!resolved) {
+    // resolveSpawnCommand only returns null for the npx-on-win32 case where
+    // neither npm's configured CLI nor the beside-node fallback exists. Without
+    // this, every call silently returns status:-1 and stdio:"ignore" hides why.
+    if (!_warnedNpxResolution) {
+      _warnedNpxResolution = true;
+      const reason = env.npm_execpath
+        ? `npm_execpath (${env.npm_execpath}) and the beside-node npm fallback could not be found`
+        : "npm_execpath is unset and the beside-node npm fallback could not be found";
+      console.error(
+        `[media-use] Cannot run "${cmd}" on Windows: ${reason}. ` +
+          `Every "${cmd}" call is being skipped. Install npm with Node, or run via ` +
+          `\`npx\`/\`npm run\` with a valid npm_execpath.`,
+      );
+    }
+    return Promise.resolve({ status: -1 });
+  }
+  return new Promise((resolve) => {
+    const p = spawnFn(resolved.cmd, resolved.args, resolved.opts);
+    p.on("exit", (code) => resolve({ status: code ?? -1 }));
+    p.on("error", () => resolve({ status: -1 }));
+  });
+}
+
+// mp3/whatever bytes → wav 44.1k mono at destWav (ffmpeg detects true format).
+function transcodeToWav(bytes, destWav) {
+  const td = mkdtempSync(join(tmpdir(), "hf-tts-"));
+  const tmp = join(td, "a.mp3");
+  writeFileSync(tmp, bytes);
+  mkdirSync(dirname(destWav), { recursive: true });
+  const ff = spawnSync(
+    "ffmpeg",
+    ["-y", "-loglevel", "error", "-i", tmp, "-ar", "44100", "-ac", "1", destWav],
+    { stdio: "ignore" },
+  );
+  rmSync(td, { recursive: true, force: true });
+  return ff.status === 0 && existsSync(destWav);
+}
+
+const ELEVENLABS_PY = `
+import os, sys
+from elevenlabs.client import ElevenLabs
+from elevenlabs import save
+client = ElevenLabs(api_key=os.environ["ELEVENLABS_API_KEY"])
+text = open(sys.argv[1], encoding="utf-8").read()
+audio = client.text_to_speech.convert(
+    text=text, voice_id=sys.argv[2],
+    model_id="eleven_multilingual_v2", output_format="mp3_44100_128",
+)
+save(audio, sys.argv[3])
+`;
+
+// ── synthesize one line ───────────────────────────────────────────────────────
+// Writes wav at wavAbs. Returns { ok, words, error } — words is the raw
+// [{text,start,end}] array for HeyGen (native), or null for ElevenLabs/Kokoro
+// (caller must transcribeWav). Never throws; failures return { ok:false, error }
+// where `error` states WHY (so the caller can surface it, not a bare "TTS failed").
+export async function synthesizeOne({
+  provider,
+  text,
+  voiceId,
+  lang = "en",
+  speed = 1.0,
+  model,
+  style,
+  wavAbs,
+  hyperframesDir,
+}) {
+  if (provider === "heygen") return synthesizeHeygen({ text, voiceId, lang, speed, wavAbs });
+  if (provider === "gemini")
+    return synthesizeGemini({ text, voiceId, model, style, speed, wavAbs });
+  if (provider === "elevenlabs") {
+    // The Python helper writes straight to wavAbs; unlike heygen (transcodeToWav)
+    // and kokoro (the `hyperframes tts` CLI), it does NOT create the parent dir,
+    // so on a fresh project (no assets/voice/ yet) the save fails and the line is
+    // silently dropped as "TTS failed - omitted". Create it first, like the other
+    // providers do. Guarded so a mkdir failure (EACCES/EROFS) returns
+    // { ok:false } like the rest of this branch rather than throwing (the
+    // function's contract is "never throws; failures return { ok:false }").
+    try {
+      mkdirSync(dirname(wavAbs), { recursive: true });
+    } catch {
+      return { ok: false, words: null };
+    }
+    return withTmpText(text, async (textPath) => {
+      const { cmd, args } = pythonInvocation(["-c", ELEVENLABS_PY, textPath, voiceId, wavAbs]);
+      const r = await spawnP(cmd, args, {});
+      return synthResult(r, wavAbs, "elevenlabs (python)");
+    });
+  }
+  // kokoro — via the published CLI; --output is relative to the project dir.
+  const wavRel = relTo(hyperframesDir, wavAbs);
+  return withTmpText(text, async (textPath) => {
+    const args = ["hyperframes", "tts", textPath, "--voice", voiceId, "--output", wavRel];
+    if (lang !== "en") args.push("--lang", lang);
+    if (speed !== 1) args.push("--speed", String(speed));
+    const r = await spawnP("npx", args, { cwd: hyperframesDir });
+    return synthResult(r, wavAbs, "kokoro (npx hyperframes tts)");
+  });
+}
+
+// Shape a spawn result into { ok, words, error }, naming why on failure so the
+// caller surfaces it instead of a bare "TTS failed".
+export function synthResult(r, wavAbs, label) {
+  if (r.status === 0 && existsSync(wavAbs)) return { ok: true, words: null };
+  const why =
+    r.status !== 0 ? `${label} exited with status ${r.status}` : `${label} produced no wav file`;
+  return { ok: false, words: null, error: why };
+}
+
+// `deps` is injectable for tests; production uses the real network/ffmpeg impls.
+// Every failure path returns an `error` string so the caller can surface WHY a
+// line was dropped instead of the bare "TTS failed" that hid the real cause
+// (e.g. an HTTP 402 plan_upgrade_required thrown by heygenJSON was swallowed).
+export async function synthesizeHeygen({ text, voiceId, lang, speed, wavAbs }, deps = {}) {
+  const requestJSON = deps.heygenJSON ?? heygenJSON;
+  const authHeaders = deps.heygenAuthHeaders ?? heygenAuthHeaders;
+  const fetchImpl = deps.fetch ?? fetch;
+  const transcode = deps.transcodeToWav ?? transcodeToWav;
+  try {
+    const body = { text, voice_id: voiceId, speed };
+    if (lang !== "en") body.language = lang;
+    const payload = await requestJSON(`/voices/speech`, {
+      method: "POST",
+      headers: authHeaders(),
+      body,
+    });
+    const inner = payload.data ?? payload;
+    if (!inner.audio_url) {
+      return { ok: false, words: null, error: "HeyGen /voices/speech returned no audio_url" };
+    }
+    const res = await fetchMedia(inner.audio_url, { fetchImpl });
+    if (!res.ok) {
+      return { ok: false, words: null, error: `audio_url fetch failed: HTTP ${res.status}` };
+    }
+    const bytes = Buffer.from(await res.arrayBuffer());
+    // .wav output → transcode to 44.1k mono; .mp3 → raw bytes (no ffmpeg). The
+    // engine always asks for .wav; the standalone heygen-tts CLI may ask for .mp3.
+    if (wavAbs.endsWith(".wav")) {
+      if (!transcode(bytes, wavAbs)) {
+        return {
+          ok: false,
+          words: null,
+          error: "wav transcode failed (ffmpeg)",
+        };
+      }
+    } else {
+      mkdirSync(dirname(wavAbs), { recursive: true });
+      writeFileSync(wavAbs, bytes);
+    }
+    const words = Array.isArray(inner.word_timestamps)
+      ? inner.word_timestamps
+          .filter((w) => w && typeof w.word === "string" && isFinite(w.start) && isFinite(w.end))
+          .filter((w) => !/^<.*>$/.test(w.word.trim())) // drop <start>/<end> sentinels
+          .map((w) => ({ text: w.word, start: w.start, end: w.end }))
+      : [];
+    return { ok: true, words };
+  } catch (e) {
+    return { ok: false, words: null, error: heygenMessage(e) };
+  }
+}
+
+// ElevenLabs/Kokoro have no word timings — run Whisper over the wav. Returns the
+// flat [{id,text,start,end}] word array, or null. Each call uses a throwaway
+// --dir so parallel scenes don't collide on transcript.json.
+export async function transcribeWav({ wavRel, lang = "en", hyperframesDir }) {
+  const model = lang === "en" ? "small.en" : "small";
+  const td = mkdtempSync(join(tmpdir(), "hf-trans-"));
+  const args = ["hyperframes", "transcribe", wavRel, "--model", model, "--dir", td];
+  if (lang !== "en") args.push("--language", lang);
+  const r = await spawnP("npx", args, { cwd: hyperframesDir });
+  let words = null;
+  if (r.status === 0) {
+    const src = join(td, "transcript.json");
+    if (existsSync(src)) {
+      try {
+        const arr = JSON.parse(readFileSync(src, "utf8"));
+        if (Array.isArray(arr) && arr.length) words = arr;
+      } catch {}
+    }
+  }
+  rmSync(td, { recursive: true, force: true });
+  return words;
+}
+
+// ── tiny local utils ──────────────────────────────────────────────────────────
+async function withTmpText(text, run) {
+  const td = mkdtempSync(join(tmpdir(), "hf-txt-"));
+  try {
+    const p = join(td, "line.txt");
+    writeFileSync(p, text);
+    return await run(p);
+  } finally {
+    // Cleanup must preserve the synthesis result or the original write/spawn error.
+    try {
+      rmSync(td, { recursive: true, force: true });
+    } catch {}
+  }
+}
+function relTo(base, abs) {
+  return abs.startsWith(base + "/") ? abs.slice(base.length + 1) : abs;
+}
diff --git a/.claude/skills/media-use/audio/scripts/lib/tts.spawn.test.mjs b/.claude/skills/media-use/audio/scripts/lib/tts.spawn.test.mjs
new file mode 100644
index 0000000..b8e6b49
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/tts.spawn.test.mjs
@@ -0,0 +1,158 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { EventEmitter } from "node:events";
+import {
+  resolveNpxCliFromNpmExecPath,
+  resolveNpxCliPath,
+  resolveSpawnCommand,
+  spawnP,
+  _resetNpxResolutionWarnForTests,
+} from "./tts.mjs";
+
+// Regression: on Windows, npx resolves to npx.cmd, which spawn() cannot exec
+// without shell:true — it fails ENOENT, silently swallowed as ok:false by the
+// caller. spawnP takes injectable platform/spawnFn params so this doesn't
+// need to touch the real process.platform or mock node:child_process (whose
+// ESM exports are non-configurable).
+function fakeSpawn(captured) {
+  return (cmd, args, opts) => {
+    captured.push({ cmd, args, opts });
+    const p = new EventEmitter();
+    setImmediate(() => p.emit("exit", 0));
+    return p;
+  };
+}
+
+const envWithNpxCli = {
+  npm_execpath: "/opt/node/lib/node_modules/npm/bin/npm-cli.js",
+  npm_node_execpath: "/opt/node/bin/node",
+};
+const npxCliPath = "/opt/node/lib/node_modules/npm/bin/npx-cli.js";
+const pathExists = (path) => path === npxCliPath;
+
+test("resolveNpxCliFromNpmExecPath finds npx-cli next to npm-cli", () => {
+  assert.equal(resolveNpxCliFromNpmExecPath(envWithNpxCli.npm_execpath, pathExists), npxCliPath);
+});
+
+test("resolveNpxCliPath finds npx-cli beside node when npm_execpath is unset", () => {
+  const node = "C:/Program Files/nodejs/node.exe";
+  const expected = "C:/Program Files/nodejs/node_modules/npm/bin/npx-cli.js";
+  assert.equal(
+    resolveNpxCliPath(undefined, node, (path) => path === expected),
+    expected,
+  );
+});
+
+test("resolveSpawnCommand routes npx through node+npx-cli on win32 without shell:true", () => {
+  const resolved = resolveSpawnCommand(
+    "npx",
+    ["hyperframes", "tts", "C:\\Users\\Test User\\line.txt", "--voice", "am_michael"],
+    {},
+    "win32",
+    envWithNpxCli,
+    pathExists,
+  );
+  assert.ok(resolved);
+  assert.equal(resolved.cmd, envWithNpxCli.npm_node_execpath);
+  assert.deepEqual(resolved.args, [
+    npxCliPath,
+    "hyperframes",
+    "tts",
+    "C:\\Users\\Test User\\line.txt",
+    "--voice",
+    "am_michael",
+  ]);
+  assert.equal(resolved.opts.shell, undefined);
+});
+
+test("resolveSpawnCommand preserves Windows npx shell metacharacters as argv data", () => {
+  const resolved = resolveSpawnCommand(
+    "npx",
+    ["hyperframes", "tts", "hello & calc"],
+    {},
+    "win32",
+    envWithNpxCli,
+    pathExists,
+  );
+  assert.ok(resolved);
+  assert.deepEqual(resolved.args, [npxCliPath, "hyperframes", "tts", "hello & calc"]);
+});
+
+test("spawnP uses the resolved node+npx-cli command for npx on win32", async () => {
+  const captured = [];
+  await spawnP(
+    "npx",
+    ["hyperframes", "tts"],
+    {},
+    "win32",
+    fakeSpawn(captured),
+    envWithNpxCli,
+    pathExists,
+  );
+  assert.equal(captured.length, 1);
+  assert.equal(captured[0].cmd, envWithNpxCli.npm_node_execpath);
+  assert.deepEqual(captured[0].args, [npxCliPath, "hyperframes", "tts"]);
+  assert.equal(captured[0].opts.shell, undefined);
+});
+
+test("spawnP does not enable shell for npx on darwin/linux", async () => {
+  const captured = [];
+  await spawnP("npx", ["hyperframes", "tts"], {}, "darwin", fakeSpawn(captured));
+  assert.equal(captured[0].cmd, "npx");
+  assert.deepEqual(captured[0].args, ["hyperframes", "tts"]);
+  assert.equal(captured[0].opts.shell, undefined);
+});
+
+test("spawnP does not enable shell for non-npx commands even on win32", async () => {
+  const captured = [];
+  await spawnP("python3", ["-c", "pass"], {}, "win32", fakeSpawn(captured));
+  assert.equal(captured[0].cmd, "python3");
+  assert.deepEqual(captured[0].args, ["-c", "pass"]);
+  assert.equal(captured[0].opts.shell, undefined);
+});
+
+test("spawnP resolves npx beside node when npm_execpath is unset on win32", async () => {
+  _resetNpxResolutionWarnForTests();
+  const captured = [];
+  const node = "C:/Program Files/nodejs/node.exe";
+  const npxCli = "C:/Program Files/nodejs/node_modules/npm/bin/npx-cli.js";
+  const result = await spawnP(
+    "npx",
+    ["hyperframes", "tts"],
+    {},
+    "win32",
+    fakeSpawn(captured),
+    { npm_node_execpath: node },
+    (path) => path === npxCli,
+  );
+  assert.equal(result.status, 0);
+  assert.equal(captured.length, 1);
+  assert.equal(captured[0].cmd, node);
+  assert.deepEqual(captured[0].args, [npxCli, "hyperframes", "tts"]);
+});
+
+test("spawnP warns once with an accurate diagnostic when neither npx path exists", async () => {
+  _resetNpxResolutionWarnForTests();
+  const errors = [];
+  const originalError = console.error;
+  console.error = (message) => errors.push(String(message));
+  try {
+    const env = { npm_execpath: "C:/missing/npm-cli.js", npm_node_execpath: "C:/node/node.exe" };
+    const missing = () => false;
+    assert.equal(
+      (await spawnP("npx", ["hyperframes", "tts"], {}, "win32", fakeSpawn([]), env, missing))
+        .status,
+      -1,
+    );
+    assert.equal(
+      (await spawnP("npx", ["hyperframes", "tts"], {}, "win32", fakeSpawn([]), env, missing))
+        .status,
+      -1,
+    );
+  } finally {
+    console.error = originalError;
+  }
+  assert.equal(errors.length, 1);
+  assert.match(errors[0], /npm_execpath \(C:\/missing\/npm-cli\.js\)/);
+  assert.doesNotMatch(errors[0], /npm_execpath is not set/);
+});
diff --git a/.claude/skills/media-use/audio/scripts/lib/tts.test.mjs b/.claude/skills/media-use/audio/scripts/lib/tts.test.mjs
new file mode 100644
index 0000000..bf59c1e
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lib/tts.test.mjs
@@ -0,0 +1,230 @@
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import {
+  mkdirSync,
+  mkdtempSync,
+  readFileSync,
+  writeFileSync,
+  chmodSync,
+  rmSync,
+  existsSync,
+} from "node:fs";
+import { join, dirname } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  parseFfmpegDurationBanner,
+  ffprobeDuration,
+  synthesizeOne,
+  synthesizeHeygen,
+  synthResult,
+  pickProvider,
+} from "./tts.mjs";
+
+test("parseFfmpegDurationBanner reads ffmpeg's stderr Duration line", () => {
+  const stderr = [
+    "ffmpeg version 6.0",
+    "Input #0, wav, from 'a.wav':",
+    "  Duration: 00:00:03.42, bitrate: 705 kb/s",
+    "At least one output file must be specified",
+  ].join("\n");
+  assert.equal(parseFfmpegDurationBanner(stderr), 3.42);
+});
+
+test("parseFfmpegDurationBanner handles an hours component", () => {
+  const stderr = "  Duration: 01:02:03.50, start: 0.000000, bitrate: 128 kb/s";
+  assert.equal(parseFfmpegDurationBanner(stderr), 3723.5);
+});
+
+test("parseFfmpegDurationBanner returns NaN when there is no Duration line", () => {
+  assert.ok(Number.isNaN(parseFfmpegDurationBanner("ffmpeg: command not found")));
+  assert.ok(Number.isNaN(parseFfmpegDurationBanner("")));
+  assert.ok(Number.isNaN(parseFfmpegDurationBanner(undefined)));
+});
+
+// Regression for the actual bug: ffprobeDuration used to collapse "ffprobe
+// binary is missing" (ENOENT — the "essentials"-style Windows ffmpeg build
+// with no ffprobe.exe) and "file is genuinely unreadable" into the same NaN,
+// giving audio.mjs no way to tell "measure differently" from "give up".
+//
+// Builds an isolated PATH containing only a fake `ffmpeg` stub (no `ffprobe`
+// at all) so ffprobeDuration's spawnSync("ffprobe", ...) call ENOENTs for
+// real, then verifies it recovers the duration via the ffmpeg fallback
+// instead of returning NaN.
+test("ffprobeDuration falls back to ffmpeg when the ffprobe binary itself is missing", () => {
+  const dir = mkdtempSync(join(tmpdir(), "tts-ffprobe-fallback-"));
+  const fakeFfmpeg = join(dir, "ffmpeg");
+  writeFileSync(
+    fakeFfmpeg,
+    "#!/bin/sh\necho 'Duration: 00:00:02.50, start: 0.000000, bitrate: 128 kb/s' 1>&2\nexit 1\n",
+  );
+  chmodSync(fakeFfmpeg, 0o755);
+  const originalPath = process.env.PATH;
+  try {
+    process.env.PATH = dir; // only the fake ffmpeg resolves; no real ffprobe on this PATH
+    assert.equal(ffprobeDuration("/does/not/matter.wav"), 2.5);
+  } finally {
+    process.env.PATH = originalPath;
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("ffprobeDuration returns NaN when neither ffprobe nor ffmpeg resolve", () => {
+  const dir = mkdtempSync(join(tmpdir(), "tts-no-binaries-"));
+  const originalPath = process.env.PATH;
+  try {
+    process.env.PATH = dir; // empty directory — nothing resolves
+    assert.ok(Number.isNaN(ffprobeDuration("/does/not/matter.wav")));
+  } finally {
+    process.env.PATH = originalPath;
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("synthesizeOne(elevenlabs) creates the output dir before writing", async () => {
+  const dir = mkdtempSync(join(tmpdir(), "tts-el-mkdir-"));
+  const wavAbs = join(dir, "assets", "voice", "line-0.wav"); // nested, not yet created
+  const savedKey = process.env.ELEVENLABS_API_KEY;
+  try {
+    // Unset the key so the Python side fails fast — the mkdir must run before
+    // the spawn regardless, which is what this guards.
+    delete process.env.ELEVENLABS_API_KEY;
+    await synthesizeOne({
+      provider: "elevenlabs",
+      text: "hi",
+      voiceId: "v",
+      wavAbs,
+      hyperframesDir: dir,
+    });
+    assert.ok(existsSync(dirname(wavAbs)), "output directory should be created");
+  } finally {
+    if (savedKey === undefined) delete process.env.ELEVENLABS_API_KEY;
+    else process.env.ELEVENLABS_API_KEY = savedKey;
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("synthesizeHeygen surfaces a thrown HTTP error (e.g. 402) instead of swallowing it", async () => {
+  const res = await synthesizeHeygen(
+    { text: "hi", voiceId: "v1", lang: "en", speed: 1, wavAbs: "/tmp/x.wav" },
+    {
+      heygenAuthHeaders: () => ({}),
+      heygenJSON: async () => {
+        throw new Error("HeyGen POST /voices/speech → HTTP 402\nplan_upgrade_required");
+      },
+    },
+  );
+  assert.equal(res.ok, false);
+  assert.match(res.error, /402/);
+  assert.match(res.error, /plan_upgrade_required/);
+});
+
+test("synthesizeHeygen surfaces a failed audio_url fetch with its status", async () => {
+  const res = await synthesizeHeygen(
+    { text: "hi", voiceId: "v1", lang: "en", speed: 1, wavAbs: "/tmp/x.wav" },
+    {
+      heygenAuthHeaders: () => ({}),
+      heygenJSON: async () => ({ data: { audio_url: "http://audio.example/x" } }),
+      fetch: async () => ({ ok: false, status: 403 }),
+    },
+  );
+  assert.equal(res.ok, false);
+  assert.match(res.error, /HTTP 403/);
+});
+
+test("synthesizeHeygen reports a missing audio_url", async () => {
+  const res = await synthesizeHeygen(
+    { text: "hi", voiceId: "v1", lang: "en", speed: 1, wavAbs: "/tmp/x.wav" },
+    { heygenAuthHeaders: () => ({}), heygenJSON: async () => ({}) },
+  );
+  assert.equal(res.ok, false);
+  assert.match(res.error, /no audio_url/);
+});
+
+test("synthesizeHeygen reports wav transcode failures", async () => {
+  const dir = mkdtempSync(join(tmpdir(), "hf-tts-test-"));
+  try {
+    const res = await synthesizeHeygen(
+      { text: "hi", voiceId: "v1", lang: "en", speed: 1, wavAbs: join(dir, "voice.wav") },
+      {
+        heygenAuthHeaders: () => ({}),
+        heygenJSON: async () => ({ data: { audio_url: "http://audio.example/x" } }),
+        fetch: async () => ({ ok: true, status: 200, arrayBuffer: async () => new ArrayBuffer(0) }),
+        transcodeToWav: () => false,
+      },
+    );
+    assert.equal(res.ok, false);
+    assert.equal(res.error, "wav transcode failed (ffmpeg)");
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("synthResult names a non-zero subprocess exit", () => {
+  const res = synthResult({ status: 2 }, "/tmp/none.wav", "kokoro (npx hyperframes tts)");
+  assert.equal(res.ok, false);
+  assert.match(res.error, /kokoro .* exited with status 2/);
+});
+
+// Kokoro shells out to `npx hyperframes tts`; a fake npx on PATH records the argv
+// synthesizeOne really builds, so a dropped flag fails here. Windows runs npx via
+// node directly, so the stub never resolves there.
+async function kokoroArgv(options) {
+  const dir = mkdtempSync(join(tmpdir(), "tts-kokoro-argv-"));
+  const argvLog = join(dir, "argv.txt");
+  writeFileSync(join(dir, "npx"), `#!/bin/sh\nprintf '%s\\n' "$@" > "${argvLog}"\n`);
+  chmodSync(join(dir, "npx"), 0o755);
+  const originalPath = process.env.PATH;
+  try {
+    process.env.PATH = dir;
+    await synthesizeOne({
+      provider: "kokoro",
+      text: "hi",
+      voiceId: "am_michael",
+      wavAbs: join(dir, "line-0.wav"),
+      hyperframesDir: dir,
+      ...options,
+    });
+    return readFileSync(argvLog, "utf8").trim().split("\n");
+  } finally {
+    process.env.PATH = originalPath;
+    rmSync(dir, { recursive: true, force: true });
+  }
+}
+
+test(
+  "synthesizeOne(kokoro) forwards a non-default speed to the CLI",
+  { skip: process.platform === "win32" },
+  async () => {
+    const argv = await kokoroArgv({ speed: 0.8, lang: "es" });
+    assert.deepEqual(argv.slice(-4), ["--lang", "es", "--speed", "0.8"]);
+  },
+);
+
+test(
+  "synthesizeOne(kokoro) leaves --speed off at the default",
+  { skip: process.platform === "win32" },
+  async () => {
+    assert.ok(!(await kokoroArgv({})).includes("--speed"));
+  },
+);
+
+test("pickProvider heygen with an unreadable credentials path says to fix that path", () => {
+  const saved = ["HEYGEN_API_KEY", "HYPERFRAMES_API_KEY", "HEYGEN_CONFIG_DIR"].map((k) => [
+    k,
+    process.env[k],
+  ]);
+  const dir = mkdtempSync(join(tmpdir(), "tts-cred-"));
+  try {
+    delete process.env.HEYGEN_API_KEY;
+    delete process.env.HYPERFRAMES_API_KEY;
+    process.env.HEYGEN_CONFIG_DIR = dir;
+    mkdirSync(join(dir, "credentials"));
+    assert.throws(() => pickProvider("heygen"), /fix or remove that path/);
+  } finally {
+    for (const [k, v] of saved) {
+      if (v === undefined) delete process.env[k];
+      else process.env[k] = v;
+    }
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills/media-use/audio/scripts/lyria-recipe.py b/.claude/skills/media-use/audio/scripts/lyria-recipe.py
new file mode 100644
index 0000000..5fdf7d3
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/lyria-recipe.py
@@ -0,0 +1,136 @@
+#!/usr/bin/env python3
+"""Generate BGM using Google Lyria RealTime API.
+
+Usage:
+    python lyria-recipe.py --output <path> --duration <seconds> [tuning flags]
+
+Requires:
+    $GOOGLE_API_KEY or $GEMINI_API_KEY environment variable (treated as aliases).
+    pip install google-genai python-dotenv. audio.mjs Step 4b installs these on
+    demand when a key is set but google.genai is not importable; if that install
+    fails it falls back to local MusicGen rather than leaving the video with no BGM.
+"""
+
+from __future__ import annotations
+
+import argparse
+import asyncio
+import os
+import sys
+import wave
+from pathlib import Path
+
+# Windows sizes stdio to the ANSI code page (cp1252). These scripts emit UTF-8 on
+# every platform; say so rather than depending on the console's code page. Carry
+# `errors` across: reconfigure() resets it to "strict", and CPython deliberately gives
+# stderr "backslashreplace" so the diagnostic path can never itself raise.
+for _stream in (sys.stdout, sys.stderr):
+    if hasattr(_stream, "reconfigure"):
+        _stream.reconfigure(encoding="utf-8", errors=_stream.errors)
+
+DEFAULT_PROMPT = "Uplifting corporate tech, bright and modern, gentle piano with synth pads"
+SAMPLE_RATE = 48000
+CHANNELS = 2
+SAMPLE_WIDTH = 2  # 16-bit
+
+
+def parse_args() -> argparse.Namespace:
+    p = argparse.ArgumentParser(description="Generate BGM via Google Lyria RealTime.")
+    p.add_argument("--output", required=True, help="Output WAV path.")
+    p.add_argument("--duration", type=float, required=True, help="Target duration in seconds.")
+    p.add_argument("--prompt", default=DEFAULT_PROMPT, help="Mood / instrumentation prompt.")
+    p.add_argument("--negative-prompt", default=None, help="Styles to exclude (optional).")
+    p.add_argument("--bpm", type=int, default=110)
+    p.add_argument("--brightness", type=float, default=0.8, help="0-1, higher = brighter mood.")
+    p.add_argument("--density", type=float, default=0.5, help="0-1, higher = fuller mix.")
+    p.add_argument(
+        "--scale",
+        default="MAJOR",
+        help="MAJOR / MINOR / PENTATONIC / etc. — see google.genai.types.Scale. Pass empty string for none.",
+    )
+    return p.parse_args()
+
+
+async def generate_bgm(args: argparse.Namespace) -> dict:
+    from google import genai
+    from google.genai import types
+
+    api_key = os.environ.get("GOOGLE_API_KEY") or os.environ.get("GEMINI_API_KEY") or ""
+    if not api_key:
+        raise RuntimeError("Neither GOOGLE_API_KEY nor GEMINI_API_KEY is set.")
+
+    client = genai.Client(
+        api_key=api_key,
+        http_options={"api_version": "v1alpha"},
+    )
+
+    out_path = Path(args.output)
+    out_path.parent.mkdir(parents=True, exist_ok=True)
+
+    target_bytes = int(args.duration * SAMPLE_RATE * CHANNELS * SAMPLE_WIDTH)
+
+    cfg: dict = {"bpm": args.bpm, "temperature": 1.0}
+    if args.density is not None:
+        cfg["density"] = args.density
+    if args.brightness is not None:
+        cfg["brightness"] = args.brightness
+    if args.scale:
+        scale_enum = getattr(types.Scale, args.scale, None)
+        if scale_enum:
+            cfg["scale"] = scale_enum
+
+    prompts = [types.WeightedPrompt(text=args.prompt, weight=1.0)]
+    if args.negative_prompt:
+        prompts.append(types.WeightedPrompt(text=args.negative_prompt, weight=-1.0))
+
+    buf = bytearray()
+    timeout = args.duration + 8
+
+    async with client.aio.live.music.connect(
+        model="models/lyria-realtime-exp",
+    ) as session:
+        await session.set_weighted_prompts(prompts=prompts)
+        await session.set_music_generation_config(
+            config=types.LiveMusicGenerationConfig(**cfg),
+        )
+        await session.play()
+
+        async def collect():
+            while len(buf) < target_bytes:
+                async for msg in session.receive():
+                    sc = msg.server_content
+                    if sc and sc.audio_chunks:
+                        for chunk in sc.audio_chunks:
+                            buf.extend(chunk.data)
+                            if len(buf) >= target_bytes:
+                                return
+                await asyncio.sleep(1e-6)
+
+        try:
+            await asyncio.wait_for(collect(), timeout=timeout)
+        except TimeoutError:
+            print(f"Timeout after {timeout:.0f}s, collected {len(buf)} bytes", file=sys.stderr)
+
+    audio = bytes(buf[:target_bytes])
+    with wave.open(str(out_path), "wb") as wf:
+        wf.setnchannels(CHANNELS)
+        wf.setsampwidth(SAMPLE_WIDTH)
+        wf.setframerate(SAMPLE_RATE)
+        wf.writeframes(audio)
+
+    actual_duration = len(audio) / (SAMPLE_RATE * CHANNELS * SAMPLE_WIDTH)
+    print(f"BGM: {out_path} ({actual_duration:.2f}s)")
+    return {"file": str(out_path), "duration_sec": round(actual_duration, 2)}
+
+
+def main() -> None:
+    args = parse_args()
+    try:
+        asyncio.run(generate_bgm(args))
+    except RuntimeError as exc:
+        print(f"BGM generation failed: {exc}", file=sys.stderr)
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()
diff --git a/.claude/skills/media-use/audio/scripts/wait-bgm.mjs b/.claude/skills/media-use/audio/scripts/wait-bgm.mjs
new file mode 100644
index 0000000..02bd1d6
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/wait-bgm.mjs
@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+// Phase 4c pre-assemble helper — wait for detached BGM, then write status.
+//
+// audio.mjs may launch Lyria / MusicGen in a detached process so voice work can
+// keep moving. Before assemble-index.mjs decides whether to emit the BGM audio
+// track, this script gives the background renderer a bounded chance to finish
+// and converts log/process state into a small bgm_status.json file.
+//
+// Always exits 0 for normal pipeline use: missing/failed BGM should not block a
+// voice/captions/SFX render. Structural invocation errors still exit 1.
+//
+// Usage:
+//   node wait-bgm.mjs --audio-meta ./audio_meta.json --hyperframes . \
+//     [--timeout-ms 120000] [--interval-ms 2000] [--out ./bgm_status.json]
+
+import { existsSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { recordInManifest } from "./lib/media-record.mjs";
+
+const argv = process.argv.slice(2);
+const flag = (name, def) => {
+  const i = argv.indexOf(`--${name}`);
+  return i >= 0 && i + 1 < argv.length ? argv[i + 1] : def;
+};
+
+function die(msg) {
+  console.error(`✗ wait-bgm.mjs: ${msg}`);
+  process.exit(1);
+}
+
+const audioMetaPath = resolve(flag("audio-meta", "./audio_meta.json"));
+const hyperframesDir = resolve(flag("hyperframes", "."));
+const outPath = resolve(flag("out", join(hyperframesDir, "bgm_status.json")));
+const timeoutMs = Math.max(0, Number(flag("timeout-ms", "120000")) || 0);
+const intervalMs = Math.max(250, Number(flag("interval-ms", "2000")) || 2000);
+
+function sleep(ms) {
+  return new Promise((resolveSleep) => setTimeout(resolveSleep, ms));
+}
+
+function isProcessAlive(pid) {
+  if (!pid || !Number.isFinite(Number(pid))) return false;
+  try {
+    process.kill(Number(pid), 0);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function readTail(path, maxChars = 6000) {
+  if (!path) return "";
+  try {
+    const txt = readFileSync(path, "utf8");
+    return txt.slice(Math.max(0, txt.length - maxChars));
+  } catch (error) {
+    if (error.code === "ENOENT" || error.code === "ENOTDIR") return "";
+    throw error;
+  }
+}
+
+function detectFailure(logTail) {
+  if (!logTail) return "";
+  const lines = logTail.split("\n");
+  // Bare "out of range" over-matched benign BGM-renderer logs (e.g. a "sample rate
+  // out of range, resampling" notice), mislabelling a healthy track as failed and
+  // silently dropping the music. Anchor to the actual crash strings instead:
+  // Python "(list) index out of range" and torch "index … out of bounds".
+  const idx = lines.findIndex((line) =>
+    /(Traceback|IndexError|RuntimeError|Exception|Killed|No space left|Cannot allocate|index out of range|out of bounds)/i.test(
+      line,
+    ),
+  );
+  if (idx < 0) return "";
+  return lines.slice(idx).join("\n").trim();
+}
+
+function writeStatus(status) {
+  const payload = {
+    generated_at: new Date().toISOString(),
+    ...status,
+  };
+  writeFileSync(outPath, JSON.stringify(payload, null, 2) + "\n");
+  return payload;
+}
+
+if (!existsSync(audioMetaPath)) die(`audio_meta.json missing at ${audioMetaPath}`);
+
+const audioMeta = JSON.parse(readFileSync(audioMetaPath, "utf8"));
+const bgmPath = audioMeta.bgm?.path || "";
+const bgmAbsPath = bgmPath ? join(hyperframesDir, bgmPath) : "";
+const logPath = audioMeta.bgm_log || "";
+const pid = audioMeta.bgm_pid || null;
+
+const base = {
+  enabled: Boolean(audioMeta.bgm_pending && bgmPath),
+  provider: audioMeta.bgm_provider || null,
+  mode: audioMeta.bgm_mode || null,
+  path: bgmPath || null,
+  log: logPath || null,
+  pid,
+  target_duration_s: audioMeta.bgm_target_duration_s || null,
+  seed_duration_s: audioMeta.bgm_seed_duration_s || null,
+  loop_count: audioMeta.bgm_loop_count || null,
+  timeout_ms: timeoutMs,
+};
+
+if (!base.enabled) {
+  const status = writeStatus({
+    ...base,
+    status: "disabled",
+    ready: false,
+    waited_ms: 0,
+    message: "BGM not requested or disabled in audio_meta.json.",
+  });
+  console.log(`✓ bgm: ${status.status} (${status.message})`);
+  process.exit(0);
+}
+
+const started = Date.now();
+let lastFailure = "";
+let lastTail = "";
+
+while (Date.now() - started <= timeoutMs) {
+  if (existsSync(bgmAbsPath)) {
+    const size = statSync(bgmAbsPath).size;
+    writeStatus({
+      ...base,
+      status: "ready",
+      ready: true,
+      waited_ms: Date.now() - started,
+      size_bytes: size,
+      message: `BGM ready at ${bgmPath}.`,
+    });
+    console.log(`✓ bgm: ready (${bgmPath}, ${size}B)`);
+    const generated = { path: bgmPath, type: "bgm", source: "generated", provider: base.provider };
+    for (const anomaly of recordInManifest(hyperframesDir, [generated]))
+      console.error(`  ${anomaly}`);
+    process.exit(0);
+  }
+
+  lastTail = readTail(logPath);
+  lastFailure = detectFailure(lastTail);
+  const alive = isProcessAlive(pid);
+  if (lastFailure || (!alive && logPath && existsSync(logPath))) {
+    const message = lastFailure
+      ? `BGM renderer failed; see ${logPath}.`
+      : `BGM renderer exited without writing ${bgmPath}; see ${logPath}.`;
+    const status = writeStatus({
+      ...base,
+      status: "failed",
+      ready: false,
+      waited_ms: Date.now() - started,
+      process_alive: alive,
+      message,
+      error_tail: lastFailure || lastTail.slice(-2000),
+    });
+    console.log(`! bgm: failed (${status.message})`);
+    process.exit(0);
+  }
+
+  if (timeoutMs === 0) break;
+  await sleep(Math.min(intervalMs, Math.max(0, timeoutMs - (Date.now() - started))));
+}
+
+const status = writeStatus({
+  ...base,
+  status: "timeout",
+  ready: false,
+  waited_ms: Date.now() - started,
+  process_alive: isProcessAlive(pid),
+  message: `Timed out waiting for ${bgmPath}; assemble-index will skip BGM if still absent.`,
+  log_tail: lastTail.slice(-2000),
+});
+console.log(`! bgm: timeout after ${status.waited_ms}ms (${bgmPath})`);
diff --git a/.claude/skills/media-use/audio/scripts/wait-bgm.test.mjs b/.claude/skills/media-use/audio/scripts/wait-bgm.test.mjs
new file mode 100644
index 0000000..eb2fb22
--- /dev/null
+++ b/.claude/skills/media-use/audio/scripts/wait-bgm.test.mjs
@@ -0,0 +1,108 @@
+import assert from "node:assert/strict";
+import { mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import { test } from "node:test";
+import { runInNewContext } from "node:vm";
+
+const source = readFileSync(new URL("./wait-bgm.mjs", import.meta.url), "utf8");
+const start = source.indexOf("function readTail(");
+const end = source.indexOf("\nfunction detectFailure(", start);
+function load(read) {
+  return runInNewContext(`${source.slice(start, end)}; readTail`, {
+    readFileSync: read,
+    existsSync: () => true,
+    statSync: () => {
+      throw new Error("pathname stat must not precede log read");
+    },
+  });
+}
+
+test("reads a log once without a separate pathname check", () => {
+  let calls = 0;
+  const read = load((path, encoding) => {
+    calls++;
+    assert.equal(path, "renderer.log");
+    assert.equal(encoding, "utf8");
+    return "prefix\nRuntimeError: failed";
+  });
+  assert.equal(read("renderer.log", 20), "RuntimeError: failed");
+  assert.equal(calls, 1);
+});
+
+test("preserves UTF-16 character tail boundaries and zero-length tails", () => {
+  const txt = "🎵日本語".repeat(2000);
+  const read = load(() => txt);
+  assert.equal(read("log"), txt.slice(-6000));
+  assert.equal(read("log", 0), "");
+});
+
+for (const code of ["ENOENT", "ENOTDIR"]) {
+  test(`a log removed during polling is absent (${code})`, () => {
+    const read = load(() => {
+      throw Object.assign(new Error(code), { code });
+    });
+    assert.equal(read("log"), "");
+  });
+}
+
+test("preserves unexpected read errors", () => {
+  const error = Object.assign(new Error("denied"), { code: "EACCES" });
+  assert.throws(
+    () =>
+      load(() => {
+        throw error;
+      })("log"),
+    (caught) => caught === error,
+  );
+});
+
+test("empty log path does not access the filesystem", () => {
+  assert.equal(
+    load(() => {
+      throw new Error("unexpected read");
+    })(""),
+    "",
+  );
+});
+
+test("records locally made music as generated once it is ready", () => {
+  const dir = mkdtempSync(join(tmpdir(), "mu-wait-bgm-"));
+  try {
+    mkdirSync(join(dir, "assets/bgm"), { recursive: true });
+    writeFileSync(join(dir, "assets/bgm/track.wav"), "generated music");
+    writeFileSync(
+      join(dir, "audio_meta.json"),
+      JSON.stringify({
+        bgm: { path: "assets/bgm/track.wav" },
+        bgm_pending: true,
+        bgm_provider: "musicgen",
+        bgm_mode: "detached-single",
+      }),
+    );
+    const script = new URL("./wait-bgm.mjs", import.meta.url).pathname;
+    const args = ["--audio-meta", join(dir, "audio_meta.json"), "--hyperframes", dir];
+
+    const run = spawnSync(process.execPath, [script, ...args, "--timeout-ms", "1000"], {
+      encoding: "utf8",
+    });
+
+    assert.equal(run.status, 0, run.stderr);
+    const records = readFileSync(join(dir, ".media/manifest.jsonl"), "utf8")
+      .trim()
+      .split("\n")
+      .map((line) => JSON.parse(line));
+    assert.deepEqual(
+      records.map(({ path, type, source, provenance }) => [
+        path,
+        type,
+        source,
+        provenance.provider,
+      ]),
+      [["assets/bgm/track.wav", "bgm", "generated", "musicgen"]],
+    );
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills/media-use/luts/README.md b/.claude/skills/media-use/luts/README.md
new file mode 100644
index 0000000..dc3ed9a
--- /dev/null
+++ b/.claude/skills/media-use/luts/README.md
@@ -0,0 +1,28 @@
+# LUT library (authoring)
+
+`index.json` is the agent-consumed catalog of color-grade looks. Each entry resolves
+on demand — no `.cube` bodies are committed to the repo.
+
+Each look has:
+
+- `id`, `description`, `tags`, `intensity` — matching + application metadata.
+- `url` (optional) — a hosted `.cube` downloaded, validated, and frozen at resolve
+  time, exactly like bgm/image assets.
+- `params` (optional) — a deterministic `buildCube` spec used offline (`--local-only`)
+  or as a fallback if the `url` download/validation fails.
+
+An entry needs at least one of `url` or `params`; prefer both (CDN url with a params
+fallback) so resolution is never blocked on the network.
+
+## Hosting a new look (operators)
+
+1. Generate the `.cube` (e.g. `resolve -t lut --params '{...}'` or a graded export).
+2. Upload it to the public CDN origin bucket:
+
+   ```
+   aws s3 cp <id>.cube s3://heygen-public/luts/<id>.cube
+   ```
+
+   It is then served at `https://static.heygen.ai/luts/<id>.cube` (CloudFront).
+
+3. Add an entry to `index.json` with that `url` (and ideally a `params` fallback).
diff --git a/.claude/skills/media-use/luts/index.json b/.claude/skills/media-use/luts/index.json
new file mode 100644
index 0000000..9f6725c
--- /dev/null
+++ b/.claude/skills/media-use/luts/index.json
@@ -0,0 +1,57 @@
+{
+  "notes": "Look entries resolve on-demand from a CDN .cube `url` (downloaded + frozen, like bgm/image); `params` is a deterministic buildCube fallback used offline (--local-only) or if the download/validation fails. No .cube bodies are committed. See README.md to author or host a new look.",
+  "looks": [
+    {
+      "id": "teal-orange-blockbuster",
+      "description": "Teal shadows and warm orange highlights for blockbuster-style cinematic footage.",
+      "tags": ["teal", "orange", "blockbuster", "cinematic", "split tone", "movie"],
+      "intensity": 0.85,
+      "url": "https://static.heygen.ai/luts/teal-orange-blockbuster.cube",
+      "params": {
+        "contrast": 0.18,
+        "saturation": 0.08,
+        "vibrance": 0.12,
+        "splitTone": {
+          "intensity": 0.62,
+          "balance": 0.52,
+          "shadows": [-0.04, 0.05, 0.09],
+          "highlights": [0.1, 0.04, -0.03]
+        }
+      }
+    },
+    {
+      "id": "bleach-bypass",
+      "description": "High-contrast desaturated bleach bypass look with strong blacks.",
+      "tags": ["bleach", "bypass", "desaturated", "high contrast", "gritty", "film"],
+      "intensity": 0.8,
+      "url": "https://static.heygen.ai/luts/bleach-bypass.cube",
+      "params": {
+        "blacks": 0.04,
+        "shadows": -0.08,
+        "highlights": 0.08,
+        "whites": 0.18,
+        "contrast": 0.55,
+        "temperature": -0.02,
+        "saturation": -0.72,
+        "vibrance": -0.25
+      }
+    },
+    {
+      "id": "film-fade",
+      "description": "Soft faded film wash with lifted blacks and warm highlights.",
+      "tags": ["film", "fade", "faded", "wash", "warm", "vintage"],
+      "intensity": 0.75,
+      "url": "https://static.heygen.ai/luts/film-fade.cube",
+      "params": {
+        "blacks": 0.35,
+        "shadows": 0.18,
+        "highlights": 0.02,
+        "whites": -0.03,
+        "contrast": -0.28,
+        "temperature": 0.16,
+        "saturation": -0.12,
+        "vibrance": -0.08
+      }
+    }
+  ]
+}
diff --git a/.claude/skills/media-use/references/audio.md b/.claude/skills/media-use/references/audio.md
new file mode 100644
index 0000000..4ffce7a
--- /dev/null
+++ b/.claude/skills/media-use/references/audio.md
@@ -0,0 +1,20 @@
+# Audio engine — voiceover, music, SFX, captions, transcription
+
+For a full audio pass (TTS voiceover + background music + sound effects in one
+shot), use the shared engine at `audio/scripts/audio.mjs`. It takes a neutral
+`audio_request.json` and writes `audio_meta.json` plus assets under
+`.media/audio/{voice,bgm,sfx}`:
+
+```bash
+node <SKILL_DIR>/audio/scripts/audio.mjs --request ./audio_request.json --out ./audio_meta.json
+```
+
+- **Request** `{ provider?, voice?, lang?, speed?, tts_model?, style?, lines: [{ id, text, style?, sfx?: [names] }], bgm: { mode?, query?, prompt? } }`: `id` joins each line back to your model; `bgm.mode` = `retrieve | generate | none` (omit for auto). `--only tts,bgm,sfx` runs a subset and merges into an existing `--out`.
+- **Gemini narration** is opt-in with `provider: "gemini"` and an API key or service-account credentials. `tts_model` defaults to `gemini-3.8-flash-tts`; 3.8 Flash-Lite, 3.1 Flash Preview, and 2.5 Pro/Flash Preview TTS are also supported. `style` directs delivery; a line's style overrides the request's style. CLI overrides: `--tts-model`, `--style`. See `audio/references/tts.md` for a complete request. The existing automatic provider order is unchanged.
+- **Output** `audio_meta.json` (id-keyed): `voices[].{path,duration_s,words[]}` (word timestamps for captions), `sfx[]`, `bgm`, `total_duration_s`.
+- **HeyGen free-usage path**: HeyGen CLI auth unlocks TTS plus music retrieval; SFX come from Openverse with no account (`audio/references/sfx.md`). Local/provider-specific generators are explicit alternatives where installed; run `npx hyperframes media-use resolve --doctor` before assuming retrieval or TTS will work.
+- If BGM took the generate path (`bgm_pending: true`), run `audio/scripts/wait-bgm.mjs` before final render.
+
+Single-shot helpers: `audio/scripts/heygen-tts.mjs` (one voice file). Transcription / background removal / captions use the `hyperframes` CLI (`transcribe`, `remove-background`), see the per-topic guides in `audio/references/` (`tts.md`, `bgm.md`, `sfx.md`, `transcribe.md`, `remove-background.md`, `captions/`).
+
+Transcription defaults to Parakeet (better than whisper.cpp: 6.05% vs 7.44% WER, 5-10x faster) via `scripts/transcribe.mjs`, with whisper.cpp auto-fallback (see `references/operations.md`).
diff --git a/.claude/skills/media-use/references/grading.md b/.claude/skills/media-use/references/grading.md
new file mode 100644
index 0000000..0e1d8ee
--- /dev/null
+++ b/.claude/skills/media-use/references/grading.md
@@ -0,0 +1,161 @@
+# Color grading — grade blocks and LUTs
+
+Use `grade` when you need a canonical HyperFrames grading/effects payload for
+an `<img>` or `<video>`. Core presets and params-backed LUT entries resolve
+locally; future CDN-backed LUT entries require network unless already
+frozen. Persist a decided payload with the CLI rather than editing HTML by
+hand:
+
+For a vague but explicit polish request, do not jump directly from intent to a
+preset name. Read `media-treatments.md`, choose a treatment whose subject and
+avoid rules match the actual media, apply its conservative base with only
+justified bounded tuning, then complete its visual verification steps. A named
+owned treatment uses the exact preset/payload in its recipe; do not run the
+generic grade/LUT resolver first.
+
+Stop here and use that treatment workflow for requests such as retro, old home
+video, camcorder, film, print, ASCII, glitch, privacy, or a media reveal. Do not
+assemble those from a generic LUT plus handmade CSS vignette/grain/opacity.
+
+**Never `cat`/read a `.cube` file into context.** A 3D LUT is ~size^3 lines of raw numbers (33^3 ≈ 36k lines at the default size). It bloats context and carries zero human/agent-legible signal. To understand or choose a LUT, use `hyperframes grade-compare` to see it rendered. `npx hyperframes media-use resolve --type lut --intent "<look description>" --project .` validates generated or downloaded LUTs before freezing them; the validator is bundled in the CLI, not shipped as a standalone skill script. Read `<project>/.media/index.md` or `luts/index.json` for the description. Never read the LUT body itself.
+
+```bash
+npx hyperframes media-use resolve --type grade --intent "warm daylight" --project . --json
+```
+
+Preset-first output uses the core runtime vocabulary and does not freeze a file:
+
+```json
+{
+  "preset": "warm-daylight",
+  "intensity": 1
+}
+```
+
+Apply that payload to one unambiguous real media element:
+
+```bash
+hyperframes media-treatment --project . --file index.html \
+  --selector '#hero' \
+  --grading '{"preset":"warm-daylight","intensity":1}' --apply --json
+```
+
+Use `--dry-run` before writing when scope is uncertain and `--clear` to remove
+the treatment. The low-level persisted result is still normal HTML:
+
+```html
+<video
+  class="clip"
+  src="./media/scene.mp4"
+  data-color-grading='{"preset":"warm-daylight","intensity":1}'
+></video>
+```
+
+Direct attribute authoring is a fallback for environments where the CLI is not
+available, not the primary agent workflow.
+
+To build a treatment that is not already represented by a recipe, inspect the
+canonical toolbox first:
+
+```bash
+hyperframes media-treatment --capabilities --json
+```
+
+It reports a concise family map. Read `--capability grading` for the processing
+order, then request only the focused family needed to get its legal controls
+and ranges from Core. Compose one nested payload and pass it back through
+`hyperframes media-treatment`; the command rejects unknown keys before
+mutation. Do not generate or hand-edit a LUT merely to combine controls already
+owned by the realtime shader.
+
+For seek-safe effect motion, animate only the runtime-supported CSS properties
+on that same real media element with its registered paused GSAP timeline:
+
+| CSS property                       | Range   |
+| ---------------------------------- | ------- |
+| `--hf-color-grading-intensity`     | 0 to 1  |
+| `--hf-color-grading-lut-intensity` | 0 to 1  |
+| `--hf-color-grading-exposure`      | -2 to 2 |
+| `--hf-color-grading-blur`          | 0 to 1  |
+| `--hf-color-grading-bloom`         | 0 to 3  |
+| `--hf-color-grading-kuwahara`      | 0 to 1  |
+| `--hf-color-grading-pixelate`      | 0 to 1  |
+| `--hf-color-grading-ascii`         | 0 to 1  |
+| `--hf-color-grading-dither`        | 0 to 1  |
+
+Once set (inline, in a stylesheet or on a parent), a property overrides the
+payload's value for that control, so set it only on media you animate: put the
+tween's first value in the element's inline `style`, then use finite `tl.to()`
+keyframes. Leave it unset for a static grade. Do not use a frame-zero `tl.set()`, CSS
+animation clocks, timers, random values, or `onUpdate` callbacks. The static
+`data-color-grading` payload remains the fallback and source of the other
+controls.
+
+For a reusable color transform beyond the preset vocabulary, freeze a validated
+`.cube` under `.media/luts/` and return a block that references it:
+
+```bash
+npx hyperframes media-use resolve --type grade --intent "teal orange blockbuster" --project . --json
+```
+
+```json
+{
+  "intensity": 1,
+  "lut": { "src": ".media/luts/grade_001.cube", "intensity": 0.85 }
+}
+```
+
+Use `lut` when you only need the reusable `.cube` file:
+
+```bash
+npx hyperframes media-use resolve --type lut --intent "teal orange blockbuster" --project .
+```
+
+For a describable technical look, author an explicit parametric LUT with `--params`:
+
+```bash
+npx hyperframes media-use resolve --type lut --params '{"contrast":0.2,"temperature":-0.3}' --project .
+npx hyperframes media-use resolve --type grade --params '{"exposure":0.2}' --project . --json
+```
+
+For a LUT generated by your own script, ingest it with `--from`; media-use validates it before registration and rejects invalid or oversized cubes:
+
+```bash
+npx hyperframes media-use resolve --type lut --from custom.cube --project .
+```
+
+Parametric math (`buildCube`) cannot reproduce real film stocks or emulsion
+transforms. Use a CDN-backed scanned `.cube` entry or ingest a real scanned
+`.cube` for those.
+
+For visual selection, list reusable LUT candidates with
+`resolve --type grade --candidates`, write the promising entries to a
+`grades.json`, run
+`hyperframes grade-compare --for <frame> --grades grades.json`, then commit the
+winner with `resolve -t grade` as the final `data-color-grading` block.
+
+For media already selected in a composition, use `media-treatment --analyze`
+when you need side-effect-free `ffmpeg`/`ffprobe` signalstats evidence. It
+returns source metadata, HDR/unknown-LOG warnings, and a bounded `adjust`
+suggestion without modifying the composition. The suggestion is a starting
+point for visual review, not an automatic neutralization of intentional color.
+
+```bash
+hyperframes media-treatment --project . --file index.html \
+  --selector '#hero' --analyze --json
+```
+
+For an unbound source file, `resolve --type grade --for ... --analyze` remains
+available. Without `--analyze`, that resolver records a grade candidate in
+`.media`; use that form only when you intend to keep the candidate.
+
+Library LUT entries live in `luts/index.json`. Each entry keeps `id`,
+`description`, `tags`, and `intensity`, then supplies either compact `params`
+for on-demand `buildCube(params)` generation or a direct CDN `url` for future
+scanned `.cube` files. Do not commit generated `.cube` bodies; resolve
+validates generated or downloaded cubes as it freezes them under
+`.media/luts/`.
+
+```bash
+npx hyperframes media-use resolve --type lut --intent "teal orange blockbuster" --project . --json
+```
diff --git a/.claude/skills/media-use/references/local.md b/.claude/skills/media-use/references/local.md
new file mode 100644
index 0000000..7fcce2b
--- /dev/null
+++ b/.claude/skills/media-use/references/local.md
@@ -0,0 +1,24 @@
+# Local media commands
+
+These run on this machine, free, and write into the project.
+
+## Grade and style footage and images
+
+- Measure, then correct: `npx hyperframes media-treatment --selector '#hero' --analyze --json`, then `--grading '<json>' --apply`. `--dry-run` previews; `--clear` removes the treatment.
+- `--file` defaults to `index.html`: for media inside a scene, pass `--file compositions/<scene>.html`.
+- Grain, blur, vignette, presets, palettes: `npx hyperframes media-treatment --capabilities --json`, then `--capability <id>` for one family's controls and ranges.
+- The result is a `data-color-grading` attribute on the media element. It treats the whole element in SDR, so it can't blur one region such as a face.
+- To animate it, set the start value in the element's inline `style` and tween these custom properties with finite `tl.to()` on the composition's timeline: `--hf-color-grading-` followed by `intensity`, `lut-intensity`, `blur`, `kuwahara`, `pixelate`, `ascii` or `dither` (each 0–1), `exposure` (−2 to 2) or `bloom` (0–3).
+- Compare candidate grades on one frame: `npx hyperframes grade-compare --for frame.png --grades grades.json --json`, or `--luts a.cube,b.cube`.
+
+## Cutouts
+
+- `npx hyperframes remove-background <in> -o cutout.webm` (`.png` for an image; `--quality best` for a closer colour match over its source). `--background-output plate.webm` also writes the background with the subject cut out.
+- A cutout over its own source: both clips `data-start="0"` and `data-media-start="0"`, so they decode in sync.
+- The runtime forces `opacity: 1` on a timed clip. To fade a cutout, wrap it in an untimed `<div>` and animate the wrapper.
+
+## Sound
+
+- Match loudness: `npx hyperframes normalize-audio --reference <id> --target <id> --write`, or `--lufs=-16` (the default target; write a negative value with `=`) without a reference. `--write` edits the volume in the HTML.
+- Beat grid: `npx hyperframes beats --json` reads the local music `<audio>` (marked `data-timeline-role="music"`, or an id containing music, bgm or soundtrack) and writes `beats/<path>.json`, which Studio shows as its beat grid. A beat time minus a scene's `data-start` is its time inside that scene.
+- Local transcription, or importing `.srt`, `.vtt` or Whisper JSON: `npx hyperframes transcribe <file> --json`. The default model translates non-English speech: see `../../hyperframes/references/captions.md`.
diff --git a/.claude/skills/media-use/references/media-treatment-recipes.md b/.claude/skills/media-use/references/media-treatment-recipes.md
new file mode 100644
index 0000000..86517df
--- /dev/null
+++ b/.claude/skills/media-use/references/media-treatment-recipes.md
@@ -0,0 +1,929 @@
+# Media treatment recipes
+
+These are optional tested seeds, not the complete capability surface. Read the
+shared policy and choose one relevant section through `media-treatments.md`.
+Agents may modify or combine a seed with compatible canonical controls after
+inspecting the media, or assemble a bespoke payload from
+`hyperframes media-treatment --capabilities --json` when no seed fits.
+
+## Natural Portrait
+
+Use for a talking head, interview, presenter, or people-focused photo whose
+intended result is natural, polished, and restrained.
+
+Do not use when the face is incidental or tiny, the source is intentionally
+neon/monochrome/strongly stylized, or the requested result is beauty retouching.
+This treatment changes the whole frame; it is not a face mask or skin-smoothing
+effect.
+
+Inspect face exposure, highlight retention, shadow detail, white balance, and
+whether the existing look is intentional. Signalstats do not detect faces or
+creative intent.
+
+### Base payload
+
+Start here, then tune only when the sampled frames justify it:
+
+```json
+{ "preset": "skin-soft", "intensity": 0.6 }
+```
+
+`skin-soft` is a global tonal/color preset whose vibrance math is reduced for
+skin-like colors. It does not blur, retouch, segment, or track a face.
+
+### Bounded tuning
+
+Adjustment values are absolute values in the final payload, not deltas added to
+the preset. Keep changes inside these conservative ranges unless the user asks
+for a stylized result:
+
+| Property    | Natural Portrait range |
+| ----------- | ---------------------- |
+| intensity   | 0.45 to 0.75           |
+| exposure    | -0.06 to 0.14          |
+| contrast    | -0.05 to 0.08          |
+| highlights  | -0.18 to -0.04         |
+| shadows     | 0.04 to 0.18           |
+| whites      | -0.10 to 0.04          |
+| blacks      | -0.06 to 0.06          |
+| temperature | -0.05 to 0.10          |
+| tint        | -0.03 to 0.05          |
+| vibrance    | 0 to 0.06              |
+| saturation  | -0.04 to 0.06          |
+
+Leave grain, blur, and pixelate at zero. A vignette is optional at `0` to
+`0.05` only when it improves subject focus without looking like an effect.
+
+Manual controls must stay inside their schema section; they are never
+top-level keys. A tuned Natural Portrait payload looks like this:
+
+```json
+{
+  "preset": "skin-soft",
+  "intensity": 0.58,
+  "adjust": {
+    "highlights": -0.08,
+    "shadows": 0.08,
+    "temperature": 0.02,
+    "vibrance": 0.02
+  },
+  "details": { "vignette": 0.03 }
+}
+```
+
+Use the same nested shape in `grade-compare` candidate files. `adjust` owns
+tonal/color controls, `details` owns vignette/grain, and `effects` owns blur,
+pixelate, chroma bleed, and the advanced treatment primitives below.
+
+During the common comparison, reject any result that makes skin implausible,
+loses highlight detail, flattens or desaturates dark skin, or casts clothing and
+background colors accidentally.
+
+## Product Polish
+
+Use for photographed or filmed physical products when the goal is clean,
+accurate, dimensional presentation. Protect product color, material texture,
+label readability, specular highlights, and intentional lighting.
+
+Do not use this treatment for literal app/site screenshots or screen captures;
+follow UI Fidelity below. Do not neutralize a lifestyle scene's deliberate
+ambient color, and do not infer exact brand-color correction without a neutral
+reference or known product color.
+
+Inspect the product separately from its background. Check white balance, label
+legibility, surface texture, highlight clipping, shadow detail, white point,
+and black point. Statistics cannot identify a white package, metallic
+highlight, amber glass, or intentional warm light.
+
+### Base payload
+
+Compare this restrained correction against the untouched source:
+
+```json
+{
+  "intensity": 0.7,
+  "adjust": {
+    "exposure": 0.01,
+    "contrast": 0.06,
+    "highlights": -0.1,
+    "shadows": 0.04,
+    "whites": 0.02,
+    "blacks": -0.03,
+    "vibrance": 0.03,
+    "saturation": 0.02
+  }
+}
+```
+
+This is a comparison starting point, not an instruction to change an already
+finished source. If the original has accurate color, clean endpoints, and good
+texture, leave the pixels unchanged and polish through framing or motion.
+
+### Bounded tuning
+
+| Property    | Product Polish range |
+| ----------- | -------------------- |
+| intensity   | 0.45 to 0.8          |
+| exposure    | -0.08 to 0.1         |
+| contrast    | 0 to 0.1             |
+| highlights  | -0.16 to 0           |
+| shadows     | 0 to 0.12            |
+| whites      | -0.08 to 0.05        |
+| blacks      | -0.06 to 0.04        |
+| temperature | -0.05 to 0.05        |
+| tint        | -0.03 to 0.03        |
+| vibrance    | 0 to 0.06            |
+| saturation  | -0.04 to 0.05        |
+
+Temperature and tint stay at zero unless the frames show a plausible cast.
+Leave grain, vignette, blur, and pixelate at zero for catalog/e-commerce media.
+For a lifestyle product shot, a vignette up to `0.04` is acceptable only when
+it improves focus without changing the product itself.
+
+During the common comparison, reject any result that clips white packaging,
+muddies black products, shifts a known brand color, hides texture, or makes
+labels harder to read. Report when preserving the original was the deliberate
+decision.
+
+## UI Fidelity
+
+Use for literal app, website, dashboard, terminal, slide, or screen-recording
+pixels whose colors and readability are part of the product being shown.
+
+The default payload is **none**: do not add `data-color-grading`. Global color
+changes affect brand colors, status colors, charts, screenshots, and tiny text
+together, so even a tasteful photographic look can make the demonstration less
+truthful.
+
+Polish UI footage with crop, scale, pacing, cursor emphasis, surrounding DOM
+overlays, or seek-safe motion outside the captured pixels. If the user
+explicitly asks for a stylized UI look, preview it against the original and
+state that exact UI color is no longer preserved. If a camera filmed a screen,
+correct only a demonstrated capture cast or exposure issue and still verify
+text and brand colors across representative frames.
+
+## Film Memory
+
+Use when the story explicitly calls for a warm memory, restrained flashback,
+personal archive, or film-like recollection. This is not the default meaning of
+"cinematic", and it is not scanned-film-stock emulation.
+
+Do not use for literal UI, product catalog media, technical demonstrations, or
+footage whose accurate current-day color is important. Use a separate camcorder
+treatment for VHS/REC language. Do not add dust, scratches, light leaks, film
+burns, or halation unless an owned component is available and the requested
+story actually benefits from it.
+
+Check that the source has enough highlight and shadow detail to tolerate a
+faded treatment, and confirm nostalgia or temporal separation belongs in the
+story. Compare the full moving treatment, not only a still preset card.
+
+### Static pixel base
+
+Start with this owned shader recipe:
+
+```json
+{
+  "preset": "vintage-wash",
+  "intensity": 0.6,
+  "details": {
+    "vignette": 0.12,
+    "grain": 0.12,
+    "grainSize": 0.2,
+    "grainRoughness": 0.6
+  }
+}
+```
+
+Keep the static values inside these ranges:
+
+| Property       | Film Memory range |
+| -------------- | ----------------- |
+| intensity      | 0.5 to 0.75       |
+| vignette       | 0.08 to 0.16      |
+| grain          | 0.08 to 0.16      |
+| grainSize      | 0.16 to 0.24      |
+| grainRoughness | 0.5 to 0.7        |
+
+The stronger end can flatten dark skin, black clothing, or already-faded
+footage. Compare against the source and lower strength when it does.
+
+### Temporal character
+
+Use the existing registered paused GSAP timeline on the same media element:
+
+- author `--hf-color-grading-exposure: 0` in the media element's inline
+  `style`;
+- move it through a finite irregular sequence within `-0.03` to `0.03`, using
+  gentle `sine.inOut` segments around `0.45` to `0.8` seconds;
+- for gate weave, keep `x`/`y` within `0.15%` of the shorter composition edge,
+  rotation within `0.03` degrees, and scale between `1.005` and `1.01` to
+  protect the frame edges;
+- return close to the starting exposure and transform at the treatment end.
+
+Do not use randomness, infinite CSS keyframes, timers, or `onUpdate`. Flicker
+is a gentle exposure pulse, not a flash. Weave is slight mechanical drift, not
+handheld shake.
+
+Also run focused keyframe diagnostics and seek directly to the final-minus-frame
+position. Reject brightness pumping, distracting drift, clipped edges, or
+skin/detail loss. Report the motion ranges and describe this as an HF
+film-memory treatment, not camera-stock emulation. If motion reads as an effect
+before it reads as a memory, reduce or remove it.
+
+## Creator Camcorder
+
+Use when the story explicitly calls for a creator-camera recording, consumer
+camcorder memory, or restrained digital-video character. This treatment is a
+modern camcorder language, not VHS restoration, CRT simulation, surveillance,
+or a promise to reproduce a specific camera model.
+
+Do not apply it to literal UI, product catalog media, tiny media tiles, or
+already compressed footage that has distracting color bleed. Do not add a REC
+HUD merely because the source contains a person talking; the camera-device
+language must support the story or the user's requested style.
+
+Check skin, saturated edges, fine text, source compression, and whether the
+source already has a deliberate camera look. Reject softened chroma that
+damages labels, graphics, or identifying product color. Judge chroma softness
+and grain in motion, not one still.
+
+### Static pixel base
+
+Start with the proven shader payload below, then tune only inside the bounded
+ranges when representative frames justify it:
+
+```json
+{
+  "intensity": 0.72,
+  "adjust": {
+    "contrast": 0.08,
+    "highlights": -0.05,
+    "shadows": 0.02,
+    "whites": 0.03,
+    "blacks": -0.04,
+    "temperature": -0.03,
+    "tint": -0.015,
+    "vibrance": -0.03,
+    "saturation": -0.06
+  },
+  "details": {
+    "vignette": 0.06,
+    "grain": 0.08,
+    "grainSize": 0.18,
+    "grainRoughness": 0.58
+  },
+  "effects": { "chromaBleed": 0.55 }
+}
+```
+
+| Property       | Creator Camcorder range |
+| -------------- | ----------------------- |
+| intensity      | 0.55 to 0.8             |
+| contrast       | 0.03 to 0.1             |
+| highlights     | -0.1 to 0               |
+| shadows        | 0 to 0.06               |
+| whites         | 0 to 0.05               |
+| blacks         | -0.08 to -0.01          |
+| temperature    | -0.06 to 0.04           |
+| tint           | -0.03 to 0.02           |
+| vibrance       | -0.06 to 0.02           |
+| saturation     | -0.12 to -0.02          |
+| vignette       | 0.03 to 0.1             |
+| grain          | 0.04 to 0.12            |
+| grainSize      | 0.14 to 0.24            |
+| grainRoughness | 0.45 to 0.7             |
+| chromaBleed    | 0.35 to 0.7             |
+
+Leave blur and pixelate at zero. Square pixels, scanlines, RGB splitting, and
+tracking noise are different visual languages and are not defaults for this
+treatment.
+
+### Optional camera HUD
+
+When the narrative benefits from explicit recording-device language, install
+the Registry overlay block:
+
+```bash
+npx hyperframes add camcorder-hud --no-clipboard
+```
+
+Insert the printed `data-composition-src` host over the intended media range.
+Edit the displayed date/time/mode/counter in
+`compositions/camcorder-hud.html`. The block's paused GSAP timeline derives
+its counter and REC blink from composition time, so play, scrub, and render
+agree. Keep the HUD finite and scoped to the shot.
+
+The HUD is an optional authored overlay. The pixel payload remains useful
+without it, and the HUD alone is not evidence that the footage was treated.
+
+### Optional source-to-camera reveal
+
+Global grading intensity fades only primary correction and LUT output; it does
+not fade the independent camcorder effects. For a visible source-to-camera
+mode change, use two synchronized media layers and a finite opacity crossfade
+from untreated to treated footage. Fade the HUD in on that same paused GSAP
+timeline. Do not animate shader state with callbacks or an independent clock.
+
+Also verify HUD placement and framing in each aspect ratio the project supports.
+Report whether the HUD was used and describe this as an HF camcorder treatment,
+not camera/VHS emulation. If an effect artifact is more noticeable than the
+subject, reduce chroma bleed/grain or keep the source unchanged.
+
+## VHS Playback
+
+Use when the story explicitly calls for analog home-video tape, a dated archive,
+or a visibly degraded VHS playback. This treatment is not Creator Camcorder,
+generic pixelation, CRT display simulation, or a default retro look.
+
+Do not use for literal UI, product catalog media, small text, clean modern
+creator footage, or any source whose identifying color/detail must remain exact.
+Inspect high-contrast vertical edges, faces, saturated objects, and the bottom
+of the frame in motion. Analog damage must support the story without making the
+subject hard to read.
+
+### Pixel payload
+
+Start with the complete proven combination, not `tapeDamage` alone:
+
+```json
+{
+  "intensity": 1,
+  "adjust": { "contrast": -0.04, "saturation": -0.08 },
+  "details": {
+    "grain": 0.16,
+    "grainSize": 0.12,
+    "grainRoughness": 0.72
+  },
+  "effects": {
+    "tapeDamage": 0.82,
+    "tapeTracking": 0.85,
+    "tapeNoise": 0.3,
+    "tapeSpeed": 0.5,
+    "chromaBleed": 0.5,
+    "chromaticAberration": 0.18,
+    "chromaticAngle": 0,
+    "scanlines": 0.35,
+    "scanlineCount": 0.17,
+    "scanlineSoftness": 1,
+    "digitalGlitch": 0.32,
+    "digitalGlitchColorSplit": 0,
+    "digitalGlitchLineTear": 0.08,
+    "digitalGlitchPixelate": 0,
+    "digitalGlitchBlockAmount": 0,
+    "digitalGlitchBlockDisplacement": 0,
+    "digitalGlitchBlockOpacity": 0,
+    "digitalGlitchSpeed": 0.5
+  }
+}
+```
+
+| Property              | VHS Playback range |
+| --------------------- | ------------------ |
+| intensity             | 0.75 to 1          |
+| contrast              | -0.1 to 0          |
+| saturation            | -0.16 to 0         |
+| grain                 | 0.08 to 0.18       |
+| grainSize             | 0.08 to 0.18       |
+| grainRoughness        | 0.55 to 0.8        |
+| tapeDamage            | 0.65 to 0.9        |
+| tapeTracking          | 0.5 to 0.9         |
+| tapeNoise             | 0.15 to 0.45       |
+| tapeSpeed             | 0.35 to 0.65       |
+| chromaBleed           | 0.35 to 0.65       |
+| chromaticAberration   | 0.08 to 0.22       |
+| scanlines             | 0.2 to 0.4         |
+| scanlineCount         | 0.14 to 0.2        |
+| digitalGlitch         | 0.2 to 0.4         |
+| digitalGlitchLineTear | 0.04 to 0.1        |
+
+`tapeDamage` owns deterministic horizontal line jitter, slow time-base wobble,
+bottom-edge head switching, luma bandwidth loss, restrained ghosting, noise,
+and sparse dropouts. Its subordinate tracking/noise/speed controls add bounded
+moving tape tears and control their signal character without introducing a new
+clock. `chromaBleed` separately reduces horizontal chroma detail. The restrained
+scanline and chromatic settings supply the remaining tape-playback character.
+The digital stage is used only for rare horizontal row tears: keep its color
+split, pixelation, block displacement, block opacity, and corruption values at
+zero. Leave blur, CRT curvature, generic pixelation, and a camera HUD off.
+
+These values are an original HyperFrames recipe calibrated on the same public
+Orange Cat source used for the external visual reference. They are not copied
+shader code or a claim of pixel-identical output from the external reference. The scanline count is
+mapped to the reference's approximately 127-cycle primary line pattern; the HF
+tracking math stays bounded in media pixels and uses the composition clock.
+
+The shader damage evolves from the existing deterministic media time, so it
+needs no CSS loop or private timeline. Global grading intensity does not fade
+tape damage or other independent effects. If the story requires a finite
+source-to-tape reveal, crossfade synchronized untreated and treated media layers
+on the host's paused GSAP timeline. During the common workflow, inspect dense
+consecutive frames and reject hard edge tearing, face
+smearing, frozen noise, square blocks, blank borders, or a bottom disturbance
+that competes with the subject.
+
+## 8mm Home Movie
+
+Use for personal archive, family-memory, childhood, travel-memory, or explicit
+small-gauge home-movie language. This is stronger and more materially film-like
+than Film Memory, but it is still an owned HyperFrames treatment rather than a
+claim to reproduce a named film stock, camera, or laboratory process.
+
+Do not use for literal UI, technical demonstrations, catalog products, clean
+interviews, or footage where dust/scratches would imply false provenance. Check
+skin, highlights, dark clothing, and frame edges before applying it.
+
+### Pixel payload
+
+```json
+{
+  "preset": "vintage-wash",
+  "intensity": 0.72,
+  "details": {
+    "vignette": 0.28,
+    "vignetteMidpoint": 0.54,
+    "vignetteFeather": 0.72,
+    "grain": 0.34,
+    "grainSize": 0.18,
+    "grainRoughness": 0.72
+  },
+  "effects": { "filmArtifacts": 0.62 }
+}
+```
+
+| Property       | 8mm Home Movie range |
+| -------------- | -------------------- |
+| intensity      | 0.6 to 0.8           |
+| vignette       | 0.18 to 0.34         |
+| grain          | 0.22 to 0.42         |
+| grainSize      | 0.12 to 0.24         |
+| grainRoughness | 0.6 to 0.8           |
+| filmArtifacts  | 0.35 to 0.7          |
+
+`filmArtifacts` owns only deterministic sparse dust and short scratches. The
+existing preset/details own color, vignette, and grain; the host's paused GSAP
+timeline owns optional gate weave. Keep weave within `0.15%` of the shorter
+composition edge, rotation within `0.03` degrees, and scale between `1.005` and
+`1.015`. Use finite `sine.inOut` segments around `0.6` to `1` second, return
+near the starting transform, and never use randomness, timers, `onUpdate`, or
+an infinite CSS animation.
+
+Reject a result when dust is constantly visible, scratches persist unnaturally,
+the frame pumps, weave exposes an edge, highlights turn muddy, or the material
+artifacts are more noticeable than the memory. For a subtler nostalgic result,
+use Film Memory instead.
+
+## Editorial Halftone
+
+Use for print/editorial transitions, poster frames, comic/newsprint language,
+stylized product or portrait beats, and graphic sequences where visible ink
+screening is the point. This is a real four-angle CMYK raster treatment, not a
+dotted DOM overlay.
+
+Do not use on literal UI, dense text, tiny labels, footage that must remain
+photorealistic, or a long talking-head segment unless the user explicitly asks
+for strong print stylization. Preserve text/captions as ungraded DOM above the
+media whenever they must stay readable.
+
+### Pixel payload
+
+```json
+{
+  "intensity": 1,
+  "adjust": { "contrast": 0.04, "saturation": 0.04 },
+  "effects": { "halftone": 0.94, "halftoneSize": 0.36 }
+}
+```
+
+| Property     | Editorial Halftone range |
+| ------------ | ------------------------ |
+| intensity    | 0.8 to 1                 |
+| contrast     | -0.02 to 0.08            |
+| saturation   | -0.04 to 0.08            |
+| halftone     | 0.75 to 1                |
+| halftoneSize | 0.15 to 0.55             |
+
+The shader uses fixed C/M/Y/K screen angles of 15/75/0/45 degrees, separate ink
+coverage, a warm paper base, and resolution-aware dot-cell sizing. Keep those
+screen semantics fixed; tune only amount and size unless a future visual proof
+justifies a broader schema. Judge the result at final output resolution because
+browser zoom can misrepresent the screen. Reject unstable moire, unreadable
+subjects, clipped ink detail, excessive dot size, or any treatment that looks
+like a transparent dot texture laid over unchanged footage.
+
+## Two-Ink Editorial Print
+
+Use for poster frames, editorial portraits, music/social cutaways, zine
+graphics, and bold print-led transitions where two visible spot inks are more
+appropriate than photographic color. This is a fixed original HyperFrames
+vermilion/teal treatment, not a claim to emulate a named printer, ink set, or
+commercial print process.
+
+Do not use for literal UI, brand-color-critical products, small labels, natural
+talking heads, or media that must remain photorealistic. Keep captions and
+graphics as normal DOM above the treated media.
+
+### Pixel payload
+
+```json
+{
+  "intensity": 1,
+  "adjust": { "contrast": 0.08, "highlights": -0.06, "shadows": 0.04 },
+  "effects": { "twoInkPrint": 1, "twoInkPrintSize": 0.42 }
+}
+```
+
+| Property        | Two-Ink range |
+| --------------- | ------------- |
+| intensity       | 0.8 to 1      |
+| contrast        | 0.02 to 0.1   |
+| highlights      | -0.1 to 0     |
+| shadows         | 0 to 0.08     |
+| twoInkPrint     | 0.8 to 1      |
+| twoInkPrintSize | 0.18 to 0.55  |
+
+The shader maps warm midtones to vermilion, deep/cool shadows to teal, and
+shared dark coverage to a dark overprint on warm paper. It uses separate
+15/75-degree screens, a subtle fixed registration offset, deterministic paper
+texture, and resolution-aware dot sizing. Do not combine it with `halftone` or
+a duotone LUT: that re-separates the result and defeats the two-ink contract.
+
+Judge it at output resolution and across multiple frames. Reject missing second
+ink, crushed faces, unstable moire, illegible silhouettes, or a result that
+reads as a red tint with dots rather than two screened inks.
+
+## Monochrome Screen Print
+
+Use for graphic portrait beats, posterized social inserts, newspaper-like
+screens, or a finite transition into visible monochrome cells. Keep captions
+and typography as normal DOM above the treated media.
+
+```json
+{
+  "intensity": 1,
+  "effects": {
+    "monoScreen": 1,
+    "monoScreenSize": 0.35,
+    "monoScreenAngle": 0.25,
+    "monoScreenSpread": 0.3,
+    "monoScreenShape": 0,
+    "monoScreenInvert": 0
+  },
+  "palette": ["#111319", "#f2ecdc"]
+}
+```
+
+Use `monoScreenShape` `0..4` for circle, square, diamond, triangle, or line.
+Keep cell size within `0.15..0.55` and spread within `0.15..0.55`. Reject faces
+that lose their silhouette, unstable moire, or cells too small to survive the
+final encoded resolution.
+
+## Engraved Illustration
+
+Use for editorial portraits, historical/technical illustration, title-card
+cutaways, or a source-to-line-art reveal. It is not routine correction and
+should not be applied to literal UI or brand-color-critical product footage.
+
+```json
+{
+  "intensity": 1,
+  "effects": {
+    "engraving": 1,
+    "engravingSpacing": 0.4118,
+    "engravingMinThickness": 0.2,
+    "engravingMaxThickness": 0.4571,
+    "engravingAngle": 0.25,
+    "engravingContrast": 0.4667,
+    "engravingSharpness": 0.59,
+    "engravingWave": 0.2,
+    "engravingWaveFrequency": 0.2222
+  },
+  "palette": ["#101216", "#f3eddf"]
+}
+```
+
+Preserve the calibrated base first. Tune spacing within `0.25..0.6`, contrast
+within `0.3..0.65`, and wave within `0..0.35`. Reject squeezed framing, broken
+contours, noisy flat backgrounds, or lines that flicker across moving frames.
+
+## Crosshatched Sketch
+
+Use for hand-rendered editorial beats, comic/documentary cutaways, and short
+illustrative transformations where multiple line directions should preserve
+the subject contour.
+
+```json
+{
+  "intensity": 1,
+  "effects": {
+    "crosshatch": 1,
+    "crosshatchSpacing": 0.28,
+    "crosshatchThickness": 0.25,
+    "crosshatchAngle": 0.25,
+    "crosshatchContrast": 0.3333,
+    "crosshatchEdges": 0.5,
+    "crosshatchLineWeight": 0,
+    "crosshatchWave": 0.33,
+    "crosshatchWaveFrequency": 0.2222
+  },
+  "palette": ["#101216", "#f3eddf"]
+}
+```
+
+Tune spacing within `0.18..0.5`, edge detail within `0.3..0.7`, and wave within
+`0.1..0.45`. Reject distorted aspect ratio, dense black fill that hides the
+subject, or temporal shimmer stronger than the intended sketch language.
+
+## CRT Display
+
+Use when the media is intentionally shown as an older monitor, terminal, game
+screen, or broadcast display. Curvature alone is geometry, not a complete CRT
+treatment, so pair it with restrained scanlines and only slight channel
+separation.
+
+```json
+{
+  "intensity": 1,
+  "effects": {
+    "crtCurvature": 0.2,
+    "scanlines": 0.35,
+    "scanlineCount": 0.17,
+    "scanlineSoftness": 1,
+    "chromaticAberration": 0.08,
+    "chromaticAngle": 0
+  }
+}
+```
+
+Keep curvature within `0.08..0.28`, scanlines within `0.18..0.45`, and channel
+separation within `0..0.12`. Reject excessive black corners, unreadable UI,
+large color fringes, or applying the display language to ordinary footage when
+the user only asked for correction.
+
+## Procedural ASCII
+
+Use for a deliberate terminal, code, data, surveillance, editorial, or
+source-to-character reveal. This is a real shader-generated 5x7 glyph field,
+not monospace text placed over unchanged footage.
+
+Do not use as routine talking-head polish, on literal UI or dense text, or when
+recognizing a face/product precisely matters. Keep captions and graphics as
+normal DOM above the treated media.
+
+Choose one of these proven starting points:
+
+```json
+{
+  "effects": { "ascii": 1, "asciiSize": 0.08, "asciiInvert": 1 },
+  "palette": ["#020605", "#38ff78"]
+}
+```
+
+The first is **Terminal ASCII**: dark field, bright green glyphs, appropriate
+for code/data/device language. For a warmer print-like **Editorial ASCII**, use:
+
+```json
+{
+  "effects": { "ascii": 1, "asciiSize": 0.066, "asciiInvert": 0 },
+  "palette": ["#0b0d0d", "#eee9db"]
+}
+```
+
+Keep `ascii` between `0.75` and `1` for a fully readable treatment and
+`asciiSize` between `0.04` and `0.15`. A finite reveal may author
+`--hf-color-grading-ascii: 0` inline and tween it to `1` with the registered
+paused GSAP timeline. Reject unstable cells, lost silhouette/face structure,
+unreadable composition, or a palette that conflicts with the project.
+
+## Ordered Palette Dither
+
+Use for posterized social beats, music/editorial cutaways, pixel-art language,
+or a finite source-to-palette reveal. The shader uses a stable 4x4 Bayer
+threshold matrix and an explicit dark-to-light palette. Do not describe it as
+Floyd-Steinberg, Atkinson, or another sequential error-diffusion process.
+
+Do not use on literal UI, brand-color-critical products, tiny labels, or long
+photorealistic sections. Start with one of these original palettes:
+
+```json
+{
+  "effects": { "dither": 1, "ditherSize": 0.25 },
+  "palette": ["#17121a", "#824c50", "#e09873", "#f7ddb1"]
+}
+```
+
+The four-color option is **Warm Print**. For a louder social/music beat, use
+the six-color **Electric Ink** palette:
+
+```json
+{
+  "effects": { "dither": 1, "ditherSize": 0.4 },
+  "palette": ["#080717", "#3c185f", "#7e2278", "#d9339f", "#ff6b66", "#aafae0"]
+}
+```
+
+HyperFrames also owns these named ramps. The name is an authoring shortcut;
+persist the listed colors through the existing `palette` array:
+
+| Group       | Palette ID       | Ordered colors                                                   |
+| ----------- | ---------------- | ---------------------------------------------------------------- |
+| Classic     | `noir`           | `#000000`, `#ffffff`                                             |
+| Classic     | `ink-paper`      | `#1a1a2e`, `#f5f5dc`                                             |
+| Classic     | `terminal`       | `#001100`, `#00ff00`                                             |
+| Classic     | `amber-glow`     | `#1a0f00`, `#ffcc00`                                             |
+| Classic     | `handheld-green` | `#0f380f`, `#306230`, `#8bac0f`, `#9bbc0f`                       |
+| Mood        | `golden-hour`    | `#1a1205`, `#4a3510`, `#8b6914`, `#d4a017`, `#fff8dc`            |
+| Mood        | `deep-sea`       | `#0a1628`, `#1a3a5c`, `#2d6187`, `#5ba4c9`, `#a8dce8`            |
+| Mood        | `arctic-night`   | `#0a0a14`, `#1a2a4a`, `#3a5a8a`, `#6a9aca`, `#cae8ff`            |
+| Mood        | `synthwave`      | `#120458`, `#7b2cbf`, `#e040fb`, `#ff6ec7`, `#fff59d`            |
+| Mood        | `vaporwave`      | `#1a0a2e`, `#3d1a5c`, `#ff71ce`, `#01cdfe`, `#fffb96`            |
+| Mood        | `forest`         | `#1a2e1a`, `#2d4a2d`, `#4a7c4a`, `#7ab37a`, `#c8e6c8`            |
+| Mono        | `sepia`          | `#1a1610`, `#3d3020`, `#6b5a40`, `#a89070`, `#e8dcc8`            |
+| Mono        | `blueprint`      | `#001830`, `#003060`, `#0050a0`, `#0080e0`, `#e0f0ff`            |
+| HyperFrames | `warm-print`     | `#17121a`, `#824c50`, `#e09873`, `#f7ddb1`                       |
+| HyperFrames | `electric-ink`   | `#080717`, `#3c185f`, `#7e2278`, `#d9339f`, `#ff6b66`, `#aafae0` |
+
+Choose by inspected source and project language, not by palette name alone.
+For example, `terminal` fits device/code language, `warm-print` fits editorial
+print, and `synthwave` is an intentional stylization rather than generic polish.
+
+`palette` must contain two to six exact `#RRGGBB` colors in authored order. Use
+dark-to-light order for this treatment; the runtime validates colors but does
+not reorder them, so reversing the array intentionally inverts the mapping.
+Keep `dither` between `0.7` and `1` and `ditherSize` between `0.1` and `0.5`.
+A finite reveal may author `--hf-color-grading-dither: 0` inline and tween it
+to the chosen amount with GSAP. Judge the moving result at output resolution;
+reject shimmer, lost subject structure, accidental muddy intermediate colors,
+or a palette chosen without regard to the project's design language.
+
+## Cached Error Diffusion
+
+Use exact error diffusion for a deliberate 1-bit Macintosh, newspaper/print,
+limited-palette game, or crunchy editorial treatment. It bakes a new image or
+MP4 because every processed block depends on error from earlier blocks; it is
+not a realtime shader setting.
+
+Choose the algorithm by visible intent:
+
+- `floyd-steinberg`: balanced default with organic fine texture.
+- `atkinson`: higher-contrast, more open and distinctly early-Macintosh.
+- `jarvis-judice-ninke`: smoother gradients with a wider 12-neighbor field.
+- `stucki`: smooth, slightly sharper alternative to JJN.
+- `burkes`: compact two-row texture.
+- `sierra`, `sierra-lite`, `two-row-sierra`: progressively different
+  speed/texture tradeoffs; use only after comparing frames.
+
+Run the exact processor and register its output through the existing media
+ledger/cache:
+
+```bash
+node <SKILL_DIR>/scripts/dither.mjs \
+  --input .media/videos/video_001.mp4 \
+  --out .media/generated/video_001.atkinson.mp4 \
+  --algorithm atkinson \
+  --palette '#17121a,#824c50,#e09873,#f7ddb1' \
+  --point-size 3
+
+npx hyperframes media-use resolve \
+  --from .media/generated/video_001.atkinson.mp4 --type video --project .
+```
+
+Use the registered output path on a real `<img>` or `<video>`. Keep text,
+captions, logos, and interface graphics outside the processed media. For a
+finite reveal, overlap the original and processed media with identical framing
+and crossfade or wipe them using the registered paused GSAP timeline. Do not
+label the realtime Bayer shader as Floyd-Steinberg/Atkinson, and do not process
+PQ/HLG footage without an explicit SDR tone-map decision.
+
+## Organic Light Leak
+
+Use for one motivated memory beat, time shift, warm scene handoff, or tactile
+transition. It is a finite deterministic CSS/GSAP overlay, not a looping
+texture, generic flash, or film-stock emulation.
+
+Install the Registry overlay block:
+
+```bash
+npx hyperframes add organic-light-leak-overlay --no-clipboard
+```
+
+Insert the printed `data-composition-src` host at the intended beat and keep
+its duration finite. Its paused timeline owns one rise, peak, and complete
+recovery and scales those phases to the placed duration. Inspect the source
+before, at the brightest frame, and after recovery. Reject clipped faces, an
+unmotivated warm wash, visible black from incorrect blend mode, or a leak that
+conceals the subject longer than the transition needs.
+
+## Freeze-Frame Cutout
+
+Use for a social introduction, speaker emphasis, chapter punctuation, sports
+or creator beat, or a scrapbook/editorial hold. This requires a real alpha
+matte; decoration may not conceal a poor subject edge.
+
+Extract the exact deterministic source frame first, then remove its background:
+
+```bash
+ffmpeg -ss <seconds> -i <source-video> -frames:v 1 -y .media/generated/freeze-source.png
+npx hyperframes remove-background .media/generated/freeze-source.png \
+  -o .media/generated/freeze-cutout.png --json
+npx hyperframes add freeze-frame-dressing --no-clipboard
+```
+
+Add the transparent result as a direct-root timed media layer and insert the
+printed overlay block above the same time range. The block owns the paper,
+tape, and flash; the host timeline only animates the real cutout:
+
+```html
+<img
+  id="hf-freeze-cutout"
+  class="clip"
+  src="./.media/generated/freeze-cutout.png"
+  alt=""
+  data-start="6"
+  data-duration="3"
+  data-track-index="20"
+/>
+```
+
+```js
+tl.fromTo(
+  "#hf-freeze-cutout",
+  { y: 42, scale: 0.86, rotation: -2 },
+  { y: 0, scale: 1, rotation: 0.4, duration: 0.5, ease: "back.out(1.35)" },
+  freezeAt,
+);
+```
+
+Inspect the matte over both light and dark temporary plates before styling it.
+Reject missing hair/fingers, background halos, a cutout that changes identity,
+overly thick outline, exposed frame edges, or a flash that obscures the reveal.
+If the matte is not acceptable, choose another frame or keep the original media.
+
+## Social Flash / Editorial Reveal
+
+Use this treatment for one meaningful high-energy cut, creator reveal, product
+beat, or before/after handoff. It is not a default transition for every scene.
+Avoid it for calm long-form footage, accessibility-sensitive contexts, already
+clipped highlights, literal UI that must remain readable through the cut, or
+any request for repeated strobing.
+
+Inspect representative frames on both sides of the cut first. Grade each media
+layer for its own subject using the appropriate contract above; the flash is
+not a substitute for correction. For people, a restrained `skin-soft` payload
+is a safe starting point. For literal UI, preserve the pixels and use only the
+authored light/motion layers when they do not obscure required information.
+
+Install the Registry overlay block:
+
+```bash
+npx hyperframes add editorial-flash-overlay --no-clipboard
+```
+
+Insert the printed `data-composition-src` host so the block's midpoint lands
+on the cut. Its own paused timeline drives the finite flash. The host timeline
+may coordinate outgoing and incoming media motion without reaching into the
+block:
+
+```js
+tl.to(
+  "#outgoing-media",
+  {
+    scale: 1.035,
+    "--hf-color-grading-exposure": 0.82,
+    duration: 0.12,
+    ease: "power3.in",
+  },
+  cutAt - 0.16,
+);
+tl.fromTo(
+  "#incoming-media",
+  { scale: 1.1 },
+  { scale: 1, duration: 0.42, ease: "power3.out" },
+  cutAt,
+);
+tl.to(
+  "#incoming-media",
+  {
+    "--hf-color-grading-exposure": 0,
+    "--hf-color-grading-intensity": 0.58,
+    duration: 0.24,
+    ease: "power2.out",
+  },
+  cutAt,
+);
+```
+
+When the shader steps are used, author
+`--hf-color-grading-exposure: 0.72` and
+`--hf-color-grading-intensity: 0` inline on the incoming media so a fresh seek
+has the correct start state. Set the final intensity to the source-approved
+value instead of copying `0.58` blindly. Skip the shader intensity step when
+the incoming source should remain ungraded.
+
+Keep the rise between roughly `0.035` and `0.055` seconds and the recovery
+between `0.24` and `0.38` seconds. Default to one neutral/warm flash event,
+never saturated red, never a looping strobe, and never more than one authored
+flash inside a one-second treatment window. Verify frames immediately before,
+at, and after the cut, then inspect moving playback and a rendered draft. The
+peak must hide the cut; the recovery must reveal a correctly framed source with
+no retained prior canvas, clipped face, or unexpected highlight damage.
diff --git a/.claude/skills/media-use/references/media-treatments.md b/.claude/skills/media-use/references/media-treatments.md
new file mode 100644
index 0000000..38c2fac
--- /dev/null
+++ b/.claude/skills/media-use/references/media-treatments.md
@@ -0,0 +1,206 @@
+# Media treatments
+
+A media treatment is a source-aware plan that composes existing HyperFrames
+color, effect, timeline, and Registry primitives. It is not a second runtime
+schema. Use this file to choose a primary direction. A matching recipe is an
+optional tested seed; bespoke requests may assemble a validated treatment from
+the canonical capability catalog.
+
+## Permission and scope
+
+- An explicit request such as "polish this", "make it look better", or "make it
+  fit the topic" delegates a conservative treatment. Apply it, verify it, and
+  report what changed.
+- During an unsolicited opportunity scan, show or suggest the treatment first.
+- Target meaningful photographic media. Skip text, SVG, logos, icons, UI
+  chrome, and intentionally stylized footage unless the user asks.
+- Realtime grading and effects apply to the entire selected real `<img>` or
+  `<video>`. They do not isolate or track a face, plate, address, or other
+  region. For region-only work, first create a separate cropped/masked media
+  layer or use an external segmentation/tracking tool; never imply that a
+  whole-media Blur or Pixelate performed region isolation.
+- The realtime treatment path is Rec.709/SDR. Do not silently process HDR, HLG,
+  PQ, or camera LOG sources through it.
+
+## Classify the request
+
+Choose the smallest lane that satisfies the request before choosing a recipe
+or assembling a custom treatment:
+
+| User intent                                         | Lane                                       |
+| --------------------------------------------------- | ------------------------------------------ |
+| too dark, flat, too warm, too many shadows          | correction                                 |
+| shape shadows/highlights or selected colors         | wheels, curves, or HSL secondary           |
+| polished, premium, warm, cinematic, fit the topic   | preset or custom treatment                 |
+| retro, print, ASCII, glitch, camcorder              | shader effect or effect-bearing preset     |
+| obscure the whole selected media                    | privacy Blur or Pixelate                   |
+| hide one face, plate, address, or screen region     | separate crop/mask/asset or external tool  |
+| draw attention to media without changing its pixels | framing, motion, or optional overlay       |
+| reveal, focus, depixelate, fade the treatment       | finite seek-safe treatment keyframes       |
+| REC HUD, light leak, flash, freeze-frame cutout     | Registry overlay plus any justified pixels |
+
+The lane identifies the primary reason for the change; it is not a one-feature
+limit. A final treatment may combine correction, a preset, finishing, multiple
+compatible shader effects, finite keyframed values, and optional overlays when
+the inspected media and user intent justify the complete combination. Keep one
+primary intent as the creative anchor so the result remains coherent and
+deterministic.
+
+Do not add a stylized Effect when correction solves the complaint. Do not
+change color when the request is only temporal, and do not install an overlay
+when the selected media alone communicates the result.
+
+Match strength to intent. When the user explicitly names a bold look such as
+VHS, glitch, ASCII, halftone, camcorder, print, or engraving, apply its
+signature effects strongly enough to read unmistakably. The guard against
+unrequested additions does not mean under-delivering an effect the user asked
+for. Correction and polish stay restrained; named stylization must be obvious
+in the after-frame.
+
+### Translate vague feedback conservatively
+
+| User feedback                         | First action                                                                                    | Add only when the frames justify it                             | Never infer                                     |
+| ------------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------- | ----------------------------------------------- |
+| too many shadows and a bit boring     | lift shadows/protect highlights, then compare one restrained source-appropriate preset          | mild contrast or vibrance                                       | retro texture, HUD, or palette effect           |
+| make the product footage feel premium | protect product color and labels, compare Product Polish                                        | restrained vignette on lifestyle footage                        | a cinematic LUT or crushed blacks               |
+| make this reveal cooler               | preserve color and animate one supported effect or treatment value                              | a short owned overlay block                                     | unrelated whole-clip styling                    |
+| make it feel like an old home video   | compare 8mm and VHS language against the source                                                 | finite weave/flicker or justified HUD                           | that every old-video request means VHS          |
+| hide this face                        | explain that realtime effects are whole-media; isolate the region first or use an external tool | whole-media Blur/Pixelate only when the user accepts that scope | face tracking or masking that was not performed |
+| keep the brand colors exact           | leave UI/logo pixels unchanged; use framing and motion                                          | demonstrated exposure-only correction                           | stylized preset, palette, or LUT                |
+
+When more than one lane could fit, generate at most two candidates and choose
+from inspected before/after evidence. Ordinary correction or polish starts with
+one candidate; a second candidate is an escalation, not the default. Do not
+stack effects merely to make the answer look more sophisticated.
+
+## Seed or assemble
+
+Use the table when a tested recipe directly fits. Read only that recipe
+section. Recipes are optional macros, not a closed list of allowed results.
+
+| Intent or source                                         | Recipe heading to read                            |
+| -------------------------------------------------------- | ------------------------------------------------- |
+| Talking head, interview, presenter, people-focused photo | `Natural Portrait`                                |
+| Product footage, lifestyle footage, clean social polish  | `Product Polish`                                  |
+| Screen capture, dashboard, website, app UI               | `UI Fidelity`                                     |
+| Warm memory, restrained nostalgia                        | `Film Memory`                                     |
+| Creator/UGC handheld camera character                    | `Creator Camcorder`                               |
+| Analog tape playback                                     | `VHS Playback`                                    |
+| Small-gauge home-movie character                         | `8mm Home Movie`                                  |
+| Editorial dots or ink print                              | `Editorial Halftone` or `Two-Ink Editorial Print` |
+| Monochrome dot/line screen print                         | `Monochrome Screen Print`                         |
+| Engraved or hand-hatched illustration                    | `Engraved Illustration` or `Crosshatched Sketch`  |
+| Curved scanlined display                                 | `CRT Display`                                     |
+| Glyph-based art                                          | `Procedural ASCII`                                |
+| Realtime palette quantization                            | `Ordered Palette Dither`                          |
+| Exact historical error diffusion                         | `Cached Error Diffusion`                          |
+| Finite warm flare layer                                  | `Organic Light Leak`                              |
+| Held-frame graphic interruption                          | `Freeze-Frame Cutout`                             |
+| Short exposure-flash transition                          | `Social Flash / Editorial Reveal`                 |
+
+Use `rg -n '^## <heading>$' <SKILL_DIR>/references/media-treatment-recipes.md`,
+then read only from that heading to the next `##`. Do not load the entire
+cookbook for one request.
+
+When source intent is unclear, inspect the concise capability overview:
+
+```bash
+hyperframes media-treatment --capabilities --json
+```
+
+It lists the complete surface by family with one-line descriptions. Then load
+only the family, effect, preset, or palette relevant to the inspected source:
+
+```bash
+hyperframes media-treatment --capability <id> --json
+```
+
+The focused result provides legal controls, recommended apply values, render
+cost, palette support, and the exact animation contract when supported. Use
+`--all` only for tooling/tests or a genuinely exhaustive audit. Compose one
+nested payload from these existing parts. Recipes and catalog-built payloads
+use the same renderer and persistence contract.
+
+Treat `renderLane: "multipass"` as a cost signal. Blur, Bloom, and Kuwahara are
+bounded but more expensive than single-pass effects; avoid stacking several of
+them across many simultaneous media elements unless the composition needs it,
+then verify playback and a draft render.
+Cost follows treated pixel area as well as element count. More than two
+simultaneously visible full-frame multipass media layers requires a continuous
+playback check on the target machine; simplify or pre-render the stack if it
+drops frames. Do not impose or claim a universal hard cap from one machine.
+
+## Common workflow
+
+1. Confirm the target is a real `<img>` or `<video>` and inspect source color
+   metadata.
+2. For an image, read it once. For video, capture early/middle/late output as
+   one labeled sheet and read that one image:
+
+   ```bash
+   hyperframes snapshot <project> --frames 3 --no-end --describe false \
+     --output snapshots/treatment-before
+   ```
+
+   Read `snapshots/treatment-before/contact-sheet.jpg`; do not spend separate
+   model turns reading each frame unless the sheet exposes a specific problem.
+   Do not infer semantics from signal statistics alone.
+
+3. Choose one primary lane. Use one matching recipe as a tested seed, or read
+   the overview and one focused capability detail when the request is bespoke.
+   A seed may be changed or combined with compatible catalog controls when the
+   contact sheet justifies it. Do not invent keys, exceed reported ranges, or
+   stack effects without a visual reason. Do not run the generic grade/LUT
+   resolver first; it adds irrelevant candidates and may download an unused
+   LUT. Use `media-treatment --selector "#hero" --analyze --json` only when
+   correction needs measured signal evidence.
+4. Persist pixel settings with `hyperframes media-treatment`; it validates and
+   merges a patch into the existing nested `data-color-grading` contract. Use registered
+   GSAP only for supported animated values and Registry overlay blocks only
+   for authored dressing.
+   ```bash
+   hyperframes media-treatment --selector "<selector>" \
+     --grading '<nested JSON patch>' --apply --json
+   ```
+   A selector that matches several images or videos patches every match, each
+   merged into its own current grading (the JSON reports `count` and each
+   target); run `--clear` first for an identical look, or add
+   `--selector-index` to patch only one.
+   For a temporal reveal, use the focused capability result's `animation`
+   contract. If it is `null`, the capability is static. Author the starting CSS
+   property inline on the real media element and return temporary treatment
+   values to neutral so the finished shot preserves its existing pixels.
+   Prefer that bounded media animation first; if an overlay is justified,
+   install the owned Registry block instead of recreating it with bespoke
+   overlay markup.
+   For correction and ordinary polish, keep those values as editable
+   preset/adjustment JSON; do not generate a LUT for controls the realtime shader
+   already owns.
+   Use the canonical `details`/`effects` fields for vignette, grain, blur,
+   pixelate, and related primitives. Do not duplicate them with CSS filters,
+   SVG turbulence, opacity, or decorative DOM overlays.
+5. When the treatment calls for an overlay, install that named block with
+   `hyperframes add <name> --dir <project> --no-clipboard --json`, inspect its
+   returned `data-composition-src` host, and place it once using the block's
+   timing contract. Check for the installed file and host element
+   ID before insertion; never duplicate an existing overlay block. This is one
+   treatment workflow: do not make the user discover Catalog or separately ask
+   for the recipe's justified overlay.
+6. For ordinary correction/polish, capture one after-sheet with the same three
+   timestamps under `snapshots/treatment-after`, compare it to the before-sheet,
+   and stop when the result is clearly better. Run the normal project check;
+   do not encode a draft solely to prove a static correction.
+7. Escalate only when evidence requires it. Read individual frames to diagnose a
+   specific visual problem. Preview and render moving evidence when judging
+   treatment keyframes, glitch/tape motion, overlays, playback smoothness, LUT
+   timing, or any other temporal behavior. HDR/LOG, privacy, and brand-sensitive
+   work also require the existing explicit caveats and stronger verification.
+   If the treatment is not clearly better, keep the source unchanged.
+8. Report the selected media, primary intent, recipe seed if used, final
+   composed controls, optional overlays, and the frames/render that were
+   actually checked. Do not report visual quality from command success alone.
+
+`media-treatment --analyze` provides deterministic clipping and signal
+evidence for local composition media, not subject recognition or automatic
+taste. It reports HDR/metadata caveats and a bounded primary-correction patch;
+it does not invent wheels, curves, or HSL selections from statistics.
diff --git a/.claude/skills/media-use/references/memory.md b/.claude/skills/media-use/references/memory.md
new file mode 100644
index 0000000..0ff3fcd
--- /dev/null
+++ b/.claude/skills/media-use/references/memory.md
@@ -0,0 +1,37 @@
+# User memory — preferences and recipes
+
+## Preferences — remembered defaults
+
+The lightweight tier of user memory: confirmed brief answers (destination, aspect, language, flow, storyboard, voice, style preset) persisted on the same two-tier split as assets — project `.media/preferences.json` (committed, the team inherits it) and personal `~/.media/preferences.json`. A value earns the personal tier by being confirmed in **two different projects**, so a one-off choice never pollutes the global defaults.
+
+```bash
+node <SKILL_DIR>/scripts/prefs.mjs get --hyperframes . --json      # merged view (project overrides user)
+node <SKILL_DIR>/scripts/prefs.mjs record --hyperframes . --key destination --value x-feed
+node <SKILL_DIR>/scripts/prefs.mjs record --hyperframes . --key style_preset --value pin-and-paper --workflow explainer
+```
+
+Only what the user actually confirmed gets recorded — never an inferred or defaulted value. A remembered value becomes the recommended default, shown with where it came from; it never skips a question.
+
+## Recipes — frozen video bundles
+
+The heavyweight tier of user memory: one approved run frozen as a named, versioned bundle — `frame.md`, the storyboard skeleton (structure kept, content blanked to per-frame fill-ins), the brief skeleton (from `BRIEF.md` when the project has one — reusable frontmatter kept, run-shape and prose blanked), and the confirmed brief values. Same two tiers: project `.media/recipes/<name>/` (committed) and `~/.media/recipes/<name>/` (a freeze is already a confirmed bundle, so it promotes immediately — no two-project rule). Re-freezing a name bumps `version` and archives the old folder as `<name>@v<N>`.
+
+```bash
+node <SKILL_DIR>/scripts/recipe.mjs freeze --hyperframes . --name weekly-promo   # workflow read from BRIEF.md (--workflow only for briefless projects)
+node <SKILL_DIR>/scripts/recipe.mjs list --hyperframes . --workflow explainer
+node <SKILL_DIR>/scripts/recipe.mjs use --hyperframes . --name weekly-promo   # also: resolve.mjs --type recipe --entity weekly-promo
+```
+
+Offer the freeze once, after the final approval; before the first question about a new video, check `recipe.mjs list` for a match. Adopting a recipe fills the brief, the design spec, and the storyboard skeleton — and unlike preferences it may skip the questions it answers: the bundle was approved as a whole, and adoption itself is the question.
+
+## Files
+
+- `.media/manifest.jsonl`: machine SSOT, one JSON record per line. Records are keyed by path and only appended, so
+  the last record for a path is the file's record; a file moved or replaced by hand keeps (or loses) its record by path.
+- `.media/index.md`: agent-readable table (id, type, dur, dims, path, description)
+- `.media/preferences.json`: the project's remembered defaults (committed)
+- `~/.media/`: global cross-project reuse cache (content-addressed, SHA-256)
+- `~/.media/preferences.json`: personal remembered defaults (promoted after two projects)
+- `.media/recipes/<name>/`: frozen video bundles — recipe.json + frame.md + storyboard skeleton (committed)
+- `~/.media/recipes/<name>/`: personal recipe tier (promoted on freeze)
+- `~/.media/misses.jsonl`: local-only resolve misses, including intent text for `--stats`
diff --git a/.claude/skills/media-use/references/meta.md b/.claude/skills/media-use/references/meta.md
new file mode 100644
index 0000000..8ad2f11
--- /dev/null
+++ b/.claude/skills/media-use/references/meta.md
@@ -0,0 +1,61 @@
+# Ownership matrix, usage stats, telemetry, privacy
+
+Maintainer-facing reference. Nothing here changes how you resolve or operate on media.
+
+## What it owns (the gaps HyperFrames leaves)
+
+HyperFrames owns media _playback_; media-use owns everything else. Each row is enforced by `packages/cli/src/media-use/lib/coverage.test.mjs` so the claim can't rot.
+
+| HyperFrames gap                            | media-use owns it via                                                                                                                                                                                                                                    |
+| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Audio-only, no image/icon                  | `resolve --type image\|icon` (heygen asset search)                                                                                                                                                                                                       |
+| No third-party brand logos                 | `resolve --type logo` (theSVG → GitHub org avatar → domain favicon)                                                                                                                                                                                      |
+| No voice / audio generation                | `resolve --type voice` (HeyGen TTS free-usage path; optional local Kokoro) + the audio engine (`audio/scripts/audio.mjs`)                                                                                                                                |
+| Scattered/duplicated audio engine          | one consolidated engine under `audio/` (hyperframes-media retired)                                                                                                                                                                                       |
+| No agent media-ops (cut/reframe/transform) | `references/operations.md` + `resolve --from` to register outputs                                                                                                                                                                                        |
+| No transcript-driven cutting               | `scripts/transcript-cut.mjs` compiles word-timestamp edits into cut lists                                                                                                                                                                                |
+| No auto-duck / publish loudness            | `scripts/audio-duck.mjs` + `references/operations.md` loudnorm/sidechain recipes                                                                                                                                                                         |
+| No cross-project memory                    | global content-addressed cache + auto-promote (`~/.media`)                                                                                                                                                                                               |
+| Grade recipes and LUT freezing             | `resolve --type grade` emits a paste-ready recipe and `resolve --type lut` freezes validated `.cube` files; direct element analysis/authoring lives in `hyperframes media-treatment`                                                                     |
+| No image generation                        | `resolve --type image` — RAM-graded local mflux (FLUX), codex `image_gen` upsell                                                                                                                                                                         |
+| No video generation                        | `resolve --type video` — HeyGen avatar video first (free-usage path, sign-in nudge on auth failure), local LTX fallback (`videogen` ladder); image-to-video, photo-avatar, dub/translate remain manual `heygen` CLI recipes (`references/operations.md`) |
+| Weak local-model defaults                  | HeyGen free-usage path via the `heygen` CLI; local open-source tools only as opt-in alternatives                                                                                                                                                         |
+
+## Usage stats
+
+Use `resolve --stats` for a local, shareable report over the current project's `.media/` manifest, the global `~/.media/` cache, and local resolve misses. Human output is compact; add `--json` for a single machine-readable object, and `--days N` to window timestamped records.
+
+```bash
+npx hyperframes media-use resolve --stats --project . --days 7
+# media-use stats
+# total resolves: 12
+# misses: 2
+# hit rate: 86%
+```
+
+## Telemetry
+
+`resolve` and the edit tools (transcribe / transcript-cut / audio-duck) send an
+anonymous usage event to PostHog (`scripts/lib/telemetry.mjs`), so we can see
+which capabilities are actually used. It records only the media TYPE, the
+resolution SOURCE, and the winning PROVIDER: never the intent text, file names,
+or paths, and `$ip:null` so no IP is stored. Best-effort and non-blocking (a
+resolve never waits on or fails from telemetry).
+
+Opt out with `DO_NOT_TRACK=1` or `HYPERFRAMES_NO_TELEMETRY=1` (also off in CI and
+dev). Same public PostHog project key and opt-outs as the `hyperframes` CLI.
+
+HeyGen request tagging: every generating `heygen` call (TTS, avatar video, catalog
+search) carries the allowlisted `X-HeyGen-Client-Source: media-use` header, sourced
+from one shared constant (`HEYGEN_CLIENT_SOURCE_ARGV` in `packages/cli/src/media-use/lib/heygen-cli.mjs`)
+so a future call site can't silently ship untagged. Read-only discovery calls
+(`voice list`, `avatar list`) are intentionally left untagged.
+
+## Privacy
+
+media-use uses the same shared install id as the `hyperframes` CLI/studio
+(`~/.hyperframes/config.json`). When you are signed in to HeyGen, usage is
+linked to your account email, or username when email is unavailable, matching
+the CLI behavior. The events stay coarse: media type, source, provider, and
+small counts only; intent text and paths stay local. Disable telemetry with
+`HYPERFRAMES_NO_TELEMETRY=1` or `DO_NOT_TRACK=1`.
diff --git a/.claude/skills/media-use/references/mixing.md b/.claude/skills/media-use/references/mixing.md
new file mode 100644
index 0000000..b456246
--- /dev/null
+++ b/.claude/skills/media-use/references/mixing.md
@@ -0,0 +1,71 @@
+# Mixing in HyperFrames
+
+Preview and render run the same Web Audio graph, so what plays while scrubbing is what renders. Everything lives in attributes on the `<audio>` or `<video>` element.
+
+## Level and fades
+
+| Attribute                       | Meaning                                                                                   |
+| ------------------------------- | ----------------------------------------------------------------------------------------- |
+| `data-volume`                   | Track gain, 1 = 0 dB                                                                      |
+| `data-fade-in`, `data-fade-out` | Edge fades in seconds                                                                     |
+| `data-playback-rate`            | Constant speed, 0.1–10, pitch preserved; give a video and its paired audio the same value |
+
+A crossfade is two clips on different tracks that overlap, each with a fade.
+
+## `data-automation`: envelopes
+
+```html
+<audio
+  id="music"
+  data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":1},{"t":2.5,"v":0.35}]}]}'
+  …
+></audio>
+```
+
+- `target` is `volume`, `rate` (a speed ramp, 0.1–10, overrides `data-playback-rate`) or `fx.<nodeId>.<param>`.
+- `t` is seconds from the start of the clip, not of the composition. `v` is in the parameter's unit: 0..1 for volume, dB for a gain, Hz for a frequency.
+- A lane holds its first value back to the clip's start and its last value to its end, so a bed that starts before the voice needs an explicit full-level point at `t: 0`.
+- `curve` (-1..1) bends the segment leaving a point. 512 points per lane at most.
+- Don't also tween `volume` with GSAP on a track that has a volume lane or a `data-volume`; lint flags both.
+
+## `data-fx-chain`: effects
+
+```json
+{
+  "version": 1,
+  "nodes": [
+    { "type": "highpass", "id": "n1", "label": "Remove rumble", "params": { "frequency": 80 } },
+    {
+      "type": "peaking",
+      "id": "n2",
+      "label": "Clarity",
+      "params": { "frequency": 3000, "gain": 2.5, "q": 1 }
+    },
+    { "type": "limiter", "id": "n3", "params": { "limit": -1 } }
+  ]
+}
+```
+
+- Write the attribute double-quoted with the JSON's quotes as `&quot;`.
+- Order is signal order. `id` is what automation targets (`fx.n2.gain`); give every node one, and a `label` when it does a named job. `enabled: false` bypasses a node.
+- Effects: `gain`, `highpass`, `lowpass`, `peaking`, `lowshelf`, `highshelf`, `compressor`, `limiter`, `gate`, `saturate`, `delay`, `reverb`, `chorus`, `phaser`, `bitcrush`.
+- `compressor`, `limiter`, `gate` and `bitcrush` can't be automated; a lane on them does nothing. Automate a `gain` before them instead.
+- Never set `fromCarve` by hand.
+- `reverb` and `delay` make the rendered track longer than its source; that is expected.
+
+| It sounds like              | Reach for                                   |
+| --------------------------- | ------------------------------------------- |
+| Hum, rumble, handling noise | `highpass` at 80 Hz                         |
+| Boomy, too close            | `peaking` 200 Hz, −4 dB                     |
+| Muffled                     | `peaking` 250 Hz, −3 dB                     |
+| Words hard to make out      | `peaking` 3 kHz, +2.5 dB, or duck the music |
+| Harsh                       | `peaking` 3.2 kHz, −3 dB                    |
+| Peaks clipping              | `limiter` last in the chain                 |
+
+## Music under a voice
+
+Duck the bed with a `volume` lane on the music: full level before the voice, down to about 0.3–0.4 while anyone speaks (word timings from `npx hyperframes transcribe` or the voiceover give the times), back up after. Then carve the bed, which dips only the bands the voice uses: `node <SKILL_DIR>/audio/scripts/carve.mjs --comp index.html` (needs `ffmpeg` and `@hyperframes/core` in the project; `--dry-run` to see the plan). It is the same analysis as Studio's carve panel. It reads only double-quoted attributes (JSON quotes as `&quot;`), so write the bed's chain and lanes that way or it overwrites them. Never put a carve on a voice track.
+
+## Group buses
+
+Give clips the same `data-audio-group="<id>"` to treat them as one group. An `<hf-audio-group id="<id>">` element with that id makes the group a submix bus with one `data-fx-chain`, one volume and one automation clock for every member. Keep one role per group: `voiceover`, `music`, `sfx`.
diff --git a/.claude/skills/media-use/references/operations.md b/.claude/skills/media-use/references/operations.md
new file mode 100644
index 0000000..8c461e8
--- /dev/null
+++ b/.claude/skills/media-use/references/operations.md
@@ -0,0 +1,329 @@
+# Media operations: agent guidance
+
+media-use resolves and remembers assets. For **operating** on them: cutting,
+reframing, stitching, transforming, it does not wrap every action as a bespoke
+command. Instead it points you at the right local tool (decision OP1). Run the
+tool, then register the output with `resolve --from <output> --type <type>` so the
+result lands in the ledger and the global cache like any other asset.
+
+All tools below are local and free. ffmpeg is assumed present (it backs the
+engine already).
+
+## Cut / trim: keep a slice
+
+```bash
+ffmpeg -i in.mp4 -ss 00:00:12 -to 00:00:20 -c copy out.mp4   # 0:12–0:20, no re-encode
+```
+
+In-composition trimming usually needs **no new file**: a clip plays a sub-window
+via `data-media-start` + `data-duration` (see `/hyperframes` → `references/format.md`). Only cut a
+physical file when exporting/assembling outside the composition.
+
+## Reframe / crop: change aspect ratio
+
+```bash
+# 16:9 -> 9:16, crop centered
+ffmpeg -i in.mp4 -vf "crop=ih*9/16:ih,scale=1080:1920" out.mp4
+```
+
+For a non-destructive crop, set a `clip-path` on the element in the composition
+itself (render-time, source file untouched) instead of re-encoding with ffmpeg.
+
+## Montage / stitch: join clips
+
+```bash
+printf "file '%s'\n" a.mp4 b.mp4 c.mp4 > list.txt
+ffmpeg -f concat -safe 0 -i list.txt -c copy out.mp4
+```
+
+## Silence-cut / highlight: trim dead air, grab the best moment
+
+```bash
+auto-editor in.mp4 --edit audio:threshold=4% -o tight.mp4   # pip install auto-editor
+scenedetect -i in.mp4 detect-adaptive list-scenes           # pip install scenedetect
+```
+
+## Transforms with a quality choice (process)
+
+These have a local option AND a higher-quality HeyGen-CLI option. Run the local
+one for free/offline; use the HeyGen CLI when quality matters. Showing the user
+a **side-by-side** (local vs HeyGen) is the honest way to let them choose.
+
+| Op                 | Local (free)                                       | HeyGen CLI (quality)        |
+| ------------------ | -------------------------------------------------- | --------------------------- |
+| Background removal | `hyperframes remove-background in.png` (u2net)     | `heygen background-removal` |
+| Upscale            | `realesrgan-ncnn-vulkan -i in.png -o out.png -s 4` | n/a                         |
+| Lipsync (dub)      | n/a                                                | `heygen lipsync`            |
+| Translate          | n/a                                                | `heygen video-translate`    |
+
+After any op: `resolve --from out.ext --type <type>` to register the derived
+asset (it records provenance and auto-promotes to the global cache).
+
+> ponytail: media-use doesn't re-wrap ffmpeg/heygen here, that's deliberate
+> (OP1). The value it adds is the ledger + global reuse on the _output_, via
+> `--from`. Add a thin `process` verb only if agents repeatedly fumble these
+> recipes.
+
+## Exact error-diffusion dither
+
+Use the local processor when the requested look specifically calls for
+Floyd-Steinberg, Atkinson/Macintosh, Jarvis-Judice-Ninke, Stucki, Burkes, or a
+Sierra variant. These are sequential error-diffusion algorithms, not the
+realtime Bayer `effects.dither` shader.
+
+```bash
+node <SKILL_DIR>/scripts/dither.mjs \
+  --input source.mp4 \
+  --out source.atkinson.mp4 \
+  --algorithm atkinson \
+  --palette '#0f380f,#306230,#8bac0f,#9bbc0f' \
+  --point-size 3
+
+npx hyperframes media-use resolve \
+  --from source.atkinson.mp4 --type video --project .
+```
+
+Available algorithms: `floyd-steinberg`, `atkinson`,
+`jarvis-judice-ninke`, `stucki`, `burkes`, `sierra`, `sierra-lite`, and
+`two-row-sierra`. The default is balanced Floyd-Steinberg with a black/white
+palette. Palettes contain 2-6 `#rrggbb` colors in authored dark-to-light order;
+reversing the order intentionally inverts the mapping. `--point-size` controls
+1-20px blocks; `--brightness` and `--contrast` accept 0.5-2; `--detail` accepts
+0.1-1.
+
+The processor supports ordinary SDR images and MP4 video, preserves video
+audio, and emits BT.709 MP4. It rejects tagged PQ/HLG input rather than silently
+tone-mapping it. To animate the transformation, keep the original and processed
+files as two real media layers and use the seek-safe GSAP timeline to reveal or
+crossfade between them. Use the realtime Bayer shader instead when the dither
+amount itself must animate continuously.
+
+## Transcription (default: Parakeet, better than whisper.cpp)
+
+`transcribe.mjs` is the default local transcription path. It runs **NVIDIA
+Parakeet-TDT via parakeet-mlx**, which beats whisper.cpp on the Open ASR
+Leaderboard (avg WER ~6.05% vs 7.44%; on NOISY audio 4.73% vs 5.96%, where
+whisper-large-v3 hallucinated to 308% WER on meetings) and is 5-10x faster.
+It emits `{ text, words:[{text,start,end}] }` with word timestamps (merged from
+Parakeet's sub-word tokens), feeding transcript-cut, captions, and the audio
+engine directly.
+
+```bash
+# install once: uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx
+node <SKILL_DIR>/scripts/transcribe.mjs --input talk.mp4 --out talk.transcribe.json
+
+# the hyperframes CLI runs Parakeet on macOS, Linux and Windows once it is installed:
+npx hyperframes models install parakeet                 # once, ~640 MB, ask the user first
+npx hyperframes transcribe talk.mp4 --engine parakeet   # or --engine auto (default)
+```
+
+VERIFIED on 24GB: accurate, ~3s (cached) for 8s audio. Parakeet covers 25
+European languages, English included. For other languages, or when parakeet-mlx is not
+installed, transcribe.mjs falls back to `hyperframes transcribe`, which uses the
+CLI's Parakeet when `models install parakeet` has run and whisper.cpp (99
+languages) otherwise. `--engine parakeet|whisper` forces one, except that a
+`--language` other than English runs whisper whenever it is installed, since
+Parakeet detects the language itself. (Cohere
+Transcribe tops the leaderboard on paper but its mlx-audio quants produced
+garbage and ran 40-70x slower on a Mac in testing, so it is not wired in.)
+
+## Text-based editing (transcript cut)
+
+`transcript-cut.mjs` is a compiler, not a wrapper: it turns word timestamps and
+agent cut decisions into exact kept segments. It is provided even though the rest
+of this file is guidance-only.
+
+```bash
+node <SKILL_DIR>/scripts/transcript-cut.mjs \
+  --input talk.mp4 \
+  --transcript talk.transcribe.json \
+  --remove "12.41-15.02,88.3-91.7" \
+  --remove-fillers "um,uh,like" \
+  --cut-silence 0.8 \
+  --out talk.cut.mp4
+
+resolve --from talk.cut.mp4 --type video
+```
+
+Use `--plan` first when you want to inspect the kept segment JSON before encoding.
+
+## Ducking (declare in-composition / bake for export)
+
+B1, declare ducking in the composition. `audio-duck.mjs` emits a volume lane
+as a `data-automation` attribute. Add it to the background `<audio>` element;
+the source file stays untouched. Lane times are clip-local, so pass
+`--composition` to let the script subtract the element's `data-start`.
+
+```bash
+node <SKILL_DIR>/scripts/audio-duck.mjs \
+  --meta audio_meta.json \
+  --target "#bgm" \
+  --composition index.html
+```
+
+```html
+<!-- auto-duck: #bgm under narration; add to its <audio> element -->
+data-automation='{"version":1,"lanes":[{"target":"volume","points":[{"t":0,"v":0.6},{"t":3.42,"v":0.6},{"t":3.57,"v":0.15},{"t":9.87,"v":0.15},{"t":10.27,"v":0.6}]}]}'
+```
+
+B2, bake ducking only for exported or standalone files.
+
+```bash
+ffmpeg -i bgm.mp3 -i voice.wav \
+  -filter_complex "[0][1]sidechaincompress=threshold=0.03:ratio=8:attack=200:release=400[ducked]" \
+  -map "[ducked]" bgm.ducked.wav
+```
+
+Declare inside compositions. Bake only for assets leaving the hyperframes
+pipeline.
+
+## Publish loudness
+
+Two-pass `loudnorm` measures first, then applies the measured values with the
+target LUFS baked in.
+
+Socials target, -14 LUFS:
+
+```bash
+ffmpeg -i mix.wav \
+  -af loudnorm=I=-14:TP=-1.5:LRA=11:print_format=json \
+  -f null -
+
+ffmpeg -i mix.wav \
+  -af loudnorm=I=-14:TP=-1.5:LRA=11:measured_I=<input_i>:measured_TP=<input_tp>:measured_LRA=<input_lra>:measured_thresh=<input_thresh>:offset=<target_offset>:linear=true:print_format=summary \
+  mix.social.wav
+```
+
+Podcast target, -16 LUFS:
+
+```bash
+ffmpeg -i mix.wav \
+  -af loudnorm=I=-16:TP=-1.5:LRA=11:print_format=json \
+  -f null -
+
+ffmpeg -i mix.wav \
+  -af loudnorm=I=-16:TP=-1.5:LRA=11:measured_I=<input_i>:measured_TP=<input_tp>:measured_LRA=<input_lra>:measured_thresh=<input_thresh>:offset=<target_offset>:linear=true:print_format=summary \
+  mix.podcast.wav
+```
+
+## Generate: images (local first, cloud upsell)
+
+`resolve --type image` retrieves from the HeyGen catalog first; on a miss it
+GENERATES. Two paths, best-for-the-machine picked automatically:
+
+1. **Local (default, free, private): mflux** (FLUX-on-MLX). `resolve` spec-checks
+   AVAILABLE RAM and runs the best FLUX-class model that fits, using the
+   CLI-bundled `imagegen` ladder (its modules are not shipped in the standalone
+   skill). The RAM ladder:
+
+   | Tier   | Model                | Needs (available RAM) | Notes                               |
+   | ------ | -------------------- | --------------------- | ----------------------------------- |
+   | medium | FLUX.1 schnell int4  | ~8GB (`--low-ram`)    | ~20s/512px on 24GB. VERIFIED. Fast. |
+   | large  | FLUX.2 Klein 4B int4 | ~32GB                 | higher quality, full-resident       |
+   | xlarge | Qwen-Image           | ~64GB                 | top quality, 64GB+ Macs only        |
+
+   Gotchas baked into the table: the official FLUX repos are HF-gated, so it
+   points at non-gated community 4-bit re-uploads; and `--low-ram` is MANDATORY
+   at the medium tier (without it a 768x512 run swap-thrashed to 90 minutes on
+   24GB; with it, 20 seconds).
+
+2. **Cloud upsell (better quality): the `codex` CLI** `image_gen` tool, on the
+   user's ChatGPT subscription (codex owns auth, no key here, no per-call
+   charge). It is the automatic fallback when no local model fits AND the
+   explicit "make it better" choice on any machine. Users who just want codex
+   can ask for it directly. Verified: prompt -> raster -> frozen + ledgered.
+
+`--local-only` keeps mflux (once cached) and skips codex (network).
+
+## Generate: video (`resolve --type video`, HeyGen avatar first)
+
+`resolve --type video "<intent>"` is the default path. It generates a
+script-driven HeyGen avatar video first (the free-usage allowance — OAuth
+sessions ride the web-plan free avatar-video quota where eligible, API keys
+follow normal API billing), falling back to local generative LTX only when
+HeyGen is unavailable, uncredentialed, or `--local-only` is passed. The two
+are non-substitutable outputs (a real presenter vs. a generic generative
+clip), so treat the fallback as "HeyGen wasn't reachable," not "upgrade the
+quality":
+
+- **HeyGen avatar video (default, free for new API users):**
+  The CLI-bundled provider shells the
+  `heygen` CLI — never the raw API — auto-picking a public avatar and a
+  starfish voice (override with `--avatar-id`/`--voice-id`, threaded through
+  as `ctx.avatarId`/`ctx.voiceId`). If the CLI reports `not_authenticated`,
+  the provider prints an onboarding recommendation (avatar video is free for
+  new API users — sign in) to stderr and falls through to LTX instead of
+  hard-failing.
+- **Local fallback: LTX 2.3 on MLX** via `dgrauet/ltx-2-mlx`, the `videogen`
+  ladder bundled in the HyperFrames CLI. Generative clips
+  (t2v), spec-gated to RAM. Verified on 24GB: 512x320 x 33f with audio.
+
+Every generating `heygen` call from media-use — TTS, avatar video, and
+catalog search — sends the allowlisted `X-HeyGen-Client-Source: media-use`
+header (persistent flag, works on every subcommand) via the shared
+CLI-internal `HEYGEN_CLIENT_SOURCE_ARGV` constant, so usage
+tags correctly in billing/resource meta and shows up in the API dashboards.
+Read-only discovery (`avatar list`, `voice list`) doesn't need it.
+
+For structured bodies `resolve --type video` doesn't expose yet (a specific
+`avatar_id`/`voice_id` combination beyond the ctx overrides, or a
+pre-recorded `audio_url` instead of a script), the raw `heygen video create`
+recipe below remains the escape hatch:
+
+```bash
+# discover an avatar + a starfish voice, then create + wait
+heygen avatar list --ownership public --limit 5
+heygen voice list --engine starfish --limit 5
+heygen video create --headers "X-HeyGen-Client-Source: media-use" --wait -d '{
+  "type": "avatar",
+  "avatar_id": "<avatar-id>",
+  "script": "Your narration here.",
+  "voice_id": "<voice-id>"
+}'
+```
+
+Avatar videos are deterministic + script-driven (lip-sync from a script or a
+pre-recorded `audio_url`), distinct from the generative LTX clips. After a
+manual recipe renders, `resolve --from <downloaded.mp4> --type video` to
+ledger it (not needed when generating via `resolve --type video` directly —
+that already ledgers the result).
+
+### Image-to-video (animate any still into a talking clip)
+
+Not wired into `resolve --type video` (deferred — the `avatar` type covers
+the default script-driven case). `heygen video create` takes the raw
+`POST /v3/videos` body, so switching `type`
+from `avatar` to `image` animates **any image of a person** into a lip-synced
+talking video, with no avatar/photo-avatar creation step first. Point `image` at a
+public URL or an uploaded `asset_id`, and drive speech with a `script`+`voice_id`
+or a pre-recorded `audio_url`:
+
+```bash
+heygen video create --headers "X-HeyGen-Client-Source: media-use" --wait -d '{
+  "type": "image",
+  "image": { "type": "url", "url": "https://example.com/person.jpg" },
+  "script": "Your narration here.",
+  "voice_id": "<voice-id>"
+}'
+```
+
+Common optional fields: `title`, `resolution` (`4k`/`1080p`/`720p`),
+`aspect_ratio`, `remove_background`, `background`, `voice_settings`,
+`motion_prompt` + `expressiveness` (photo-avatar animation), and
+`callback_url`/`callback_id` for webhooks. Don't hardcode these from memory: the
+CLI self-documents the full, current body with
+`heygen video create --request-schema` (a discriminated union keyed on `type`),
+so read the schema rather than trusting a stale field list. For a still you'll
+reuse across many scripts, create a reusable **Photo Avatar** once instead
+(`heygen avatar create`). Ledger the result with
+`resolve --from <downloaded.mp4> --type video`. Docs:
+<https://developers.heygen.com/image-to-video>.
+
+## HEVC / H.265 sources
+
+HEVC/H.265 sources need no conversion for **render** (FFmpeg pre-decodes all
+input video) or for **preview** (auto-proxy transcodes and caches an H.264
+copy on first use, disable with `--no-proxy` or `media.autoProxy: false` in
+hyperframes.json). A manual H.264 proxy via `ffmpeg -i in.mp4 -c:v libx264
+-crf 18 proxy.mp4`, registered with `resolve --from`, remains available for
+edge cases (e.g. auto-proxy disabled, or ffmpeg unavailable at preview time).
diff --git a/.claude/skills/media-use/references/resolve.md b/.claude/skills/media-use/references/resolve.md
new file mode 100644
index 0000000..5edcd38
--- /dev/null
+++ b/.claude/skills/media-use/references/resolve.md
@@ -0,0 +1,150 @@
+# Resolve — command, flags, reuse, adopt, inventory
+
+```bash
+npx hyperframes media-use resolve --type <type> --intent "<description>" --project <dir>
+```
+
+Returns one line: `resolved <id> → <path> (<type>, <metadata>)`
+
+## Types
+
+| Type    | What it finds                    | Provider / cascade                                           |
+| ------- | -------------------------------- | ------------------------------------------------------------ |
+| `bgm`   | Background music                 | HeyGen audio catalog (10k+ tracks)                           |
+| `sfx`   | Sound effects                    | Openverse (CC0 / CC BY), then the bundled 21-file library    |
+| `image` | Photos, backgrounds              | HeyGen asset search (75k+ vectors)                           |
+| `icon`  | Icons, symbols                   | HeyGen asset search (type=icon)                              |
+| `logo`  | Official brand marks             | theSVG → GitHub org avatar → domain favicon                  |
+| `voice` | TTS voiceover                    | HeyGen TTS free-usage path; optional local Kokoro            |
+| `grade` | HyperFrames color-grading blocks | Core preset → look index params/CDN LUT → deterministic cube |
+| `lut`   | Reusable `.cube` LUT files       | Look index params/CDN LUT → deterministic cube               |
+
+## Examples
+
+```bash
+# Background music
+npx hyperframes media-use resolve --type bgm --intent "upbeat tech launch" --project .
+# → resolved bgm_001 → .media/audio/bgm/bgm_001.mp3 (bgm, 25s)
+
+# Sound effect
+npx hyperframes media-use resolve --type sfx --intent "whoosh" --project .
+# → resolved sfx_001 → .media/audio/sfx/sfx_001.mp3 (sfx, 0.57s)
+
+# Image
+npx hyperframes media-use resolve --type image --intent "gradient tech background" --project .
+# → resolved image_001 → .media/images/image_001.jpg (image)
+
+# Icon
+npx hyperframes media-use resolve --type icon --intent "rocket" --project .
+# → resolved icon_001 → .media/images/icon_001.png (icon, transparent)
+
+# Brand logo (official mark — never redrawn by hand)
+npx hyperframes media-use resolve --type logo --entity linkedin --intent "LinkedIn logo" --project .
+# → resolved logo_001 → .media/images/logo_001.svg (logo, official mark)
+
+# Color grade block
+npx hyperframes media-use resolve --type grade --intent "warm daylight" --project . --json
+# → {"ok":true,"preset":"warm-daylight","grading":{"preset":"warm-daylight","intensity":1},...}
+
+# LUT file
+npx hyperframes media-use resolve --type lut --intent "teal orange blockbuster" --project .
+# → resolved lut_001 → .media/luts/lut_001.cube (lut)
+```
+
+## Flags
+
+| Flag            | Description                                                                          |
+| --------------- | ------------------------------------------------------------------------------------ |
+| `--type, -t`    | Media type: bgm, sfx, image, icon, logo, voice, grade, lut                           |
+| `--intent, -i`  | What you need (natural language)                                                     |
+| `--entity, -e`  | Entity name for cache matching (optional)                                            |
+| `--project, -p` | Project directory (default: .)                                                       |
+| `--candidates`  | List reusable assets (project + global cache) for `--type`; no download, no mutation |
+| `--reuse <sha>` | Import a specific global-cache asset (by content sha/prefix, from `--candidates`)    |
+| `--from`        | Freeze a local file or direct public URL (ingest)                                    |
+| `--for`         | Analyze a local image/video and add measured adjust suggestions (`grade` only)       |
+| `--local-only`  | Offline: skip every network provider (cache + local only)                            |
+| `--provider`    | Force one generator (e.g. `codex`, `mflux`, `kokoro`, `heygen`)                      |
+| `--adopt`       | Bulk-import existing assets/ into manifest                                           |
+| `--doctor`      | Check local CLI dependencies; no manifest changes                                    |
+| `--stats`       | Print local usage stats from `.media/` and `~/.media`; no manifest changes           |
+| `--days N`      | Limit `--stats` to timestamped records/misses from the last N days                   |
+| `--json`        | Output JSON instead of one-line result                                               |
+
+## Reuse before you resolve
+
+Before resolving bgm/sfx/image/icon/logo/grade/lut, **check what already exists and reuse it when it fits.** media-use does not semantically match for you — you are the judge. It surfaces candidates; you decide.
+
+```bash
+npx hyperframes media-use resolve --type bgm --intent "upbeat tech launch" --candidates --project .
+#   [project] upbeat tech launch (25s, heygen.audio.sounds)
+#           .media/audio/bgm/bgm_001.wav
+#   [global]  energetic tech intro (22s, heygen.audio.sounds)
+#           --reuse 06e052c075fd2b80
+```
+
+Read the list and judge semantic fit yourself — "upbeat tech launch" ≈ "energetic tech intro" is a call only you can make from the descriptions. Then:
+
+- **A project candidate fits** → just reference its path in your composition. Nothing else to run.
+- **A global candidate fits** → `resolve --type bgm --reuse <sha>` copies it into this project (self-contained render) and records it.
+- **Nothing fits** → resolve fresh (`--type ... --intent ...`).
+
+**Trust guardrail — when unsure, resolve fresh.** A redundant download is cheap; shipping the wrong asset is not. Judge fit from description + prompt + type + duration/dims. For **brand/entity** assets, reuse a _global_ candidate only when the entity matches exactly — the global cache aggregates every project you have worked on, so a `--candidates` list can surface another client's brand mark and its prompt text. Never reuse a cross-project brand asset on a loose match.
+
+The deterministic floor still runs automatically: an identical (case/whitespace-insensitive) repeat auto-reuses with no `--candidates` step. `--candidates` is only for the semantic layer above that floor — and a fuzzy match is **never** auto-applied; reuse is always your explicit call. On a resolve that misses the floor and is about to fetch, media-use prints a one-line stderr hint when similar cached assets exist, pointing you back here.
+
+## How it works
+
+`resolve` runs an automatic floor, then falls through to fetching:
+
+1. Check project `.media/manifest.jsonl` for a prompt match (case- and whitespace-insensitive) — auto-reuse
+2. Scan existing `assets/` directory for unregistered files that share a word with the need
+3. Check global cache `~/.media/` for a reusable asset matched on the same normalized prompt — auto-reuse
+4. Search via provider (HeyGen audio catalog, HeyGen asset search), or resolve color locally
+5. Freeze file to `.media/<type>/`, register in manifest, regenerate `index.md`, auto-promote to `~/.media/`
+
+Steps 1 and 3 are the **deterministic floor**: they only auto-reuse an exact-normalized match, never a fuzzy one. Semantic reuse ("close enough") is the agent's explicit call via [Reuse before you resolve](#reuse-before-you-resolve) — it never happens automatically. The agent gets back **one line**; candidates, scores, provenance stay on disk.
+
+## Stamping provenance when mounting a resolved video
+
+`resolve` never writes composition HTML itself — mounting a `<video>` element
+into a composition is always the agent's own edit. When the mounted video's
+manifest record has `provenance.provider === "heygen.video"` (check
+`.media/manifest.jsonl` or the one-line resolve output for the provider name),
+add `data-media-source="heygen"` to that `<video>` tag. Leave the attribute off
+entirely for every other provider (`ltx.local`, an adopted/local file, etc.) —
+this is not a general provider taxonomy, just the one signal render telemetry
+tracks today.
+
+## Adopt existing projects
+
+Most HyperFrames projects already have assets in `assets/`. media-use adopts them:
+
+```bash
+npx hyperframes media-use resolve --adopt --project .
+# → adopted 9 assets from assets/
+#   bgm_001 → assets/bgm/mango-fizz.mp3 (bgm, 146.6s)
+#   image_001 → assets/images/avatar.jpg (image, 400×400)
+```
+
+`ffprobe` extracts real duration and dimensions. During resolve, unregistered files in `assets/` matching the intent are adopted on the fly.
+
+## Reading the inventory
+
+After resolve or adopt, read `.media/index.md` for the full inventory:
+
+```
+# .media · 4 assets
+
+id         type   dur   dims       path                          description
+bgm_001    bgm    25s   -          .media/audio/bgm/bgm_001.mp3  upbeat tech launch
+sfx_001    sfx    0.6s  -          .media/audio/sfx/sfx_001.mp3  whoosh
+image_001  image  -     1920×1080  .media/images/image_001.jpg   gradient tech background
+icon_001   icon   -     200×200    .media/images/icon_001.png    rocket
+```
+
+## Cross-project reuse
+
+Assets are cached automatically on resolve. Every resolved/ingested asset is auto-promoted to the global cache at `~/.media/`, so subsequent resolves for the same (or near-identical) prompt, in any project, hit the cache with no re-download and no provider call.
+
+For a _semantically_ similar (not identical) need in another project, the exact-match floor won't fire — use [Reuse before you resolve](#reuse-before-you-resolve): `--candidates` lists the global assets, and `--reuse <sha>` imports the one you pick. This is how a track resolved in one project gets reused in the next when the wording differs.
diff --git a/.claude/skills/media-use/references/setup-providers.md b/.claude/skills/media-use/references/setup-providers.md
new file mode 100644
index 0000000..6babb88
--- /dev/null
+++ b/.claude/skills/media-use/references/setup-providers.md
@@ -0,0 +1,94 @@
+# Setup and providers — install, auth, RAM ladders, forcing a provider
+
+## Setup — install heygen first (free-usage path)
+
+Install the HeyGen CLI through its [verified release instructions](https://developers.heygen.com/cli), then run:
+
+```bash
+heygen update             # free usage needs the OAuth-capable CLI (v0.3.0+)
+heygen auth login --oauth # OAuth = free subscription credits; --api-key bills API credits
+```
+
+This unlocks the FREE path for bgm/image/icon catalog search, TTS (voice), and avatar videos. Sign in with `--oauth` — the free allowance rides on the OAuth session (an API key bills API credits instead). **media-use requires heygen >= v0.3.0 uniformly** (the OAuth free-usage path needs it), so `--doctor` nudges older CLIs to update even for API-key-only use. Before resolving anything, verify setup with:
+
+```bash
+npx hyperframes media-use resolve --doctor
+```
+
+## Host HeyGen access (no CLI sign-in)
+
+A host app can give media-use HeyGen access of its own by setting
+`HEYGEN_API_BASE` (its gateway), `HEYGEN_API_KEY` (the token that gateway
+accepts) and, for a loopback gateway, `HEYGEN_ALLOW_HTTP=1`. The gateway adds
+the host's key, so it never enters the agent's environment, and every
+call is charged to that key's API credits. The `heygen` CLI honours the same
+variables, so `resolve` (bgm/sfx/image/icon/voice/avatar-video) and the audio
+engine's TTS all go through the host. With host access, skip CLI install and
+sign-in, prefer the host's own HeyGen tools where it has them, never fall back
+to a local or third-party generator on your own, and relay a refused call's
+message (for example "add a key in Settings > Account") as written.
+
+## Providers
+
+media-use holds no keys; every external tool owns its auth. Generation is
+centered on the HeyGen CLI free-usage path. Install and authenticate `heygen`
+before resolving bgm/sfx/image/icon/voice/avatar-video; music and sound effects from
+a host app's own tools need none of it. Local tools are opt-in
+alternatives where they exist: mflux for image, Kokoro for voice, Parakeet for
+transcription, and LTX for local video generation. `resolve` spec-checks
+AVAILABLE RAM for those local ladders inside the CLI (the image tiers are listed
+in `references/operations.md`).
+
+| Type      | Provider / path                                                                                                                                                               |
+| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| bgm       | heygen catalog free-usage path; a host app's own music tools come first                                                                                                       |
+| sfx       | Openverse (CC0 / CC BY, no account), bundled library offline; a host app's own sound tools come first                                                                         |
+| image     | heygen search free-usage path; optional local mflux; codex `image_gen` upsell                                                                                                 |
+| voice     | heygen tts free-usage path; optional local **Kokoro** (free, on-device)                                                                                                       |
+| icon      | heygen asset search free-usage path                                                                                                                                           |
+| logo      | theSVG (thesvg.org), then GitHub org avatar, then domain favicon (all free)                                                                                                   |
+| grade/lut | local core-preset map, params/CDN look index, deterministic `buildCube` fallback                                                                                              |
+| video     | heygen avatar video free-usage path (sign-in nudge on auth failure); optional local LTX (`videogen` ladder). Image-to-video / photo-avatar / dub stay manual `heygen` recipes |
+
+Local Kokoro (voice), mflux (image), and LTX (video) run on-device (free,
+private, offline once cached). The `codex` CLI remains the ChatGPT-sub image
+upsell. Cost rule (X4): the agent confirms before an agent-initiated paid call;
+a user-requested one just runs — `heygen.video` is flagged paid (metered free
+allowance) so an agent-initiated `resolve --type video` confirms first.
+
+To force a specific generator (e.g. a user says "make this image with codex"),
+pass `--provider codex`: it pins resolution to that provider and skips the
+free-usage default. See `references/operations.md` for the RAM ladders and
+provider recipes.
+
+`--local-only` skips every network provider, including the free HeyGen ones,
+leaving the project + global cache and any installed local provider. For
+HeyGen-only types, that means no fresh resolve.
+
+## CLI tools used (what to run, and how to enable each)
+
+`resolve` auto-cascades; each provider shells one CLI. HeyGen is the
+free-usage path for bgm/image/icon catalog search, TTS (voice), and avatar
+video, so those capabilities need `heygen` installed and authenticated. Local
+tools are OPT-IN alternatives where they exist; install one to unlock its free,
+private, on-device path instead of or ahead of HeyGen for that type. Only
+`ffmpeg`/`ffprobe` are strictly required for the tool to run at all.
+
+| Tool               | Serves                                                                      | Install                                                                                                                                                                                     |
+| ------------------ | --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ffmpeg`/`ffprobe` | adopt probing, smart-grade signalstats, cut, duck bake, loudnorm            | system package (`brew install ffmpeg`)                                                                                                                                                      |
+| `heygen`           | catalog (bgm/image/icon) + TTS (voice) + avatar video — the free-usage path | install through [verified HeyGen release instructions](https://developers.heygen.com/cli), then `heygen auth login --oauth` (needs >= v0.3.0)                                               |
+| `mflux-generate`   | local image gen (FLUX), best-for-RAM                                        | `uv venv ~/.venvs/mflux && VIRTUAL_ENV=~/.venvs/mflux uv pip install mflux==0.9.6`                                                                                                          |
+| `codex`            | image gen upsell (ChatGPT sub)                                              | Codex CLI, logged in via ChatGPT (owns its own auth)                                                                                                                                        |
+| `parakeet-mlx`     | local transcription (default ASR, best) on Apple Silicon                    | `uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx`                                                                                                    |
+| `ltx-2-mlx`        | local video gen                                                             | `git clone https://github.com/dgrauet/ltx-2-mlx && cd ltx-2-mlx && uv sync --all-extras`                                                                                                    |
+| `npx hyperframes`  | Kokoro TTS (voice), Parakeet or whisper.cpp (transcribe), remove-background | via the hyperframes CLI; Parakeet on macOS, Windows and glibc 2.32+ Linux: `npx hyperframes models install parakeet`; whisper.cpp is built on first use (Homebrew on macOS, else git+cmake) |
+
+The RAM-graded local-model shortlist + exact per-tier install/invoke lives in
+the CLI's bundled media-use engine, not in the standalone skill. Without a tool on PATH, its provider
+prints a one-line diagnostic to stderr and resolve falls through where another
+provider exists (e.g. no `mflux` -> codex image upsell; no `parakeet-mlx` -> whisper.cpp).
+
+`heygen asset search` is a pre-launch command hidden from `heygen --help`, but it
+runs; providers tag requests with the allowlisted `X-HeyGen-Client-Source` header
+(v0.3.0+).
diff --git a/.claude/skills/media-use/references/telemetry-dashboard.md b/.claude/skills/media-use/references/telemetry-dashboard.md
new file mode 100644
index 0000000..e0aac2d
--- /dev/null
+++ b/.claude/skills/media-use/references/telemetry-dashboard.md
@@ -0,0 +1,49 @@
+# media-use usage dashboard
+
+Reproducible definition of the media-use usage dashboard. The dashboard answers
+"how much is media-use used, for what, is reuse working, and what can't it
+satisfy" from the telemetry `scripts/lib/telemetry.mjs` already emits. Build it
+in an authorized HyperFrames analytics project; this doc is the source of truth
+so it can be recreated. Local complement: `resolve --stats` (same questions,
+from `.media/` + `~/.media`, no dashboard access needed).
+
+## Identity (see `scripts/lib/telemetry.mjs`)
+
+Events attribute to the **same person as the hyperframes CLI and studio**
+— the shared install id in `~/.hyperframes/config.json` (`anonymousId`), stitched
+to the HeyGen account (`$identify`, `distinct_id` = email/username) on sign-in.
+Not fully anonymous by design; pseudonymous before sign-in, account-linked after.
+`$ip:null`. Opt-out: `HYPERFRAMES_NO_TELEMETRY=1` / `DO_NOT_TRACK=1` (also CI, dev).
+
+## Event catalog (verified present in-project)
+
+Every event carries `surface: "media-use"`. Event **properties are coarse** —
+never intent text, file names, or paths.
+
+| Event                                                                  | Fires on                                  | Key properties                                                         |
+| ---------------------------------------------------------------------- | ----------------------------------------- | ---------------------------------------------------------------------- |
+| `media_use_resolve`                                                    | a resolve that produced/returned an asset | `type`, `source`, `provider`, `via`, `local_only`, `provider_override` |
+| `media_use_resolve_miss`                                               | a resolve that found nothing              | `type`, `local_only`, `provider_override` (no intent)                  |
+| `media_use_candidates`                                                 | `--candidates` / `--dry-run` listing      | `type`, counts                                                         |
+| `media_use_doctor_run`                                                 | `--doctor`                                | `ok`, `checks_failed`, `failed[]`                                      |
+| `media_use_compare`                                                    | `grade-compare` / `compare`               | `command`, `cells`, `truncated`, `total`, `render_ready_timed_out`     |
+| `media_use_transcribe` · `media_use_duck` · `media_use_transcript_cut` | audio-engine ops                          | op-specific                                                            |
+
+## Dashboard tiles
+
+1. **Invocation volume** — `query-trends`, count of `media_use_resolve` over time (daily). "How much."
+2. **By media type** — `media_use_resolve` broken down by `type` (bgm/sfx/image/icon/logo/voice/grade/lut). "For what."
+3. **Resolve hit-rate** — trends formula: `A / (A + B)` where A = `media_use_resolve`, B = `media_use_resolve_miss`. "Is the catalog covering needs."
+4. **Provider mix** — `media_use_resolve` broken down by `provider`; a second tile by `via` (`url` / `params-fallback` / `params`) to catch CDN→params LUT downgrades.
+5. **Top misses** — `media_use_resolve_miss` broken down by `type` (the tuning signal — pair with local `resolve --stats`, which also shows the missed _intents_ that telemetry deliberately omits).
+6. **Doctor health** — `media_use_doctor_run` broken down by `failed[]` (which dependency check fails most) + `checks_failed` distribution.
+7. **Compare cost** — `media_use_compare` by `command`, plus `truncated` / `render_ready_timed_out` rates (observe before lifting the 16-cell cap).
+8. **Adoption (optional)** — if the `first_run` property ships (plan U5), segment `media_use_resolve` first-run vs repeat.
+
+## Recreate in an analytics dashboard
+
+For each tile, confirm the event/property schema, build its trend or breakdown,
+then add it to a dashboard. Keep names prefixed `media-use:` so the dashboard is
+greppable. Cross-surface note: because identity is shared with CLI/studio, you
+can also break these down by the same person across `cli_command*` and `studio:*`
+events.
diff --git a/.claude/skills/media-use/scripts/audio-duck.mjs b/.claude/skills/media-use/scripts/audio-duck.mjs
new file mode 100644
index 0000000..e797515
--- /dev/null
+++ b/.claude/skills/media-use/scripts/audio-duck.mjs
@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { duckKeyframes, duckLane, speechSpans } from "./lib/duck.mjs";
+import { track } from "./lib/telemetry.mjs";
+
+const { values: args } = parseArgs({
+  options: {
+    meta: { type: "string" },
+    target: { type: "string" },
+    duck: { type: "string", default: "0.25" },
+    attack: { type: "string", default: "0.15" },
+    release: { type: "string", default: "0.4" },
+    "merge-gap": { type: "string", default: "0.6" },
+    sequential: { type: "boolean", default: false },
+    gap: { type: "string", default: "0" },
+    offsets: { type: "string" },
+    composition: { type: "string" },
+    json: { type: "boolean", default: false },
+    help: { type: "boolean", short: "h", default: false },
+  },
+  strict: true,
+});
+
+if (args.help) {
+  console.log(`media-use audio-duck — generate a volume ducking lane (data-automation)
+
+Usage:
+  node audio-duck.mjs --meta audio_meta.json --target "#bgm"
+
+Options:
+  --meta          audio_meta.json or JSON word transcript
+  --target        GSAP selector for the background audio element
+  --duck          Duck multiplier (default: 0.25)
+  --attack        Duck-in duration seconds (default: 0.15)
+  --release       Restore duration seconds (default: 0.4)
+  --merge-gap     Bridge speech gaps smaller than this many seconds (default: 0.6)
+  --sequential    Place multi-line meta back to back at composition time
+  --gap           Extra seconds between sequential lines (default: 0)
+  --offsets       Explicit placement, "l1=0,l2=3.4" (voice id = start seconds)
+  --composition   Read target data-volume and data-start from this HTML file
+  --json          Output { spans, keyframes, lane }
+  --help, -h      Show this help`);
+  process.exit(0);
+}
+
+try {
+  run();
+  await track("media_use_duck", { sequential: !!args.sequential });
+} catch (err) {
+  if (args.json) console.log(JSON.stringify({ ok: false, error: err.message }));
+  else console.error(`error: ${err.message}`);
+  process.exit(1);
+}
+
+function run() {
+  if (!args.meta || !args.target) throw new Error("--meta and --target are required");
+  const meta = JSON.parse(readFileSync(resolve(args.meta), "utf8"));
+  const target = args.target;
+  const { baseVolume, clipStart } = readTargetAttrs(args.composition, target);
+  const offsets = args.offsets
+    ? Object.fromEntries(
+        args.offsets.split(",").map((pair) => {
+          const [id, t] = pair.split("=");
+          return [id.trim(), Number(t)];
+        }),
+      )
+    : undefined;
+  const spans = speechSpans(meta, {
+    mergeGap: Number(args["merge-gap"]),
+    sequential: args.sequential,
+    gap: Number(args.gap),
+    offsets,
+  });
+  const keyframes = duckKeyframes(spans, {
+    duck: Number(args.duck),
+    attack: Number(args.attack),
+    release: Number(args.release),
+    baseVolume,
+  });
+
+  const lane = duckLane(keyframes, { clipStart, baseVolume });
+
+  if (args.json) {
+    console.log(JSON.stringify({ spans, keyframes, lane }));
+    return;
+  }
+
+  console.log(`<!-- auto-duck: ${target} under narration; add to its <audio> element -->`);
+  console.log(`data-automation='${JSON.stringify(lane)}'`);
+}
+
+function readTargetAttrs(composition, target) {
+  if (!composition || !target.startsWith("#")) return { baseVolume: 1, clipStart: 0 };
+  const id = target.slice(1);
+  const html = readFileSync(resolve(composition), "utf8");
+  // ponytail: regex is enough here because this only reads one attribute from
+  // one user-authored composition element, not arbitrary HTML.
+  const tag = html.match(new RegExp(`<[^>]*\\bid=["']${escapeRegExp(id)}["'][^>]*>`, "i"))?.[0];
+  const attr = (name) => Number(tag?.match(new RegExp(`\\b${name}=["']([^"']+)["']`, "i"))?.[1]);
+  const volume = attr("data-volume");
+  const start = attr("data-start");
+  return {
+    baseVolume: Number.isFinite(volume) ? volume : 1,
+    clipStart: Number.isFinite(start) ? start : 0,
+  };
+}
+
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
diff --git a/.claude/skills/media-use/scripts/compatibility.test.mjs b/.claude/skills/media-use/scripts/compatibility.test.mjs
new file mode 100644
index 0000000..1250e97
--- /dev/null
+++ b/.claude/skills/media-use/scripts/compatibility.test.mjs
@@ -0,0 +1,41 @@
+import { cpSync, mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { execFileSync } from "node:child_process";
+import test from "node:test";
+
+process.env.HYPERFRAMES_MEDIA_HOME = mkdtempSync(join(tmpdir(), "media-use-compat-home-"));
+
+function run(scriptsDir, script, args) {
+  return execFileSync(process.execPath, [join(scriptsDir, script), ...args], {
+    encoding: "utf8",
+    stdio: ["ignore", "pipe", "pipe"],
+  });
+}
+
+test("published memory scripts run without reaching outside the skill", () => {
+  const scratchDir = mkdtempSync(join(tmpdir(), "media-use-compat-"));
+  const skillDir = join(scratchDir, "media-use");
+  cpSync(new URL("..", import.meta.url), skillDir, { recursive: true });
+  const scriptsDir = join(skillDir, "scripts");
+  const projectDir = join(scratchDir, "project");
+  try {
+    run(scriptsDir, "prefs.mjs", ["get", "--hyperframes", projectDir, "--json"]);
+    run(scriptsDir, "recipe.mjs", ["list", "--hyperframes", projectDir, "--json"]);
+    run(scriptsDir, "transcribe.mjs", ["--help"]);
+  } finally {
+    rmSync(scratchDir, { recursive: true, force: true });
+  }
+});
+
+test("published audio helpers import without the CLI package tree", () => {
+  const root = mkdtempSync(join(tmpdir(), "media-use-audio-"));
+  const skill = join(root, "media-use");
+  try {
+    cpSync(new URL("..", import.meta.url), skill, { recursive: true });
+    for (const helper of ["heygen.mjs", "tts.mjs"])
+      run(join(skill, "audio/scripts/lib"), helper, []);
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+});
diff --git a/.claude/skills/media-use/scripts/dither.mjs b/.claude/skills/media-use/scripts/dither.mjs
new file mode 100644
index 0000000..7e4bfef
--- /dev/null
+++ b/.claude/skills/media-use/scripts/dither.mjs
@@ -0,0 +1,328 @@
+#!/usr/bin/env node
+
+import { execFileSync, spawn } from "node:child_process";
+import { once } from "node:events";
+import { existsSync, mkdirSync, renameSync, rmSync } from "node:fs";
+import { dirname, extname, resolve } from "node:path";
+import { text } from "node:stream/consumers";
+import { parseArgs } from "node:util";
+import {
+  ERROR_DIFFUSION_ALGORITHMS,
+  applyErrorDiffusionRgba,
+  errorDiffusionBufferLength,
+} from "./lib/error-diffusion.mjs";
+
+const IMAGE_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".webp", ".bmp", ".tif", ".tiff"]);
+const OUTPUT_IMAGE_EXTENSIONS = new Set([".png", ".jpg", ".jpeg", ".webp"]);
+
+const { values: args } = parseArgs({
+  options: {
+    input: { type: "string", short: "i" },
+    out: { type: "string", short: "o" },
+    algorithm: { type: "string", short: "a", default: "floyd-steinberg" },
+    palette: { type: "string", default: "#000000,#ffffff" },
+    "point-size": { type: "string", default: "3" },
+    brightness: { type: "string", default: "1" },
+    contrast: { type: "string", default: "1.2" },
+    detail: { type: "string", default: "1" },
+    json: { type: "boolean", default: false },
+    help: { type: "boolean", short: "h", default: false },
+  },
+  strict: true,
+});
+
+if (args.help) {
+  console.log(`media-use dither — exact cached error-diffusion for image or MP4 media
+
+Usage:
+  node dither.mjs --input in.mp4 --out out.mp4 [options]
+
+Options:
+  --algorithm, -a   ${Object.keys(ERROR_DIFFUSION_ALGORITHMS).join(" | ")}
+  --palette         2-6 authored-order #rrggbb colors, comma-separated
+  --point-size      Block size in pixels, 1-20 (default: 3)
+  --brightness      0.5-2 (default: 1)
+  --contrast        0.5-2 (default: 1.2)
+  --detail          Diffused-error strength, 0.1-1 (default: 1)
+  --json            Output JSON status
+  --help, -h        Show this help
+
+Video output uses the source average frame rate as CFR; VFR cadence is normalized.
+
+After processing, register the output with:
+  node resolve.mjs --from <output> --type image|video`);
+  process.exit(0);
+}
+
+try {
+  const result = await run();
+  if (args.json) console.log(JSON.stringify({ ok: true, ...result }));
+  else {
+    console.log(`dithered ${result.input} -> ${result.out} (${result.algorithm})`);
+    console.log(`next: resolve --from ${result.out} --type ${result.type}`);
+  }
+} catch (error) {
+  const message = error instanceof Error ? error.message : String(error);
+  if (args.json) console.log(JSON.stringify({ ok: false, error: message }));
+  else console.error(`error: ${message}`);
+  process.exit(1);
+}
+
+async function run() {
+  if (!args.input || !args.out) throw new Error("--input and --out are required");
+  const inputPath = resolve(args.input);
+  const outPath = resolve(args.out);
+  if (!existsSync(inputPath)) throw new Error(`input file not found: ${inputPath}`);
+  if (inputPath === outPath) throw new Error("--out must differ from --input");
+
+  const metadata = probe(inputPath);
+  if (metadata.colorTransfer === "smpte2084" || metadata.colorTransfer === "arib-std-b67") {
+    throw new Error(
+      `HDR ${metadata.colorTransfer} input is not supported by the 8-bit SDR dither processor; tone-map to Rec.709 first`,
+    );
+  }
+  const options = {
+    algorithm: args.algorithm,
+    palette: args.palette.split(",").map((color) => color.trim()),
+    pointSize: Number(args["point-size"]),
+    brightness: Number(args.brightness),
+    contrast: Number(args.contrast),
+    detail: Number(args.detail),
+  };
+  // Validate before starting FFmpeg or creating an output file.
+  applyErrorDiffusionRgba(new Uint8ClampedArray(4), 1, 1, options, new Float32Array(3));
+
+  mkdirSync(dirname(outPath), { recursive: true });
+  const inputIsImage = IMAGE_EXTENSIONS.has(extname(inputPath).toLowerCase());
+  if (inputIsImage) {
+    if (!OUTPUT_IMAGE_EXTENSIONS.has(extname(outPath).toLowerCase())) {
+      throw new Error("image output must use .png, .jpg, .jpeg, or .webp");
+    }
+    processImage(inputPath, outPath, metadata, options);
+  } else {
+    if (extname(outPath).toLowerCase() !== ".mp4") throw new Error("video output must use .mp4");
+    await processVideo(inputPath, outPath, metadata, options);
+  }
+
+  return {
+    input: inputPath,
+    out: outPath,
+    type: inputIsImage ? "image" : "video",
+    algorithm: options.algorithm,
+    palette: options.palette,
+    point_size: options.pointSize,
+    brightness: options.brightness,
+    contrast: options.contrast,
+    detail: options.detail,
+  };
+}
+
+function probe(filePath) {
+  const raw = execFileSync(
+    "ffprobe",
+    ["-v", "error", "-print_format", "json", "-show_streams", "-show_format", "--", filePath],
+    { encoding: "utf8", timeout: 10_000 },
+  );
+  const parsed = JSON.parse(raw);
+  const video = parsed.streams?.find((stream) => stream.codec_type === "video");
+  if (!video?.width || !video?.height)
+    throw new Error(`no readable video/image stream: ${filePath}`);
+  const fps = usableFrameRate(video.avg_frame_rate) ?? usableFrameRate(video.r_frame_rate) ?? "30";
+  return {
+    width: video.width,
+    height: video.height,
+    fps,
+    colorTransfer: video.color_transfer || "",
+  };
+}
+
+function processImage(inputPath, outPath, metadata, options) {
+  const frameBytes = metadata.width * metadata.height * 4;
+  const rgba = execFileSync(
+    "ffmpeg",
+    [
+      "-hide_banner",
+      "-loglevel",
+      "error",
+      "-nostdin",
+      "-i",
+      inputPath,
+      "-frames:v",
+      "1",
+      "-f",
+      "rawvideo",
+      "-pix_fmt",
+      "rgba",
+      "-",
+    ],
+    { maxBuffer: frameBytes + 1024 },
+  );
+  if (rgba.length !== frameBytes)
+    throw new Error(`decoded ${rgba.length} bytes; expected ${frameBytes}`);
+  applyErrorDiffusionRgba(rgba, metadata.width, metadata.height, options);
+
+  const temporary = temporaryOutput(outPath);
+  try {
+    execFileSync(
+      "ffmpeg",
+      [
+        "-y",
+        "-hide_banner",
+        "-loglevel",
+        "error",
+        "-f",
+        "rawvideo",
+        "-pix_fmt",
+        "rgba",
+        "-s:v",
+        `${metadata.width}x${metadata.height}`,
+        "-i",
+        "-",
+        "-frames:v",
+        "1",
+        temporary,
+      ],
+      { input: rgba, maxBuffer: frameBytes + 1024 },
+    );
+    renameSync(temporary, outPath);
+  } finally {
+    rmSync(temporary, { force: true });
+  }
+}
+
+async function processVideo(inputPath, outPath, metadata, options) {
+  const temporary = temporaryOutput(outPath);
+  const frameBytes = metadata.width * metadata.height * 4;
+  const keyframeInterval = String(Math.max(1, Math.round(frameRateNumber(metadata.fps))));
+  const errors = new Float32Array(
+    errorDiffusionBufferLength(metadata.width, metadata.height, options.pointSize),
+  );
+  const decoder = spawn("ffmpeg", [
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-nostdin",
+    "-i",
+    inputPath,
+    "-map",
+    "0:v:0",
+    "-f",
+    "rawvideo",
+    "-pix_fmt",
+    "rgba",
+    "-",
+  ]);
+  const encoder = spawn("ffmpeg", [
+    "-y",
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-f",
+    "rawvideo",
+    "-pix_fmt",
+    "rgba",
+    "-s:v",
+    `${metadata.width}x${metadata.height}`,
+    "-r",
+    metadata.fps,
+    "-i",
+    "-",
+    "-i",
+    inputPath,
+    "-map",
+    "0:v:0",
+    "-map",
+    "1:a?",
+    "-map_metadata",
+    "1",
+    "-c:v",
+    "libx264",
+    "-preset",
+    "veryfast",
+    "-crf",
+    "18",
+    "-g",
+    keyframeInterval,
+    "-keyint_min",
+    keyframeInterval,
+    "-sc_threshold",
+    "0",
+    "-pix_fmt",
+    "yuv420p",
+    "-x264-params",
+    "colorprim=bt709:transfer=bt709:colormatrix=bt709",
+    "-color_primaries:v",
+    "bt709",
+    "-color_trc:v",
+    "bt709",
+    "-colorspace:v",
+    "bt709",
+    "-color_range",
+    "tv",
+    "-c:a",
+    "aac",
+    "-b:a",
+    "192k",
+    "-shortest",
+    "-movflags",
+    "+faststart",
+    temporary,
+  ]);
+  const decoderError = text(decoder.stderr);
+  const encoderError = text(encoder.stderr);
+  const decoderDone = once(decoder, "close").then(([code]) => code ?? 1);
+  const encoderDone = once(encoder, "close").then(([code]) => code ?? 1);
+
+  try {
+    const frame = Buffer.allocUnsafe(frameBytes);
+    let frameOffset = 0;
+    for await (const chunk of decoder.stdout) {
+      let chunkOffset = 0;
+      while (chunkOffset < chunk.length) {
+        const length = Math.min(frameBytes - frameOffset, chunk.length - chunkOffset);
+        chunk.copy(frame, frameOffset, chunkOffset, chunkOffset + length);
+        chunkOffset += length;
+        frameOffset += length;
+        if (frameOffset !== frameBytes) continue;
+        applyErrorDiffusionRgba(frame, metadata.width, metadata.height, options, errors);
+        await writeFrame(encoder.stdin, frame);
+        frameOffset = 0;
+      }
+    }
+    if (frameOffset)
+      throw new Error(`decoder returned a partial RGBA frame (${frameOffset} bytes)`);
+    encoder.stdin.end();
+    const [decoderCode, encoderCode] = await Promise.all([decoderDone, encoderDone]);
+    if (decoderCode !== 0) throw new Error(`FFmpeg decode failed: ${(await decoderError).trim()}`);
+    if (encoderCode !== 0) throw new Error(`FFmpeg encode failed: ${(await encoderError).trim()}`);
+    renameSync(temporary, outPath);
+  } catch (error) {
+    decoder.kill("SIGKILL");
+    encoder.kill("SIGKILL");
+    throw error;
+  } finally {
+    rmSync(temporary, { force: true });
+  }
+}
+
+function writeFrame(stream, frame) {
+  return new Promise((resolveWrite, reject) => {
+    stream.write(frame, (error) => (error ? reject(error) : resolveWrite()));
+  });
+}
+
+function usableFrameRate(value) {
+  if (!value || value === "0/0") return null;
+  const number = frameRateNumber(value);
+  return Number.isFinite(number) && number > 0 ? value : null;
+}
+
+function frameRateNumber(value) {
+  const [numerator, denominator = "1"] = value.split("/");
+  return Number(numerator) / Number(denominator);
+}
+
+function temporaryOutput(outPath) {
+  const extension = extname(outPath);
+  return `${outPath.slice(0, -extension.length)}.part-${process.pid}${extension}`;
+}
diff --git a/.claude/skills/media-use/scripts/dither.test.mjs b/.claude/skills/media-use/scripts/dither.test.mjs
new file mode 100644
index 0000000..1e2d61f
--- /dev/null
+++ b/.claude/skills/media-use/scripts/dither.test.mjs
@@ -0,0 +1,176 @@
+import assert from "node:assert/strict";
+import { execFileSync, spawnSync } from "node:child_process";
+import { mkdtempSync, rmSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+const SCRIPT = fileURLToPath(new URL("./dither.mjs", import.meta.url));
+const HAS_FFMPEG =
+  spawnSync("ffmpeg", ["-version"], { stdio: "ignore" }).status === 0 &&
+  spawnSync("ffprobe", ["-version"], { stdio: "ignore" }).status === 0;
+
+function fixture() {
+  const dir = mkdtempSync(join(tmpdir(), "media-use-dither-"));
+  return { dir, cleanup: () => rmSync(dir, { recursive: true, force: true }) };
+}
+
+function ffmpeg(args) {
+  execFileSync("ffmpeg", ["-y", "-hide_banner", "-loglevel", "error", ...args]);
+}
+
+function run(args) {
+  return spawnSync(process.execPath, [SCRIPT, ...args, "--json"], { encoding: "utf8" });
+}
+
+test("processes an image into the requested ordered palette", { skip: !HAS_FFMPEG }, (t) => {
+  const { dir, cleanup } = fixture();
+  t.after(cleanup);
+  const input = join(dir, "source.png");
+  const output = join(dir, "dithered.png");
+  ffmpeg(["-f", "lavfi", "-i", "testsrc2=size=16x12:rate=1", "-frames:v", "1", input]);
+
+  const result = run([
+    "--input",
+    input,
+    "--out",
+    output,
+    "--algorithm",
+    "floyd-steinberg",
+    "--palette",
+    "#000000,#ffffff",
+    "--point-size",
+    "3",
+  ]);
+  assert.equal(result.status, 0, result.stderr || result.stdout);
+  assert.equal(JSON.parse(result.stdout).type, "image");
+
+  const rgb = execFileSync("ffmpeg", [
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-i",
+    output,
+    "-frames:v",
+    "1",
+    "-f",
+    "rawvideo",
+    "-pix_fmt",
+    "rgb24",
+    "-",
+  ]);
+  for (let index = 0; index < rgb.length; index += 3) {
+    const value = rgb[index];
+    assert.ok(value === 0 || value === 255);
+    assert.equal(rgb[index + 1], value);
+    assert.equal(rgb[index + 2], value);
+  }
+});
+
+test("processes moving MP4 frames, audio, and BT.709 metadata", { skip: !HAS_FFMPEG }, (t) => {
+  const { dir, cleanup } = fixture();
+  t.after(cleanup);
+  const input = join(dir, "source.mp4");
+  const output = join(dir, "dithered.mp4");
+  ffmpeg([
+    "-f",
+    "lavfi",
+    "-i",
+    "testsrc2=size=16x12:rate=3:duration=2",
+    "-f",
+    "lavfi",
+    "-i",
+    "sine=frequency=440:duration=3",
+    "-c:v",
+    "libx264",
+    "-pix_fmt",
+    "yuv420p",
+    "-c:a",
+    "aac",
+    input,
+  ]);
+
+  const result = run([
+    "--input",
+    input,
+    "--out",
+    output,
+    "--algorithm",
+    "atkinson",
+    "--palette",
+    "#0f380f,#306230,#8bac0f,#9bbc0f",
+  ]);
+  assert.equal(result.status, 0, result.stderr || result.stdout);
+  const probe = JSON.parse(
+    execFileSync(
+      "ffprobe",
+      ["-v", "error", "-print_format", "json", "-show_streams", "-show_format", "--", output],
+      {
+        encoding: "utf8",
+      },
+    ),
+  );
+  const video = probe.streams.find((stream) => stream.codec_type === "video");
+  const audio = probe.streams.find((stream) => stream.codec_type === "audio");
+  assert.equal(video.width, 16);
+  assert.equal(video.height, 12);
+  assert.equal(video.nb_frames, "6");
+  assert.equal(video.color_space, "bt709");
+  assert.equal(video.color_transfer, "bt709");
+  assert.equal(video.color_primaries, "bt709");
+  assert.equal(video.color_range, "tv");
+  assert.equal(audio.codec_name, "aac");
+  assert.ok(Number(probe.format.duration) < 2.5, "audio must not outlive processed video");
+  const keyframes = execFileSync(
+    "ffprobe",
+    [
+      "-v",
+      "error",
+      "-select_streams",
+      "v:0",
+      "-skip_frame",
+      "nokey",
+      "-show_entries",
+      "frame=best_effort_timestamp_time",
+      "-of",
+      "csv=p=0",
+      "--",
+      output,
+    ],
+    { encoding: "utf8" },
+  )
+    .trim()
+    .split(/\s+/)
+    .map((value) => Number.parseFloat(value));
+  assert.deepEqual(keyframes, [0, 1]);
+});
+
+test("rejects tagged PQ or HLG instead of silently producing SDR", { skip: !HAS_FFMPEG }, (t) => {
+  const { dir, cleanup } = fixture();
+  t.after(cleanup);
+  const input = join(dir, "hlg.mp4");
+  ffmpeg([
+    "-f",
+    "lavfi",
+    "-i",
+    "color=c=white:size=16x12:rate=1:duration=1",
+    "-c:v",
+    "libx264",
+    "-pix_fmt",
+    "yuv420p10le",
+    "-x264-params",
+    "colorprim=bt2020:transfer=arib-std-b67:colormatrix=bt2020nc",
+    "-color_primaries:v",
+    "bt2020",
+    "-color_trc:v",
+    "arib-std-b67",
+    "-colorspace:v",
+    "bt2020nc",
+    input,
+  ]);
+
+  const result = run(["--input", input, "--out", join(dir, "wrong.mp4")]);
+  assert.equal(result.status, 1);
+  assert.match(JSON.parse(result.stdout).error, /HDR arib-std-b67 input is not supported/);
+});
diff --git a/.claude/skills/media-use/scripts/eval.mjs b/.claude/skills/media-use/scripts/eval.mjs
new file mode 100644
index 0000000..7184c6f
--- /dev/null
+++ b/.claude/skills/media-use/scripts/eval.mjs
@@ -0,0 +1,369 @@
+#!/usr/bin/env node
+
+/**
+ * media-use eval — compare baseline (no media-use) vs. with media-use
+ * on real registry blocks. Produces an HTML report.
+ */
+
+import {
+  mkdtempSync,
+  cpSync,
+  rmSync,
+  readFileSync,
+  readdirSync,
+  existsSync,
+  writeFileSync,
+} from "node:fs";
+import { join, basename, resolve, dirname } from "node:path";
+import { execFileSync } from "node:child_process";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+
+const SCRIPT_DIR = dirname(fileURLToPath(import.meta.url));
+const REPO_ROOT = resolve(SCRIPT_DIR, "..", "..", "..");
+const RESOLVE_SCRIPT = join(SCRIPT_DIR, "resolve.mjs");
+
+const TEST_BLOCKS = [
+  "registry/blocks/nyc-paris-flight",
+  "registry/blocks/macos-tahoe-liquid-glass",
+  "registry/blocks/blue-sweater-intro-video",
+  "registry/blocks/vpn-youtube-spot",
+  "registry/blocks/apple-money-count",
+  "registry/blocks/liquid-glass-notification",
+  "registry/blocks/instagram-follow",
+];
+
+// Run resolve.mjs with args as a literal argv array (no shell), so values
+// interpolated from manifest metadata (--intent prompt, --type) can't inject
+// shell. Mirrors the execFileSync fix in probe.mjs / heygen-search.mjs.
+function run(args, opts = {}) {
+  try {
+    return {
+      ok: true,
+      output: execFileSync(process.execPath, [RESOLVE_SCRIPT, ...args], {
+        encoding: "utf8",
+        timeout: 15000,
+        stdio: "pipe",
+        ...opts,
+      }).trim(),
+    };
+  } catch (err) {
+    return { ok: false, output: (err.stdout || "") + (err.stderr || ""), code: err.status };
+  }
+}
+
+function countAssetFiles(dir) {
+  const assetsDir = join(dir, "assets");
+  if (!existsSync(assetsDir)) return { count: 0, files: [] };
+  const files = [];
+  function walk(d, base = "") {
+    for (const e of readdirSync(d, { withFileTypes: true })) {
+      const rel = base ? `${base}/${e.name}` : e.name;
+      if (e.isDirectory()) walk(join(d, e.name), rel);
+      else files.push(rel);
+    }
+  }
+  walk(assetsDir);
+  return { count: files.length, files };
+}
+
+function evalBlock(blockPath) {
+  const fullPath = join(REPO_ROOT, blockPath);
+  if (!existsSync(fullPath)) return null;
+
+  const name = basename(blockPath);
+  const tmp = mkdtempSync(join(tmpdir(), `mu-eval-${name}-`));
+
+  try {
+    cpSync(fullPath, tmp, { recursive: true });
+
+    // baseline: what the agent sees WITHOUT media-use
+    const baseline = countAssetFiles(tmp);
+    const htmlFiles = readdirSync(tmp).filter((f) => f.endsWith(".html"));
+
+    // parse compositions for asset references
+    const assetRefs = [];
+    for (const hf of htmlFiles) {
+      const html = readFileSync(join(tmp, hf), "utf8");
+      const srcMatches = html.matchAll(/src=["']([^"']+?)["']/g);
+      for (const m of srcMatches) {
+        const ref = m[1];
+        if (ref.startsWith("data:") || ref.startsWith("http")) continue;
+        assetRefs.push({ composition: hf, ref });
+      }
+      const urlMatches = html.matchAll(/url\(["']?([^"')]+?)["']?\)/g);
+      for (const m of urlMatches) {
+        const ref = m[1];
+        if (ref.startsWith("data:") || ref.startsWith("http") || ref.startsWith("#")) continue;
+        assetRefs.push({ composition: hf, ref });
+      }
+    }
+
+    // with media-use: run --adopt
+    const adoptResult = run(["--adopt", "--project", tmp, "--json"]);
+    let adopted = { ok: false, adopted: 0, assets: [] };
+    if (adoptResult.ok) {
+      try {
+        adopted = JSON.parse(adoptResult.output);
+      } catch {
+        /* */
+      }
+    }
+
+    // read the generated index
+    const indexPath = join(tmp, ".media", "index.md");
+    const indexContent = existsSync(indexPath)
+      ? readFileSync(indexPath, "utf8")
+      : "(no index generated)";
+
+    // read manifest for detail
+    const manifestPath = join(tmp, ".media", "manifest.jsonl");
+    const manifest = existsSync(manifestPath)
+      ? readFileSync(manifestPath, "utf8")
+          .trim()
+          .split("\n")
+          .map((l) => {
+            try {
+              return JSON.parse(l);
+            } catch {
+              return null;
+            }
+          })
+          .filter(Boolean)
+      : [];
+
+    // test resolve cache hit: try resolving something that was adopted
+    let resolveTest = null;
+    if (manifest.length > 0) {
+      const first = manifest[0];
+      const prompt = first.provenance?.prompt || first.description;
+      const r = run(["--type", first.type, "--intent", prompt, "--project", tmp, "--json"]);
+      if (r.ok) {
+        try {
+          resolveTest = JSON.parse(r.output);
+        } catch {
+          /* */
+        }
+      }
+    }
+
+    // test resolve miss: try resolving something that doesn't exist
+    const missResult = run([
+      "--type",
+      "bgm",
+      "--intent",
+      "nonexistent query xyz",
+      "--project",
+      tmp,
+      "--json",
+    ]);
+    let resolveMiss = null;
+    if (!missResult.ok) {
+      try {
+        resolveMiss = JSON.parse(missResult.output);
+      } catch {
+        /* */
+      }
+    }
+
+    // coverage: which composition refs are covered by the manifest
+    const manifestPaths = new Set(manifest.map((m) => m.path));
+    const coverage = assetRefs.map((r) => ({
+      ...r,
+      covered: manifestPaths.has(r.ref),
+    }));
+
+    return {
+      name,
+      baseline: { fileCount: baseline.count, files: baseline.files, htmlCount: htmlFiles.length },
+      compositions: htmlFiles,
+      assetRefs: coverage,
+      adopted: { count: adopted.adopted, assets: adopted.assets || [] },
+      index: indexContent,
+      manifest,
+      resolveTest,
+      resolveMiss,
+    };
+  } finally {
+    rmSync(tmp, { recursive: true, force: true });
+  }
+}
+
+function generateReport(results) {
+  const all = results.filter(Boolean);
+  const passed = all.filter((r) => r.adopted.count > 0);
+
+  const rows = results
+    .filter(Boolean)
+    .map((r) => {
+      const hasMetadata = r.manifest.some((m) => m.duration || m.width);
+      const cacheHit = r.resolveTest?._source === "cached";
+      const missHandled = r.resolveMiss?.ok === false;
+
+      return `<tr>
+        <td><strong>${r.name}</strong></td>
+        <td>${r.baseline.fileCount} files, ${r.baseline.htmlCount} comp${r.baseline.htmlCount === 1 ? "" : "s"}</td>
+        <td>${r.adopted.count} adopted</td>
+        <td>${hasMetadata ? "<span class='pass'>with metadata</span>" : "<span class='warn'>no metadata</span>"}</td>
+        <td>${cacheHit ? "<span class='pass'>cache hit</span>" : "<span class='warn'>no hit</span>"}</td>
+        <td>${missHandled ? "<span class='pass'>handled</span>" : "<span class='fail'>unexpected</span>"}</td>
+      </tr>`;
+    })
+    .join("\n");
+
+  const details = results
+    .filter(Boolean)
+    .filter((r) => r.adopted.count > 0)
+    .map((r) => {
+      const assetRows = r.manifest
+        .map((m) => {
+          const dur = m.duration != null ? `${m.duration}s` : "—";
+          const dims = m.width && m.height ? `${m.width}×${m.height}` : "—";
+          return `<tr><td>${m.id}</td><td>${m.type}</td><td>${dur}</td><td>${dims}</td><td class="path">${m.path}</td><td>${m.description || ""}</td></tr>`;
+        })
+        .join("\n");
+
+      const coveredCount = r.assetRefs.filter((c) => c.covered).length;
+      const totalRefs = r.assetRefs.length;
+      const coveragePct = totalRefs > 0 ? Math.round((coveredCount / totalRefs) * 100) : 100;
+
+      const refRows = r.assetRefs
+        .map(
+          (c) =>
+            `<tr><td class="path">${c.composition}</td><td class="path">${c.ref}</td><td>${c.covered ? "<span class='pass'>covered</span>" : "<span class='warn'>not in manifest</span>"}</td></tr>`,
+        )
+        .join("\n");
+
+      return `<div class="block-detail">
+        <h3>${r.name}</h3>
+        <p style="font-size:13px;color:var(--muted)">${r.compositions.length} composition${r.compositions.length === 1 ? "" : "s"}: ${r.compositions.join(", ")}</p>
+
+        <div class="comparison">
+          <div class="col">
+            <h4>Baseline (no media-use)</h4>
+            <p>Agent sees: ${r.baseline.fileCount} raw files in assets/<br>No metadata, no type info, no relationship to compositions.</p>
+            <pre class="file-list">${r.baseline.files.join("\n") || "(no assets)"}</pre>
+          </div>
+          <div class="col">
+            <h4>With media-use (after --adopt)</h4>
+            <p>Agent reads index.md — structured, typed, with metadata:</p>
+            <pre class="index">${escapeHtml(r.index)}</pre>
+          </div>
+        </div>
+
+        ${
+          totalRefs > 0
+            ? `<h4>Composition → asset coverage <span class="${coveragePct === 100 ? "pass" : "warn"}">${coveragePct}%</span> (${coveredCount}/${totalRefs} refs)</h4>
+        <table class="manifest">
+          <thead><tr><th>composition</th><th>asset reference</th><th>in manifest?</th></tr></thead>
+          <tbody>${refRows}</tbody>
+        </table>`
+            : ""
+        }
+
+        <h4>Manifest records</h4>
+        <table class="manifest">
+          <thead><tr><th>id</th><th>type</th><th>dur</th><th>dims</th><th>path</th><th>description</th></tr></thead>
+          <tbody>${assetRows}</tbody>
+        </table>
+      </div>`;
+    })
+    .join("\n");
+
+  return `<title>media-use eval report</title>
+<style>
+:root { --bg: #fafaf7; --text: #1b1b18; --muted: #7a756a; --accent: #0d7377; --good: #1a7a3a; --warn: #b45309; --fail: #dc2626; --border: #e8e5df; --surface: #fff; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --sans: system-ui, -apple-system, sans-serif; --serif: Georgia, serif }
+* { box-sizing: border-box; margin: 0 } body { background: var(--bg); color: var(--text); font-family: var(--serif); line-height: 1.6; font-size: 15px; padding: 40px 24px }
+.wrap { max-width: 1100px; margin: 0 auto }
+h1 { font-family: var(--sans); font-size: 28px; font-weight: 700; margin-bottom: 8px; letter-spacing: -.02em }
+h2 { font-family: var(--sans); font-size: 20px; font-weight: 650; margin: 32px 0 12px; letter-spacing: -.01em }
+h3 { font-family: var(--sans); font-size: 17px; font-weight: 650; margin: 24px 0 8px }
+h4 { font-family: var(--sans); font-size: 14px; font-weight: 600; margin: 16px 0 6px; color: var(--muted) }
+p { margin-bottom: 10px }
+.meta { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 24px }
+.summary { display: flex; gap: 16px; margin: 16px 0; flex-wrap: wrap }
+.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; flex: 1; min-width: 140px }
+.stat .num { font-family: var(--sans); font-size: 28px; font-weight: 700; color: var(--accent) }
+.stat .label { font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em }
+table { width: 100%; border-collapse: collapse; font-size: 13px; font-family: var(--sans); margin: 8px 0 }
+th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--border); padding: 6px 8px; font-weight: 700 }
+td { border-bottom: 1px solid var(--border); padding: 7px 8px; vertical-align: top }
+td.path { font-family: var(--mono); font-size: 12px; color: var(--muted); max-width: 300px; overflow: hidden; text-overflow: ellipsis }
+.pass { color: var(--good); font-weight: 600 } .warn { color: var(--warn); font-weight: 600 } .fail { color: var(--fail); font-weight: 600 }
+.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0 }
+@media(max-width:700px) { .comparison { grid-template-columns: 1fr } }
+.col { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px }
+.col h4 { margin-top: 0 }
+pre { font-family: var(--mono); font-size: 12px; background: #1b1b18; color: #d4d0c8; border-radius: 6px; padding: 12px 14px; overflow-x: auto; margin: 6px 0; line-height: 1.5 }
+pre.file-list { background: var(--bg); color: var(--muted); border: 1px solid var(--border) }
+pre.index { white-space: pre; }
+.block-detail { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 20px }
+.verdict { margin-top: 24px; padding: 16px 20px; border-radius: 8px; font-family: var(--sans); font-size: 15px }
+.verdict.ship { background: #edfbf0; border: 1px solid #1a7a3a; color: #1a7a3a }
+.verdict.wait { background: #fff3ec; border: 1px solid #d94f04; color: #d94f04 }
+</style>
+<div class="wrap">
+<h1>media-use eval report</h1>
+<p class="meta">${new Date().toISOString().slice(0, 10)} · ${all.length} blocks evaluated · baseline vs. media-use --adopt</p>
+
+<div class="summary">
+  <div class="stat"><div class="num">${all.length}</div><div class="label">blocks tested</div></div>
+  <div class="stat"><div class="num">${passed.length}</div><div class="label">with assets</div></div>
+  <div class="stat"><div class="num">${all.reduce((s, r) => s + r.adopted.count, 0)}</div><div class="label">assets adopted</div></div>
+  <div class="stat"><div class="num">${all.filter((r) => r.manifest.some((m) => m.duration || m.width)).length}</div><div class="label">with ffprobe metadata</div></div>
+  <div class="stat"><div class="num">${(() => {
+    const refs = all.flatMap((r) => r.assetRefs);
+    const covered = refs.filter((c) => c.covered).length;
+    return refs.length > 0 ? Math.round((covered / refs.length) * 100) + "%" : "—";
+  })()}</div><div class="label">composition coverage</div></div>
+</div>
+
+<h2>Results matrix</h2>
+<table>
+  <thead><tr><th>Block</th><th>Baseline</th><th>Adopted</th><th>Metadata</th><th>Cache hit</th><th>Miss handling</th></tr></thead>
+  <tbody>${rows}</tbody>
+</table>
+
+<h2>Before / after comparisons</h2>
+${details}
+
+<div class="verdict ${passed.length >= 3 ? "ship" : "wait"}">
+  ${
+    passed.length >= 3
+      ? `<strong>Ship it.</strong> ${passed.length}/${all.length} blocks adopted successfully with metadata. Resolve cache hits work. Miss handling is clean.`
+      : `<strong>Needs work.</strong> Only ${passed.length} blocks adopted. Check the failures above.`
+  }
+</div>
+</div>`;
+}
+
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+console.log("media-use eval · running against registry blocks...\n");
+
+const results = [];
+for (const block of TEST_BLOCKS) {
+  const fullPath = join(REPO_ROOT, block);
+  if (!existsSync(fullPath)) {
+    console.log(`  skip ${basename(block)} (not found)`);
+    results.push(null);
+    continue;
+  }
+  process.stdout.write(`  ${basename(block)}...`);
+  const result = evalBlock(block);
+  if (result) {
+    console.log(
+      ` ${result.adopted.count} adopted, ${result.manifest.filter((m) => m.duration || m.width).length} with metadata`,
+    );
+  } else {
+    console.log(" failed");
+  }
+  results.push(result);
+}
+
+const report = generateReport(results);
+const outPath = join(SCRIPT_DIR, "..", "eval-report.html");
+writeFileSync(outPath, report);
+console.log(`\nReport: ${outPath}`);
diff --git a/.claude/skills/media-use/scripts/lib/config-lock.mjs b/.claude/skills/media-use/scripts/lib/config-lock.mjs
new file mode 100644
index 0000000..dd5c5ca
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/config-lock.mjs
@@ -0,0 +1,45 @@
+// The one lock on ~/.hyperframes/config.json, for the CLI, its auto-update step and media-use. The auto-update step
+// embeds this function's source, so it must use only its arguments and globals.
+export function withFileLock(lockPath, fs, task) {
+  const token = `${process.pid}-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  const started = Date.now();
+  for (;;) {
+    let fd;
+    try {
+      fd = fs.openSync(lockPath, "wx");
+    } catch (error) {
+      if (error.code !== "EEXIST") throw error;
+      // Never taken over: a lock older than any hold was left by a process that stopped, and a person removes it.
+      let leftover = false;
+      try {
+        leftover = Date.now() - fs.statSync(lockPath).mtimeMs > 5000;
+      } catch {}
+      if (leftover || Date.now() - started > 10000)
+        throw Object.assign(
+          new Error(
+            `Settings are locked by another hyperframes process. If none is running, delete ${lockPath}`,
+          ),
+          { code: "HF_SETTINGS_LOCKED" },
+        );
+      Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, 25);
+      continue;
+    }
+    try {
+      fs.writeSync(fd, token);
+    } catch (error) {
+      fs.rmSync(lockPath, { force: true });
+      throw error;
+    } finally {
+      fs.closeSync(fd);
+    }
+    break;
+  }
+  try {
+    return task();
+  } finally {
+    // No code removes another's lock, so release needs no check (only a person deleting a live one defeats it).
+    try {
+      fs.rmSync(lockPath);
+    } catch {}
+  }
+}
diff --git a/.claude/skills/media-use/scripts/lib/cutlist.mjs b/.claude/skills/media-use/scripts/lib/cutlist.mjs
new file mode 100644
index 0000000..9cc7d13
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/cutlist.mjs
@@ -0,0 +1,191 @@
+import { normalizeWords } from "./words.mjs";
+
+const MIN_SEGMENT_SECONDS = 0.2;
+const SILENCE_PAD_SECONDS = 0.15;
+
+export function compileCutList(transcript, opts = {}) {
+  const words = normalizeWords(transcript);
+  if (opts.keep != null && hasRemovalSource(opts)) {
+    throw new Error("--keep is mutually exclusive with removal options");
+  }
+
+  if (opts.keep != null) {
+    const duration = durationFrom(words, opts);
+    const ranges = parseTimeRanges(opts.keep);
+    return finalizeKept(duration != null ? clampRanges(ranges, duration) : ranges);
+  }
+
+  const duration = durationFrom(words, opts);
+  if (!duration) return [];
+
+  const removals = [
+    ...parseTimeRanges(opts.remove),
+    ...wordIndexRanges(words, opts.removeWords),
+    ...fillerRanges(words, opts.removeFillers),
+    ...silenceRanges(words, opts.cutSilence),
+  ];
+  const mergedRemovals = mergeRanges(clampRanges(removals, duration));
+  return finalizeKept(invertRanges(mergedRemovals, duration));
+}
+
+function hasRemovalSource(opts) {
+  return (
+    opts.remove != null ||
+    opts.removeWords != null ||
+    opts.removeFillers != null ||
+    opts.cutSilence != null
+  );
+}
+
+function durationFrom(words, opts) {
+  const explicit = Number(opts.duration ?? opts.totalDuration);
+  if (Number.isFinite(explicit) && explicit > 0) return explicit;
+  const last = words.at(-1);
+  return last && Number.isFinite(last.end) && last.end > 0 ? last.end : null;
+}
+
+function parseTimeRanges(value) {
+  if (value == null || value === false || value === "") return [];
+  if (typeof value === "string") {
+    return value
+      .split(",")
+      .map((part) => part.trim())
+      .filter(Boolean)
+      .map(parseRangeString);
+  }
+  if (!Array.isArray(value)) throw new Error("range list must be a string or array");
+  return value.map((range) => {
+    if (Array.isArray(range)) return cleanRange(Number(range[0]), Number(range[1]));
+    return cleanRange(Number(range?.start), Number(range?.end));
+  });
+}
+
+function parseRangeString(value) {
+  const match = value.match(/^([0-9]*\.?[0-9]+)\s*-\s*([0-9]*\.?[0-9]+)$/);
+  if (!match) throw new Error(`invalid range: ${value}`);
+  return cleanRange(Number(match[1]), Number(match[2]));
+}
+
+function cleanRange(start, end) {
+  if (!Number.isFinite(start) || !Number.isFinite(end)) {
+    throw new Error("range start/end must be finite numbers");
+  }
+  if (end < start) throw new Error(`range end ${end} is before start ${start}`);
+  return { start, end };
+}
+
+function wordIndexRanges(words, value) {
+  if (value == null || value === false || value === "") return [];
+  const ranges = typeof value === "string" ? value.split(",") : value;
+  if (!Array.isArray(ranges)) throw new Error("--remove-words must be a string or array");
+  return ranges
+    .map((range) => (typeof range === "string" ? range.trim() : range))
+    .filter(Boolean)
+    .map((range) => {
+      const [first, last = first] =
+        typeof range === "string" ? range.split("-").map((n) => n.trim()) : range;
+      const startIndex = Number(first);
+      const endIndex = Number(last);
+      if (!Number.isInteger(startIndex) || !Number.isInteger(endIndex)) {
+        throw new Error(`invalid word range: ${range}`);
+      }
+      if (startIndex < 0 || endIndex < startIndex || endIndex >= words.length) {
+        throw new Error(`word range out of bounds: ${range}`);
+      }
+      return { start: words[startIndex].start, end: words[endIndex].end };
+    });
+}
+
+function fillerRanges(words, value) {
+  if (value == null || value === false || value === "") return [];
+  const fillers = Array.isArray(value)
+    ? value
+    : String(value)
+        .split(",")
+        .map((s) => s.trim());
+  const set = new Set(fillers.filter(Boolean).map(bareToken));
+  if (set.size === 0) return [];
+  // Whisper emits words with attached punctuation and arbitrary case
+  // ("UM," / "Um."), so compare bare tokens.
+  return words
+    .filter((word) => set.has(bareToken(word.text)))
+    .map((word) => ({ start: word.start, end: word.end }));
+}
+
+function bareToken(text) {
+  return String(text)
+    .toLowerCase()
+    .replace(/^[^\p{L}\p{N}]+|[^\p{L}\p{N}]+$/gu, "");
+}
+
+function silenceRanges(words, value) {
+  if (value == null || value === false || value === "") return [];
+  const threshold = Number(value);
+  if (!Number.isFinite(threshold) || threshold <= 0) {
+    throw new Error("--cut-silence must be a positive number");
+  }
+  const ranges = [];
+  for (let i = 0; i < words.length - 1; i++) {
+    const current = words[i];
+    const next = words[i + 1];
+    const gap = next.start - current.end;
+    if (gap <= threshold) continue;
+    const start = current.end + SILENCE_PAD_SECONDS;
+    const end = next.start - SILENCE_PAD_SECONDS;
+    if (end > start) ranges.push({ start, end });
+  }
+  return ranges;
+}
+
+function clampRanges(ranges, duration) {
+  return ranges
+    .map((range) => ({
+      start: Math.max(0, Math.min(duration, range.start)),
+      end: Math.max(0, Math.min(duration, range.end)),
+    }))
+    .filter((range) => range.end > range.start);
+}
+
+function mergeRanges(ranges) {
+  const sorted = ranges
+    .map((range) => ({ start: round6(range.start), end: round6(range.end) }))
+    .sort((a, b) => a.start - b.start || a.end - b.end);
+  const merged = [];
+  for (const range of sorted) {
+    const prev = merged.at(-1);
+    if (prev && range.start <= prev.end) {
+      prev.end = Math.max(prev.end, range.end);
+    } else {
+      merged.push({ ...range });
+    }
+  }
+  return merged;
+}
+
+function invertRanges(removals, duration) {
+  const kept = [];
+  let cursor = 0;
+  for (const range of removals) {
+    if (range.start > cursor) kept.push({ start: cursor, end: range.start });
+    cursor = Math.max(cursor, range.end);
+  }
+  if (cursor < duration) kept.push({ start: cursor, end: duration });
+  return kept;
+}
+
+// Range bounds are rounded only to shed float noise, never to the millisecond:
+// these values become ffmpeg's -ss/-to, where a millisecond is wide enough to
+// step a boundary onto the next frame at 29.97/30/60 fps.
+function finalizeKept(ranges) {
+  return mergeRanges(ranges)
+    .map((range) => ({ start: round6(range.start), end: round6(range.end) }))
+    .filter((range) => round3(range.end - range.start) >= MIN_SEGMENT_SECONDS);
+}
+
+function round6(n) {
+  return Math.round(Number(n) * 1e6) / 1e6;
+}
+
+function round3(n) {
+  return Math.round(Number(n) * 1000) / 1000;
+}
diff --git a/.claude/skills/media-use/scripts/lib/duck.mjs b/.claude/skills/media-use/scripts/lib/duck.mjs
new file mode 100644
index 0000000..dcf8177
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/duck.mjs
@@ -0,0 +1,96 @@
+import { wordListsFromMediaMeta } from "./words.mjs";
+
+// audio_meta.json word times are relative to each line's own file.
+export function speechSpans(meta, { mergeGap = 0.6, offsets, sequential = false, gap = 0 } = {}) {
+  const merge = Number(mergeGap);
+  const lists = wordListsFromMediaMeta(meta);
+  const voices = Array.isArray(meta?.voices) ? meta.voices : [];
+  if (lists.filter((words) => words.length > 0).length > 1 && !offsets && !sequential) {
+    throw new Error(
+      "audio_meta has multiple voice lines with file-relative times; pass --sequential or --offsets so spans land at composition time",
+    );
+  }
+  const intervals = [];
+  let cursor = 0;
+  for (let i = 0; i < lists.length; i++) {
+    const voice = voices[i];
+    let offset = 0;
+    if (offsets) {
+      if (lists[i].length === 0) continue;
+      const id = voice?.id ?? String(i);
+      if (!(id in offsets)) throw new Error(`--offsets is missing voice "${id}"`);
+      offset = Number(offsets[id]) || 0;
+    } else if (sequential) {
+      offset = cursor;
+      const lineDuration = Number(voice?.duration_s) || Math.max(...lists[i].map((w) => w.end), 0);
+      cursor += lineDuration + (Number(gap) || 0);
+    }
+    for (const word of lists[i]) {
+      if (word.end > word.start)
+        intervals.push({ start: word.start + offset, end: word.end + offset });
+    }
+  }
+  return mergeIntervals(intervals, Number.isFinite(merge) && merge >= 0 ? merge : 0.6);
+}
+
+export function duckKeyframes(
+  spans,
+  { duck = 0.25, attack = 0.15, release = 0.4, baseVolume = 1 } = {},
+) {
+  const base = finiteOr(baseVolume, 1);
+  const ducked = round3(base * finiteOr(duck, 0.25));
+  const keyframes = [];
+  for (const span of spans) {
+    keyframes.push({
+      time: round3(Math.max(0, finiteOr(span.start, 0))),
+      volume: ducked,
+      duration: round3(finiteOr(attack, 0.15)),
+    });
+    keyframes.push({
+      time: round3(Math.max(0, finiteOr(span.end, 0))),
+      volume: round3(base),
+      duration: round3(finiteOr(release, 0.4)),
+    });
+  }
+  return keyframes.sort((a, b) => a.time - b.time);
+}
+
+/** Volume lane for `data-automation`: composition-time keyframes as clip-local ramps. */
+export function duckLane(keyframes, { clipStart = 0, baseVolume = 1 } = {}) {
+  const start = finiteOr(clipStart, 0);
+  const points = [{ t: 0, v: round3(finiteOr(baseVolume, 1)) }];
+  const push = (t, v) => {
+    if (t > points.at(-1).t) points.push({ t: round3(t), v });
+  };
+  for (const kf of keyframes) {
+    const t = Math.max(0, kf.time - start);
+    push(t, points.at(-1).v);
+    push(t + kf.duration, kf.volume);
+  }
+  return { version: 1, lanes: [{ target: "volume", points }] };
+}
+
+function mergeIntervals(intervals, mergeGap) {
+  const sorted = intervals
+    .map((range) => ({ start: round3(range.start), end: round3(range.end) }))
+    .sort((a, b) => a.start - b.start || a.end - b.end);
+  const merged = [];
+  for (const range of sorted) {
+    const prev = merged.at(-1);
+    if (prev && (range.start <= prev.end || range.start - prev.end < mergeGap)) {
+      prev.end = Math.max(prev.end, range.end);
+    } else {
+      merged.push({ ...range });
+    }
+  }
+  return merged;
+}
+
+function finiteOr(value, fallback) {
+  const n = Number(value);
+  return Number.isFinite(n) ? n : fallback;
+}
+
+function round3(n) {
+  return Math.round(Number(n) * 1000) / 1000;
+}
diff --git a/.claude/skills/media-use/scripts/lib/error-diffusion.mjs b/.claude/skills/media-use/scripts/lib/error-diffusion.mjs
new file mode 100644
index 0000000..e59a9c5
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/error-diffusion.mjs
@@ -0,0 +1,230 @@
+export const ERROR_DIFFUSION_ALGORITHMS = {
+  "floyd-steinberg": {
+    kernel: [
+      [1, 0, 7],
+      [-1, 1, 3],
+      [0, 1, 5],
+      [1, 1, 1],
+    ],
+    divisor: 16,
+  },
+  atkinson: {
+    kernel: [
+      [1, 0, 1],
+      [2, 0, 1],
+      [-1, 1, 1],
+      [0, 1, 1],
+      [1, 1, 1],
+      [0, 2, 1],
+    ],
+    divisor: 8,
+  },
+  "jarvis-judice-ninke": {
+    kernel: [
+      [1, 0, 7],
+      [2, 0, 5],
+      [-2, 1, 3],
+      [-1, 1, 5],
+      [0, 1, 7],
+      [1, 1, 5],
+      [2, 1, 3],
+      [-2, 2, 1],
+      [-1, 2, 3],
+      [0, 2, 5],
+      [1, 2, 3],
+      [2, 2, 1],
+    ],
+    divisor: 48,
+  },
+  stucki: {
+    kernel: [
+      [1, 0, 8],
+      [2, 0, 4],
+      [-2, 1, 2],
+      [-1, 1, 4],
+      [0, 1, 8],
+      [1, 1, 4],
+      [2, 1, 2],
+      [-2, 2, 1],
+      [-1, 2, 2],
+      [0, 2, 4],
+      [1, 2, 2],
+      [2, 2, 1],
+    ],
+    divisor: 42,
+  },
+  burkes: {
+    kernel: [
+      [1, 0, 8],
+      [2, 0, 4],
+      [-2, 1, 2],
+      [-1, 1, 4],
+      [0, 1, 8],
+      [1, 1, 4],
+      [2, 1, 2],
+    ],
+    divisor: 32,
+  },
+  sierra: {
+    kernel: [
+      [1, 0, 5],
+      [2, 0, 3],
+      [-2, 1, 2],
+      [-1, 1, 4],
+      [0, 1, 5],
+      [1, 1, 4],
+      [2, 1, 2],
+      [-1, 2, 2],
+      [0, 2, 3],
+      [1, 2, 2],
+    ],
+    divisor: 32,
+  },
+  "sierra-lite": {
+    kernel: [
+      [1, 0, 2],
+      [-1, 1, 1],
+      [0, 1, 1],
+    ],
+    divisor: 4,
+  },
+  "two-row-sierra": {
+    kernel: [
+      [1, 0, 4],
+      [2, 0, 3],
+      [-2, 1, 1],
+      [-1, 1, 2],
+      [0, 1, 3],
+      [1, 1, 2],
+      [2, 1, 1],
+    ],
+    divisor: 16,
+  },
+};
+
+const DEFAULTS = {
+  algorithm: "floyd-steinberg",
+  brightness: 1,
+  contrast: 1.2,
+  detail: 1,
+  palette: ["#000000", "#ffffff"],
+  pointSize: 3,
+};
+
+export function errorDiffusionBufferLength(width, height, pointSize) {
+  return Math.ceil(width / pointSize) * Math.ceil(height / pointSize) * 3;
+}
+
+export function applyErrorDiffusionRgba(data, width, height, options = {}, errorBuffer) {
+  if (!Number.isInteger(width) || width < 1 || !Number.isInteger(height) || height < 1) {
+    throw new Error("width and height must be positive integers");
+  }
+  if (!data || data.length !== width * height * 4) {
+    throw new Error(`RGBA data must contain ${width * height * 4} bytes`);
+  }
+
+  const algorithm = options.algorithm ?? DEFAULTS.algorithm;
+  const diffusion = ERROR_DIFFUSION_ALGORITHMS[algorithm];
+  if (!diffusion) throw new Error(`unknown error-diffusion algorithm: ${algorithm}`);
+
+  const pointSize = integerInRange(options.pointSize ?? DEFAULTS.pointSize, 1, 20, "pointSize");
+  const brightness = numberInRange(options.brightness ?? DEFAULTS.brightness, 0.5, 2, "brightness");
+  const contrast = numberInRange(options.contrast ?? DEFAULTS.contrast, 0.5, 2, "contrast");
+  const detail = numberInRange(options.detail ?? DEFAULTS.detail, 0.1, 1, "detail");
+  const palette = parsePalette(options.palette ?? DEFAULTS.palette);
+  const blockColumns = Math.ceil(width / pointSize);
+  const blockRows = Math.ceil(height / pointSize);
+  const errorLength = errorDiffusionBufferLength(width, height, pointSize);
+  const errors = errorBuffer ?? new Float32Array(errorLength);
+  if (!(errors instanceof Float32Array) || errors.length !== errorLength) {
+    throw new Error(`errorBuffer must be a Float32Array of length ${errorLength}`);
+  }
+  errors.fill(0);
+
+  const centerOffset = Math.floor(pointSize / 2);
+  for (let blockRow = 0; blockRow < blockRows; blockRow++) {
+    const blockY = blockRow * pointSize;
+    for (let blockColumn = 0; blockColumn < blockColumns; blockColumn++) {
+      const blockX = blockColumn * pointSize;
+      const centerX = Math.min(blockX + centerOffset, width - 1);
+      const centerY = Math.min(blockY + centerOffset, height - 1);
+      const rgbaIndex = (centerY * width + centerX) * 4;
+      const errorIndex = (blockRow * blockColumns + blockColumn) * 3;
+      const red = correctedChannel(data[rgbaIndex], errors[errorIndex], brightness, contrast);
+      const green = correctedChannel(
+        data[rgbaIndex + 1],
+        errors[errorIndex + 1],
+        brightness,
+        contrast,
+      );
+      const blue = correctedChannel(
+        data[rgbaIndex + 2],
+        errors[errorIndex + 2],
+        brightness,
+        contrast,
+      );
+      const luminance = 0.299 * red + 0.587 * green + 0.114 * blue;
+      const output = palette[Math.min(palette.length - 1, Math.floor(luminance * palette.length))];
+
+      for (let y = blockY; y < Math.min(blockY + pointSize, height); y++) {
+        for (let x = blockX; x < Math.min(blockX + pointSize, width); x++) {
+          const outputIndex = (y * width + x) * 4;
+          data[outputIndex] = Math.round(output[0] * 255);
+          data[outputIndex + 1] = Math.round(output[1] * 255);
+          data[outputIndex + 2] = Math.round(output[2] * 255);
+        }
+      }
+
+      for (const [dx, dy, weight] of diffusion.kernel) {
+        const targetColumn = blockColumn + dx;
+        const targetRow = blockRow + dy;
+        if (
+          targetColumn < 0 ||
+          targetColumn >= blockColumns ||
+          targetRow < 0 ||
+          targetRow >= blockRows
+        ) {
+          continue;
+        }
+        const target = (targetRow * blockColumns + targetColumn) * 3;
+        const scale = (weight / diffusion.divisor) * detail;
+        errors[target] += (red - output[0]) * scale;
+        errors[target + 1] += (green - output[1]) * scale;
+        errors[target + 2] += (blue - output[2]) * scale;
+      }
+    }
+  }
+  return data;
+}
+
+function correctedChannel(byte, error, brightness, contrast) {
+  return Math.min(1, Math.max(0, ((byte / 255 - 0.5) * contrast + 0.5) * brightness + error));
+}
+
+function parsePalette(colors) {
+  if (!Array.isArray(colors) || colors.length < 2 || colors.length > 6) {
+    throw new Error("palette must contain 2 to 6 colors");
+  }
+  return colors.map((color) => {
+    const match = /^#([0-9a-f]{6})$/i.exec(color);
+    if (!match) throw new Error(`palette color must use #rrggbb: ${color}`);
+    const value = Number.parseInt(match[1], 16);
+    return [(value >> 16) / 255, ((value >> 8) & 255) / 255, (value & 255) / 255];
+  });
+}
+
+function numberInRange(value, min, max, name) {
+  const number = Number(value);
+  if (!Number.isFinite(number) || number < min || number > max) {
+    throw new Error(`${name} must be between ${min} and ${max}`);
+  }
+  return number;
+}
+
+function integerInRange(value, min, max, name) {
+  const number = Number(value);
+  if (!Number.isInteger(number) || number < min || number > max) {
+    throw new Error(`${name} must be an integer between ${min} and ${max}`);
+  }
+  return number;
+}
diff --git a/.claude/skills/media-use/scripts/lib/index-gen.mjs b/.claude/skills/media-use/scripts/lib/index-gen.mjs
new file mode 100644
index 0000000..c25ee6d
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/index-gen.mjs
@@ -0,0 +1,63 @@
+import { writeFileSync, mkdirSync } from "node:fs";
+import { dirname } from "node:path";
+import { currentRecords, indexPath } from "./manifest.mjs";
+
+function pad(str, len) {
+  return String(str ?? "").padEnd(len);
+}
+
+function formatDur(record) {
+  if (record.duration == null) return "—";
+  return `${record.duration}s`;
+}
+
+function formatDims(record) {
+  if (record.width && record.height) return `${record.width}×${record.height}`;
+  if (record.type === "icon" && record.transparent) return "svg";
+  return "—";
+}
+
+export function generateIndexContent(records) {
+  const count = records.length;
+  const header = `# .media · ${count} asset${count === 1 ? "" : "s"}\n`;
+  if (count === 0) return header;
+
+  const cols = { id: 4, type: 5, dur: 4, dims: 5, path: 5, desc: 11 };
+  for (const r of records) {
+    cols.id = Math.max(cols.id, (r.id ?? "").length);
+    cols.type = Math.max(cols.type, (r.type ?? "").length);
+    cols.dur = Math.max(cols.dur, formatDur(r).length);
+    cols.dims = Math.max(cols.dims, formatDims(r).length);
+    cols.path = Math.max(cols.path, (r.path ?? "").length);
+  }
+
+  const heading =
+    pad("id", cols.id + 2) +
+    pad("type", cols.type + 2) +
+    pad("dur", cols.dur + 2) +
+    pad("dims", cols.dims + 2) +
+    pad("path", cols.path + 2) +
+    "description";
+
+  const lines = [header, heading];
+  for (const r of records) {
+    lines.push(
+      pad(r.id, cols.id + 2) +
+        pad(r.type, cols.type + 2) +
+        pad(formatDur(r), cols.dur + 2) +
+        pad(formatDims(r), cols.dims + 2) +
+        pad(r.path, cols.path + 2) +
+        (r.description ?? ""),
+    );
+  }
+  return lines.join("\n") + "\n";
+}
+
+export function regenerateIndex(projectDir) {
+  const records = currentRecords(projectDir);
+  const content = generateIndexContent(records);
+  const p = indexPath(projectDir);
+  mkdirSync(dirname(p), { recursive: true });
+  writeFileSync(p, content);
+  return content;
+}
diff --git a/.claude/skills/media-use/scripts/lib/manifest.mjs b/.claude/skills/media-use/scripts/lib/manifest.mjs
new file mode 100644
index 0000000..d4b6e4f
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/manifest.mjs
@@ -0,0 +1,282 @@
+import {
+  readFileSync,
+  appendFileSync,
+  mkdirSync,
+  existsSync,
+  readdirSync,
+  openSync,
+  closeSync,
+  writeFileSync,
+  rmSync,
+  statSync,
+} from "node:fs";
+import { randomBytes } from "node:crypto";
+import { basename, join } from "node:path";
+
+const MANIFEST_FILE = "manifest.jsonl";
+const INDEX_FILE = "index.md";
+
+const TYPE_DIRS = {
+  bgm: "audio/bgm",
+  sfx: "audio/sfx",
+  voice: "audio/voice",
+  image: "images",
+  icon: "images",
+  logo: "images",
+  brand: "images",
+  video: "video",
+  grade: "luts",
+  lut: "luts",
+  recipe: "recipes",
+};
+
+export function mediaDir(projectDir) {
+  return join(projectDir, ".media");
+}
+
+export function manifestPath(projectDir) {
+  return join(mediaDir(projectDir), MANIFEST_FILE);
+}
+
+export function indexPath(projectDir) {
+  return join(mediaDir(projectDir), INDEX_FILE);
+}
+
+export function typeSubdir(type) {
+  const sub = TYPE_DIRS[type];
+  if (!sub) throw new Error(`unknown media type: ${type}`);
+  return sub;
+}
+
+export function typeDirPath(projectDir, type) {
+  return join(mediaDir(projectDir), typeSubdir(type));
+}
+
+export function readManifest(projectDir) {
+  const p = manifestPath(projectDir);
+  if (!existsSync(p)) return [];
+  const raw = readFileSync(p, "utf8");
+  const records = [];
+  for (const line of raw.split(/\r?\n/)) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+    try {
+      records.push(JSON.parse(trimmed));
+    } catch {
+      // ponytail: skip malformed lines, don't crash
+    }
+  }
+  return records;
+}
+
+export function appendRecord(projectDir, record) {
+  const dir = mediaDir(projectDir);
+  mkdirSync(dir, { recursive: true });
+  const typeDir = typeDirPath(projectDir, record.type);
+  mkdirSync(typeDir, { recursive: true });
+
+  const p = manifestPath(projectDir);
+  const line = JSON.stringify(record) + "\n";
+  appendFileSync(p, line);
+}
+
+/** Sources that mean the agent made or fetched the file; any other file is the person's own. */
+export const AGENT_SOURCES = ["generated", "search", "bundled"];
+
+/** The record a path has now: the manifest only appends, so the last one for a path wins. */
+export function latestRecordFor(projectDir, path) {
+  return readManifest(projectDir).findLast((record) => record.path === path);
+}
+
+/** Records with every older record for the same path dropped, since the last one for a path is its record. */
+export function currentRecords(projectDir) {
+  const records = readManifest(projectDir);
+  const last = new Map(records.map((record, index) => [record.path, index]));
+  return records.filter((record, index) => !record.path || last.get(record.path) === index);
+}
+
+/** Records a file already in the project where it is, unless its current record already says the same thing. */
+export function recordInPlace(
+  projectDir,
+  { type, path, source, description, duration, provenance },
+) {
+  const fields = {
+    type,
+    path,
+    source,
+    description: description || basename(path),
+    ...(duration != null && { duration: Math.round(duration * 10) / 10 }),
+  };
+  return withMediaLock(projectDir, () => {
+    const latest = latestRecordFor(projectDir, path);
+    const same = ["source", "description", "duration"].every(
+      (key) => latest?.[key] === fields[key],
+    );
+    if (latest && same) return latest;
+    const record = { id: nextFreeId(projectDir, type), ...fields, provenance };
+    appendRecord(projectDir, record);
+    return record;
+  });
+}
+
+// Match prompts forgivingly. Agents rarely re-emit a byte-identical intent, so
+// keying cache lookups on exact equality meant "Calm piano" and "calm  piano"
+// re-searched and re-downloaded. Normalize (trim, lowercase, collapse internal
+// whitespace) on both sides; the raw prompt is still stored for audit.
+export function normalizePrompt(prompt) {
+  return String(prompt ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, " ");
+}
+
+export function findByPrompt(projectDir, prompt, type) {
+  const key = normalizePrompt(prompt);
+  if (!key) return null;
+  const records = currentRecords(projectDir);
+  return (
+    records.find(
+      (r) => normalizePrompt(r.provenance?.prompt) === key && (type == null || r.type === type),
+    ) || null
+  );
+}
+
+export function findByEntity(projectDir, entity) {
+  const lower = entity.toLowerCase();
+  const records = currentRecords(projectDir);
+  return records.find((r) => r.entity && r.entity.toLowerCase() === lower) || null;
+}
+
+export function nextId(projectDir, type) {
+  const records = readManifest(projectDir);
+  const prefix = type;
+  let max = 0;
+  for (const r of records) {
+    if (r.type !== type) continue;
+    const m = r.id?.match(new RegExp(`^${prefix}_(\\d+)$`));
+    if (m) max = Math.max(max, parseInt(m[1], 10));
+  }
+  return `${prefix}_${String(max + 1).padStart(3, "0")}`;
+}
+
+// Sync sleep (no busy-spin) for the allocation lock retry.
+function sleepMs(ms) {
+  Atomics.wait(new Int32Array(new SharedArrayBuffer(4)), 0, 0, ms);
+}
+
+// Coarse per-project lock so concurrent resolves don't race on id allocation.
+// ponytail: one lock file with a 15s stale-steal (a crashed holder can't wedge
+// the project); fine for agent-scale concurrency — revisit if throughput needs
+// finer locking. Date.now() is available here (a normal Node CLI, not a
+// workflow DSL), so mtime-based staleness is safe.
+const LOCK_STALE_MS = 15000;
+const LOCK_TIMEOUT_MS = 20000;
+
+function withLock(dir, fn) {
+  const lock = join(dir, ".lock");
+  const start = Date.now();
+  for (;;) {
+    try {
+      closeSync(openSync(lock, "wx")); // O_EXCL: atomic acquire
+      break;
+    } catch (err) {
+      if (err.code !== "EEXIST") throw err;
+      try {
+        if (Date.now() - statSync(lock).mtimeMs > LOCK_STALE_MS) {
+          rmSync(lock, { force: true }); // steal a stale lock from a dead holder
+          continue;
+        }
+      } catch {
+        continue; // lock vanished between check and stat — retry the acquire
+      }
+      if (Date.now() - start > LOCK_TIMEOUT_MS) {
+        throw new Error("media-use: timed out acquiring .media/.lock");
+      }
+      sleepMs(25);
+    }
+  }
+  try {
+    return fn();
+  } finally {
+    rmSync(lock, { force: true });
+  }
+}
+
+/** Runs `fn` holding the project's `.media/.lock`, so concurrent resolves take turns on what it guards. */
+export function withMediaLock(projectDir, fn) {
+  mkdirSync(mediaDir(projectDir), { recursive: true });
+  return withLock(mediaDir(projectDir), fn);
+}
+
+// Atomically allocate the next free id for `type` AND reserve it on disk, so a
+// slow download/copy between allocation and appendRecord can't let a concurrent
+// caller grab the same id (the MU-23 clobber). Under the lock we take the max id
+// across BOTH the manifest and any already-reserved files in the type dir, then
+// O_EXCL-create an empty marker under core's atomic temp name, which Studio's
+// project history skips. Returns { id, localPath, markerPath }.
+export function allocateId(projectDir, type, ext) {
+  mkdirSync(typeDirPath(projectDir, type), { recursive: true });
+  return withMediaLock(projectDir, () => {
+    const id = nextFreeId(projectDir, type);
+    const localPath = `.media/${typeSubdir(type)}/${id}${ext}`;
+    // Same shape as core atomicTempPath: an empty file at the final name would be committed.
+    const markerPath = `${join(projectDir, localPath)}.hf${randomBytes(3).toString("hex")}.tmp`;
+    writeFileSync(markerPath, "", { flag: "wx" }); // durable reservation
+    return { id, localPath, markerPath };
+  });
+}
+
+// Call under the lock: counts recorded ids and ids reserved by a file not yet recorded.
+function nextFreeId(projectDir, type) {
+  const re = new RegExp(`^${type}_(\\d+)`);
+  let max = 0;
+  for (const r of readManifest(projectDir)) {
+    if (r.type !== type) continue;
+    const m = r.id?.match(re);
+    if (m) max = Math.max(max, parseInt(m[1], 10));
+  }
+  const typeDir = typeDirPath(projectDir, type);
+  for (const f of existsSync(typeDir) ? readdirSync(typeDir) : []) {
+    const m = f.match(re);
+    if (m) max = Math.max(max, parseInt(m[1], 10));
+  }
+  return `${type}_${String(max + 1).padStart(3, "0")}`;
+}
+
+function reservedFile(projectDir, type, ext) {
+  const allocation = allocateId(projectDir, type, ext);
+  return { ...allocation, fullPath: join(projectDir, allocation.localPath) };
+}
+
+function releaseReservation(reservation, committed) {
+  if (!committed) rmSync(reservation.fullPath, { force: true });
+  rmSync(reservation.markerPath, { force: true });
+}
+
+// A reservation is committed only when populate returns a non-null value.
+// Throwing/rejecting or returning null means no usable asset was produced, so
+// the reservation and any partial asset are released. Keeping this transaction
+// beside allocateId prevents provider/cache/LUT paths from forgetting the rollback.
+export function withReservedFileSync(projectDir, type, ext, populate) {
+  const reservation = reservedFile(projectDir, type, ext);
+  try {
+    const result = populate(reservation);
+    releaseReservation(reservation, result != null);
+    return result;
+  } catch (error) {
+    releaseReservation(reservation, false);
+    throw error;
+  }
+}
+
+export async function withReservedFile(projectDir, type, ext, populate) {
+  const reservation = reservedFile(projectDir, type, ext);
+  try {
+    const result = await populate(reservation);
+    releaseReservation(reservation, result != null);
+    return result;
+  } catch (error) {
+    releaseReservation(reservation, false);
+    throw error;
+  }
+}
diff --git a/.claude/skills/media-use/scripts/lib/media-fetch.mjs b/.claude/skills/media-use/scripts/lib/media-fetch.mjs
new file mode 100644
index 0000000..7664c2a
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/media-fetch.mjs
@@ -0,0 +1,85 @@
+// Media downloads use public HTTP(S) URLs. Validate every redirect target;
+// a provider result must meet the same host policy as a direct ingest URL.
+// Public HTTPS-to-HTTP redirects are allowed, matching direct HTTP support.
+// This is a literal-host policy, not DNS pinning: DNS resolution remains trusted.
+
+import { BlockList, isIP } from "node:net";
+
+const blocked = new BlockList();
+for (const [network, prefix] of [
+  ["0.0.0.0", 8],
+  ["10.0.0.0", 8],
+  ["100.64.0.0", 10],
+  ["127.0.0.0", 8],
+  ["169.254.0.0", 16],
+  ["172.16.0.0", 12],
+  ["192.0.0.0", 24],
+  ["192.0.2.0", 24],
+  ["192.88.99.0", 24],
+  ["192.168.0.0", 16],
+  ["198.18.0.0", 15],
+  ["198.51.100.0", 24],
+  ["203.0.113.0", 24],
+  ["224.0.0.0", 4],
+  ["240.0.0.0", 4],
+])
+  blocked.addSubnet(network, prefix, "ipv4");
+for (const [network, prefix] of [
+  ["::", 128],
+  ["::1", 128],
+  ["fc00::", 7],
+  ["fe80::", 10],
+  ["fec0::", 10],
+  ["ff00::", 8],
+  ["2001:db8::", 32],
+])
+  blocked.addSubnet(network, prefix, "ipv6");
+
+export function isPublicMediaUrl(value) {
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "http:" && url.protocol !== "https:") return false;
+    const host = url.hostname.replace(/\.$/, "");
+    if (
+      host === "localhost" ||
+      host.endsWith(".localhost") ||
+      host.endsWith(".local") ||
+      host.endsWith(".internal")
+    )
+      return false;
+    const address = host.replace(/^\[|\]$/g, "");
+    const family = isIP(address);
+    return family === 0 || !blocked.check(address, family === 4 ? "ipv4" : "ipv6");
+  } catch {
+    return false;
+  }
+}
+
+export async function fetchMedia(url, { method = "GET", signal, fetchImpl = fetch } = {}) {
+  let current = String(url);
+  for (let hop = 0; hop <= 5; hop++) {
+    if (!isPublicMediaUrl(current))
+      throw new Error("Media download blocked: URL is not public HTTP(S)");
+    const response = await fetchImpl(current, { method, signal, redirect: "manual" });
+    if (!(response.status >= 300 && response.status < 400)) return response;
+    const location = response.headers.get("location");
+    if (!location) return response;
+    await response.body?.cancel();
+    current = new URL(location, current).href;
+  }
+  throw new Error("Media download exceeded redirect limit");
+}
+
+// Stream and abort once the cap is crossed, so a lying or chunked body can't buffer past it.
+export async function readCappedBody(res, maxBytes, label) {
+  const declared = Number(res.headers.get("content-length"));
+  if (declared > maxBytes) throw new Error(`${label}: ${declared} bytes exceeds ${maxBytes} cap`);
+  const chunks = [];
+  let total = 0;
+  for await (const chunk of res.body) {
+    total += chunk.length;
+    if (total > maxBytes) throw new Error(`${label}: stream exceeds ${maxBytes} cap`);
+    chunks.push(chunk);
+  }
+  return Buffer.concat(chunks, total);
+}
diff --git a/.claude/skills/media-use/scripts/lib/media-home.mjs b/.claude/skills/media-use/scripts/lib/media-home.mjs
new file mode 100644
index 0000000..8a9128f
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/media-home.mjs
@@ -0,0 +1,20 @@
+import { homedir } from "node:os";
+import { join } from "node:path";
+
+// The one owner of where the person's media library lives. This repo's test runs set
+// HYPERFRAMES_MEDIA_HOME_REQUIRED, so a test that forgot HYPERFRAMES_MEDIA_HOME fails instead
+// of writing fixtures into the media library apps list as the person's own files.
+export function mediaHome() {
+  const override = process.env.HYPERFRAMES_MEDIA_HOME;
+  if (override) return override;
+  if (process.env.HYPERFRAMES_MEDIA_HOME_REQUIRED) {
+    throw new Error(
+      "media-use: a test reached the real ~/.media; set HYPERFRAMES_MEDIA_HOME to a temp dir",
+    );
+  }
+  return homedir();
+}
+
+export function globalMediaDir() {
+  return join(mediaHome(), ".media");
+}
diff --git a/.claude/skills/media-use/scripts/lib/npx-sync.mjs b/.claude/skills/media-use/scripts/lib/npx-sync.mjs
new file mode 100644
index 0000000..b1049cd
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/npx-sync.mjs
@@ -0,0 +1,57 @@
+import { existsSync } from "node:fs";
+import { dirname, join } from "node:path";
+
+function resolveNpxCliPath(env, pathExists) {
+  const npmExecPath = env.npm_execpath;
+  const nodeExecPath = env.npm_node_execpath || process.execPath;
+  if (npmExecPath) {
+    const fileName = npmExecPath.replace(/\\/g, "/").split("/").pop()?.toLowerCase();
+    const candidate =
+      fileName === "npx-cli.js" ? npmExecPath : join(dirname(npmExecPath), "npx-cli.js");
+    if (pathExists(candidate)) return candidate;
+  }
+  const besideNode = join(dirname(nodeExecPath), "node_modules", "npm", "bin", "npx-cli.js");
+  return pathExists(besideNode) ? besideNode : null;
+}
+
+// Sync-spawn analog of the audio engine's spawnP, for execFileSync call sites
+// that must hard-fail (rather than fall through to another provider) when npx
+// cannot be resolved. On Windows a bare "npx" is npx.cmd, which
+// execFileSync/spawnSync cannot exec (spawnSync npx ENOENT) —
+// resolveSpawnCommand reroutes it through node + npx-cli.js, no shell:true.
+//
+// `platform`/`env`/`pathExists` params (defaulting to the real values) exist
+// so tests can exercise the win32 branch without mocking node:child_process
+// (its ESM exports are non-configurable) — same idiom as spawnP and
+// localTtsGenerate.
+export function resolveNpxInvocation(
+  argv,
+  opts,
+  platform = process.platform,
+  env = process.env,
+  pathExists = existsSync,
+) {
+  const resolved =
+    platform !== "win32"
+      ? { cmd: "npx", args: argv, opts: { stdio: "ignore", ...opts } }
+      : (() => {
+          const nodeExecPath = env.npm_node_execpath || process.execPath;
+          const npxCliPath = resolveNpxCliPath(env, pathExists);
+          return npxCliPath
+            ? {
+                cmd: nodeExecPath,
+                args: [npxCliPath, ...argv.map((arg) => String(arg))],
+                opts: { stdio: "ignore", windowsHide: true, ...opts },
+              }
+            : null;
+        })();
+  if (!resolved) {
+    // npx-on-win32 with no resolvable npx-cli.js — same terminal condition
+    // spawnP warns about, surfaced as a throw for callers with no fallback.
+    throw new Error(
+      "cannot run npx on Windows: npm's npx-cli.js was not found " +
+        "(install npm with Node, or run via npx/npm run so npm_execpath is set)",
+    );
+  }
+  return resolved;
+}
diff --git a/.claude/skills/media-use/scripts/lib/parakeet-words.mjs b/.claude/skills/media-use/scripts/lib/parakeet-words.mjs
new file mode 100644
index 0000000..04df79c
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/parakeet-words.mjs
@@ -0,0 +1,27 @@
+// Merge Parakeet-MLX token timestamps into word timestamps.
+//
+// parakeet-mlx JSON emits SUB-WORD tokens (" H", "ello", ...) with per-token
+// start/end. Captions + transcript-cut need WORD timestamps, so join tokens
+// into words on the space boundary: a token whose text starts with a space
+// (or the very first token) begins a new word; the rest append. Output matches
+// the { words: [{ text, start, end }] } shape the rest of media-use consumes
+// (see words.mjs / cutlist.mjs).
+
+export function mergeTokensToWords(parakeet) {
+  const sentences = Array.isArray(parakeet?.sentences) ? parakeet.sentences : [];
+  const words = [];
+  for (const s of sentences) {
+    for (const t of s.tokens ?? []) {
+      const raw = typeof t.text === "string" ? t.text : "";
+      const startsWord = raw.startsWith(" ") || words.length === 0;
+      if (startsWord) {
+        words.push({ text: raw.trim(), start: t.start, end: t.end });
+      } else {
+        const w = words[words.length - 1];
+        w.text += raw;
+        w.end = t.end;
+      }
+    }
+  }
+  return { text: (parakeet?.text ?? "").trim(), words: words.filter((w) => w.text.length > 0) };
+}
diff --git a/.claude/skills/media-use/scripts/lib/prefs-store.mjs b/.claude/skills/media-use/scripts/lib/prefs-store.mjs
new file mode 100644
index 0000000..d28893f
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/prefs-store.mjs
@@ -0,0 +1,180 @@
+import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { globalMediaDir } from "./media-home.mjs";
+
+/**
+ * Remembered defaults — the lightweight tier of HyperFrames user memory.
+ *
+ * Two files, same shape as the rest of media-use's storage split:
+ * - project `.media/preferences.json` — committed with the repo, so the whole
+ *   team inherits it; written every time a brief answer is confirmed.
+ * - user `~/.media/preferences.json` — personal, cross-repo. A key is promoted
+ *   here only once the same value has been confirmed in two different projects
+ *   (`PROMOTE_AT`), so a one-off choice never pollutes the global defaults.
+ *   Pre-promotion evidence accumulates in the user file's `sightings` ledger —
+ *   project files can't see each other, so the cross-project count has to live
+ *   user-side.
+ *
+ * Consumption contract (media-use references/memory.md): a remembered
+ * value becomes the recommended option with a receipt naming its source — it
+ * never skips a question, and explicit request content always wins.
+ */
+
+const PREFS_FILE = "preferences.json";
+
+/** Keys the brief contract records; `style_preset` is stored per workflow. */
+export const PREFERENCE_KEYS = [
+  "destination",
+  "aspect",
+  "language",
+  "flow",
+  "storyboard",
+  "voice",
+  "style_preset",
+];
+
+/** A value must be confirmed in this many distinct projects to go user-tier. */
+export const PROMOTE_AT = 2;
+
+export function projectPrefsPath(projectDir) {
+  return join(resolve(projectDir), ".media", PREFS_FILE);
+}
+
+export function userPrefsPath() {
+  return join(globalMediaDir(), PREFS_FILE);
+}
+
+function emptyFile() {
+  return { version: 1, preferences: {}, sightings: {} };
+}
+
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+/** Tolerant read — a missing or malformed file counts as empty. */
+function readPrefsFile(path) {
+  try {
+    if (!existsSync(path)) return emptyFile();
+    const parsed = JSON.parse(readFileSync(path, "utf8"));
+    if (!isRecord(parsed)) return emptyFile();
+    return {
+      version: 1,
+      preferences: isRecord(parsed.preferences) ? parsed.preferences : {},
+      sightings: isRecord(parsed.sightings) ? parsed.sightings : {},
+    };
+  } catch {
+    return emptyFile();
+  }
+}
+
+/** Atomic write (tmp + rename) so a crash never leaves a torn file. */
+function writePrefsFile(path, file) {
+  mkdirSync(dirname(path), { recursive: true });
+  const tmp = `${path}.tmp`;
+  writeFileSync(tmp, `${JSON.stringify(file, null, 2)}\n`);
+  renameSync(tmp, path);
+}
+
+/** `style_preset` entries are stored per workflow as `style_preset.<workflow>`. */
+export function preferenceKeyFor(key, workflow) {
+  return key === "style_preset" && workflow ? `style_preset.${workflow}` : key;
+}
+
+function validEntry(entry) {
+  return isRecord(entry) && typeof entry.value === "string" && entry.value.length > 0;
+}
+
+/**
+ * The merged view the brief reads: user-tier promoted entries first, project
+ * entries on top (project wins). Each entry carries `source` plus the receipt
+ * material (`confirmed_in`, `updated_at`).
+ */
+export function mergedPreferences(projectDir) {
+  const user = readPrefsFile(userPrefsPath());
+  const project = readPrefsFile(projectPrefsPath(projectDir));
+  const merged = {};
+  for (const [key, entry] of Object.entries(user.preferences)) {
+    if (validEntry(entry)) merged[key] = { ...entry, source: "user" };
+  }
+  for (const [key, entry] of Object.entries(project.preferences)) {
+    if (validEntry(entry)) merged[key] = { ...entry, source: "project" };
+  }
+  return merged;
+}
+
+function dedupe(list) {
+  return [...new Set(list)];
+}
+
+/**
+ * Project tier: same value accumulates confirmations; a changed value starts
+ * provenance over (the old confirmations vouched for the old value).
+ */
+function recordProjectTier(projectDir, fullKey, value, projectName, now) {
+  const path = projectPrefsPath(projectDir);
+  const file = readPrefsFile(path);
+  const previous = file.preferences[fullKey];
+  const keepProvenance = validEntry(previous) && previous.value === value;
+  const confirmedIn = keepProvenance
+    ? dedupe([...(Array.isArray(previous.confirmed_in) ? previous.confirmed_in : []), projectName])
+    : [projectName];
+  file.preferences[fullKey] = { value, confirmed_in: confirmedIn, updated_at: now };
+  writePrefsFile(path, file);
+  return confirmedIn;
+}
+
+/**
+ * User tier: accumulate this sighting in the ledger, and promote the key once
+ * the same value has been confirmed in PROMOTE_AT distinct projects.
+ */
+function recordUserSighting(fullKey, value, projectName, now) {
+  const path = userPrefsPath();
+  const file = readPrefsFile(path);
+  const keySightings = isRecord(file.sightings[fullKey]) ? file.sightings[fullKey] : {};
+  const seenIn = dedupe([
+    ...(Array.isArray(keySightings[value]) ? keySightings[value] : []),
+    projectName,
+  ]);
+  keySightings[value] = seenIn;
+  file.sightings[fullKey] = keySightings;
+  const promoted = seenIn.length >= PROMOTE_AT;
+  if (promoted) {
+    file.preferences[fullKey] = { value, confirmed_in: seenIn, updated_at: now };
+  }
+  writePrefsFile(path, file);
+  return promoted;
+}
+
+/**
+ * Record one confirmed brief answer. Always writes the project tier; feeds the
+ * user tier's sightings ledger and promotes once the same value has been
+ * confirmed in PROMOTE_AT distinct projects. Idempotent per project.
+ */
+export function recordPreference({ projectDir, key, value, workflow }) {
+  if (!PREFERENCE_KEYS.includes(key)) {
+    throw new Error(`unknown preference key: "${key}" (known: ${PREFERENCE_KEYS.join(", ")})`);
+  }
+  if (typeof value !== "string" || !value.trim()) {
+    throw new Error("a preference needs a non-empty string value");
+  }
+  if (key === "style_preset" && (!workflow || !String(workflow).trim())) {
+    throw new Error("style_preset is stored per workflow — pass --workflow <w>");
+  }
+  const fullKey = preferenceKeyFor(key, workflow);
+  const projectName = basename(resolve(projectDir));
+  const trimmed = value.trim();
+  const now = new Date().toISOString();
+
+  const confirmedIn = recordProjectTier(projectDir, fullKey, trimmed, projectName, now);
+
+  // Best-effort — a read-only home directory must never fail a brief.
+  let promoted = false;
+  try {
+    promoted = recordUserSighting(fullKey, trimmed, projectName, now);
+  } catch {
+    // The project record already landed; promotion just waits for next time.
+  }
+
+  return { key: fullKey, value: trimmed, confirmed_in: confirmedIn, promoted };
+}
diff --git a/.claude/skills/media-use/scripts/lib/recipe-store.mjs b/.claude/skills/media-use/scripts/lib/recipe-store.mjs
new file mode 100644
index 0000000..44b95ec
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/recipe-store.mjs
@@ -0,0 +1,370 @@
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import { basename, join, resolve } from "node:path";
+import { globalMediaDir } from "./media-home.mjs";
+import { appendRecord, mediaDir, nextId } from "./manifest.mjs";
+import { regenerateIndex } from "./index-gen.mjs";
+import { mergedPreferences } from "./prefs-store.mjs";
+
+// A filter keeps Node 22 off its native copy, which writes nothing under a non-ASCII path on Windows.
+const NON_ASCII_SAFE_DIR_COPY = { recursive: true, force: true, filter: () => true };
+
+/**
+ * Recipes — the heavyweight tier of HyperFrames user memory.
+ *
+ * A recipe is the full confirmed bundle for one video type: the frozen design
+ * spec (`frame.md`), the storyboard skeleton (structure with the content
+ * blanked), and the confirmed brief values — frozen after the run's final
+ * approval, reused to start the next video of the same type from everything
+ * already approved.
+ *
+ * Storage is **named folders**, not content-addressed cache entries: a recipe
+ * is an evolving bundle with a `version`, so re-freezing the same name bumps
+ * the version and archives the old folder as `<name>@v<N>`. Two tiers, same
+ * split as everything else in media-use: project `.media/recipes/<name>/`
+ * (committed) and user `~/.media/recipes/<name>/` (a freeze is already a
+ * confirmed bundle, so it promotes immediately — no two-project rule here).
+ */
+
+/** Frontmatter keys that describe THIS video, not the reusable type. */
+const FRONTMATTER_CONTENT_KEYS = new Set(["message", "audience", "mode"]);
+
+/** BRIEF.md frontmatter keys that describe this run, not the reusable type —
+ * a recipe never locks the run's shape, so these are always asked again. */
+const BRIEF_CONTENT_KEYS = new Set(["flow", "storyboard", "message", "audience"]);
+
+/** Per-frame metadata that is content, not structure. */
+const FRAME_CONTENT_KEYS = new Set([
+  "voiceover",
+  "vo",
+  "voice_over",
+  "narration",
+  "scene",
+  "description",
+  "summary",
+  "caption",
+  "asset_candidates",
+]);
+
+const FRAME_HEADING_RE = /^(#{2,3})\s+(?:frame|beat|scene)\s+\d+/i;
+
+export function projectRecipesDir(projectDir) {
+  return join(mediaDir(projectDir), "recipes");
+}
+
+export function userRecipesDir() {
+  return join(globalMediaDir(), "recipes");
+}
+
+export function slugifyRecipeName(name) {
+  const slug = String(name ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_]+/g, "-")
+    .replace(/[^a-z0-9-]/g, "")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+  if (!slug) throw new Error(`recipe name "${name}" has no usable characters`);
+  return slug;
+}
+
+function frameTitle(headingLine) {
+  const dash = headingLine.split(/\s+—\s+/)[1];
+  if (dash && dash.trim()) return dash.trim();
+  return headingLine.replace(/^#+\s*/, "").trim();
+}
+
+/** Frontmatter: drop the content keys, keep structure/style keys verbatim. */
+function skeletonFrontmatter(lines, out, contentKeys = FRONTMATTER_CONTENT_KEYS) {
+  if (lines[0]?.trim() !== "---") return 0;
+  out.push(lines[0]);
+  let i = 1;
+  while (i < lines.length && lines[i].trim() !== "---") {
+    const key = lines[i].match(/^(\w+)\s*:/)?.[1]?.toLowerCase();
+    if (!key || !contentKeys.has(key)) out.push(lines[i]);
+    i++;
+  }
+  if (i < lines.length) {
+    out.push(lines[i]); // closing ---
+    i++;
+  }
+  return i;
+}
+
+/** One line inside a frame section — returns the replacement lines (may be none). */
+function skeletonFrameLine(line, state, out) {
+  const bulletKey = line.match(/^-\s+(\w+)\s*:/)?.[1]?.toLowerCase();
+  if (bulletKey) {
+    if (bulletKey === "status") out.push("- status: outline");
+    else if (!FRAME_CONTENT_KEYS.has(bulletKey)) out.push(line);
+    return;
+  }
+  if (!line.trim()) {
+    out.push(line);
+    return;
+  }
+  // Frame prose: one placeholder per frame in place of the narrative.
+  if (!state.proseReplaced) {
+    out.push(
+      `<fill in: this video's content for the "${state.title}" beat — keep the layout role, replace the words.>`,
+    );
+    state.proseReplaced = true;
+  }
+}
+
+/**
+ * Skeletonize a STORYBOARD.md: keep the reusable structure (frame count,
+ * durations, transitions, src paths, the Video direction block, style-ish
+ * frontmatter), reset every status to `outline`, and blank the content
+ * (message/audience, narration guides, per-frame prose) down to a fill-in
+ * placeholder that names the frame's role.
+ */
+/**
+ * Skeletonize a BRIEF.md: keep the frontmatter's reusable keys (workflow,
+ * destination, aspect, language, length, angle…), drop the run-shape and
+ * content keys (flow, storyboard, message, audience), and blank each body
+ * section down to a fill-in placeholder under its kept heading.
+ */
+export function skeletonizeBrief(source) {
+  const lines = String(source ?? "").split(/\r?\n/);
+  const out = [];
+  let i = skeletonFrontmatter(lines, out, BRIEF_CONTENT_KEYS);
+  for (; i < lines.length; i++) {
+    const heading = lines[i].match(/^##\s+(.+)$/);
+    if (heading) {
+      out.push(lines[i], "");
+      out.push(
+        `<fill in: this video's ${heading[1].trim().toLowerCase()} — the recipe keeps the shape, this run supplies the specifics.>`,
+      );
+      out.push("");
+    }
+  }
+  return out.join("\n").replace(/\n{3,}/g, "\n\n");
+}
+
+export function skeletonizeStoryboard(source) {
+  const lines = String(source ?? "").split(/\r?\n/);
+  const out = [];
+  const state = { inFrame: false, proseReplaced: false, title: "" };
+  for (let i = skeletonFrontmatter(lines, out); i < lines.length; i++) {
+    const line = lines[i];
+    if (/^#{2,3}\s/.test(line)) {
+      state.inFrame = FRAME_HEADING_RE.test(line);
+      state.proseReplaced = false;
+      state.title = state.inFrame ? frameTitle(line) : "";
+      out.push(line);
+    } else if (!state.inFrame) {
+      out.push(line);
+    } else {
+      skeletonFrameLine(line, state, out);
+    }
+  }
+  return out.join("\n").replace(/\n{3,}/g, "\n\n");
+}
+
+/** The run's workflow as BRIEF.md records it — the source of truth a freeze
+ * must not contradict. Undefined when no BRIEF.md (or no `workflow:`) exists. */
+function briefWorkflow(root) {
+  const brief = join(root, "BRIEF.md");
+  if (!existsSync(brief)) return undefined;
+  const lines = readFileSync(brief, "utf8").split(/\r?\n/);
+  if (lines[0]?.trim() !== "---") return undefined;
+  for (let i = 1; i < lines.length && lines[i].trim() !== "---"; i++) {
+    const match = lines[i].match(/^workflow\s*:\s*(.+?)\s*$/);
+    if (match) return match[1].replace(/^["']|["']$/g, "") || undefined;
+  }
+  return undefined;
+}
+
+function readRecipeJson(dir) {
+  try {
+    const parsed = JSON.parse(readFileSync(join(dir, "recipe.json"), "utf8"));
+    if (typeof parsed !== "object" || parsed === null || typeof parsed.name !== "string") {
+      return null;
+    }
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function prefValue(prefs, key) {
+  return prefs[key]?.value;
+}
+
+/**
+ * Freeze the current project's approved run as a named recipe. Writes the
+ * project-tier folder + a manifest record, then copies to the user tier (a
+ * freeze is already confirmed — it promotes immediately).
+ */
+export function freezeRecipe({ projectDir, name, workflow, blocks }) {
+  const slug = slugifyRecipeName(name);
+  const root = resolve(projectDir);
+  const fromBrief = briefWorkflow(root);
+  const fromFlag = workflow && String(workflow).trim() ? String(workflow).trim() : undefined;
+  // BRIEF.md decides; the flag only covers projects briefed before it existed.
+  const resolvedWorkflow = fromBrief ?? fromFlag;
+  if (!resolvedWorkflow) {
+    throw new Error("no workflow found — BRIEF.md names none and no --workflow was given");
+  }
+  const frameSpec = join(root, "frame.md");
+  const storyboard = join(root, "STORYBOARD.md");
+  if (!existsSync(frameSpec)) throw new Error("no frame.md to freeze — run the design step first");
+  if (!existsSync(storyboard)) throw new Error("no STORYBOARD.md to freeze");
+
+  const dir = join(projectRecipesDir(root), slug);
+  let version = 1;
+  const previous = existsSync(dir) ? readRecipeJson(dir) : null;
+  if (previous) {
+    version = (Number.isInteger(previous.version) ? previous.version : 1) + 1;
+    const archive = `${dir}@v${previous.version ?? 1}`;
+    rmSync(archive, { recursive: true, force: true });
+    renameSync(dir, archive);
+  }
+  mkdirSync(dir, { recursive: true });
+
+  const prefs = mergedPreferences(root);
+  const recipe = {
+    version,
+    name: slug,
+    workflow: resolvedWorkflow,
+    approved_at: new Date().toISOString(),
+    source_project: basename(root),
+    destination: prefValue(prefs, "destination"),
+    aspect: prefValue(prefs, "aspect"),
+    language: prefValue(prefs, "language"),
+    voice: prefValue(prefs, "voice"),
+    // The bare-key fallback tolerates records made before the store required
+    // style_preset to be workflow-scoped.
+    style_preset:
+      prefValue(prefs, `style_preset.${resolvedWorkflow}`) ?? prefValue(prefs, "style_preset"),
+    blocks: Array.isArray(blocks) && blocks.length > 0 ? blocks : undefined,
+  };
+
+  writeFileSync(join(dir, "recipe.json"), `${JSON.stringify(recipe, null, 2)}\n`);
+  cpSync(frameSpec, join(dir, "frame.md"));
+  writeFileSync(
+    join(dir, "storyboard-skeleton.md"),
+    `${skeletonizeStoryboard(readFileSync(storyboard, "utf8")).trimEnd()}\n`,
+  );
+
+  // Best-effort fourth artifact — projects briefed before BRIEF.md existed
+  // (or by workflows that don't write one) freeze fine without it.
+  const brief = join(root, "BRIEF.md");
+  const briefSkeleton = existsSync(brief);
+  if (briefSkeleton) {
+    writeFileSync(
+      join(dir, "brief-skeleton.md"),
+      `${skeletonizeBrief(readFileSync(brief, "utf8")).trimEnd()}\n`,
+    );
+  }
+
+  const id = nextId(root, "recipe");
+  appendRecord(root, {
+    id,
+    type: "recipe",
+    path: `.media/recipes/${slug}/recipe.json`,
+    entity: slug,
+    description: `recipe: ${slug} (${recipe.workflow}, v${version})`,
+    provenance: { provider: "recipe.freeze", version, source_project: recipe.source_project },
+  });
+  regenerateIndex(root);
+
+  // User tier — best-effort, like every other promotion.
+  try {
+    const userDir = join(userRecipesDir(), slug);
+    mkdirSync(userDir, { recursive: true });
+    cpSync(dir, userDir, NON_ASCII_SAFE_DIR_COPY);
+  } catch {
+    // The project-tier freeze already landed.
+  }
+
+  return {
+    id,
+    slug,
+    version,
+    dir,
+    briefSkeleton,
+    workflow: resolvedWorkflow,
+    workflowOverridden: Boolean(fromBrief && fromFlag && fromBrief !== fromFlag),
+  };
+}
+
+function scanRecipesDir(dir, source) {
+  if (!existsSync(dir)) return [];
+  const found = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (!entry.isDirectory() || entry.name.includes("@v")) continue;
+    const recipe = readRecipeJson(join(dir, entry.name));
+    if (recipe) found.push({ ...recipe, source, dir: join(dir, entry.name) });
+  }
+  return found;
+}
+
+/** Two-tier merged listing (project wins), newest approval first. */
+export function listRecipes({ projectDir, workflow }) {
+  const merged = new Map();
+  for (const recipe of scanRecipesDir(userRecipesDir(), "user")) merged.set(recipe.name, recipe);
+  for (const recipe of scanRecipesDir(projectRecipesDir(resolve(projectDir)), "project")) {
+    merged.set(recipe.name, recipe);
+  }
+  let list = [...merged.values()];
+  if (workflow) list = list.filter((r) => r.workflow === workflow);
+  return list.sort((a, b) =>
+    String(b.approved_at ?? "").localeCompare(String(a.approved_at ?? "")),
+  );
+}
+
+/**
+ * Adopt a recipe into the current project: import the folder from the user
+ * tier when the project doesn't have it, copy its frame.md over the project's,
+ * and hand back the values + the skeleton path for the storyboard draft.
+ */
+export function useRecipe({ projectDir, name }) {
+  const slug = slugifyRecipeName(name);
+  const root = resolve(projectDir);
+  let dir = join(projectRecipesDir(root), slug);
+
+  if (!readRecipeJson(dir)) {
+    const userDir = join(userRecipesDir(), slug);
+    if (!readRecipeJson(userDir)) {
+      const known = listRecipes({ projectDir: root }).map((r) => r.name);
+      throw new Error(
+        `no recipe named "${slug}"${known.length ? ` (known: ${known.join(", ")})` : ""}`,
+      );
+    }
+    mkdirSync(dir, { recursive: true });
+    cpSync(userDir, dir, NON_ASCII_SAFE_DIR_COPY);
+    const imported = readRecipeJson(dir);
+    appendRecord(root, {
+      id: nextId(root, "recipe"),
+      type: "recipe",
+      path: `.media/recipes/${slug}/recipe.json`,
+      entity: slug,
+      description: `recipe: ${slug} (${imported.workflow}, v${imported.version})`,
+      provenance: { provider: "recipe.local", imported_from: "user-tier" },
+    });
+    regenerateIndex(root);
+  }
+
+  const recipe = readRecipeJson(dir);
+  cpSync(join(dir, "frame.md"), join(root, "frame.md"));
+  return {
+    recipe,
+    dir,
+    frameSpecPath: "frame.md",
+    skeletonPath: `.media/recipes/${slug}/storyboard-skeleton.md`,
+    // Recipes frozen before BRIEF.md existed have no brief skeleton — degrade.
+    briefSkeletonPath: existsSync(join(dir, "brief-skeleton.md"))
+      ? `.media/recipes/${slug}/brief-skeleton.md`
+      : undefined,
+  };
+}
diff --git a/.claude/skills/media-use/scripts/lib/telemetry.mjs b/.claude/skills/media-use/scripts/lib/telemetry.mjs
new file mode 100644
index 0000000..182e350
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/telemetry.mjs
@@ -0,0 +1,213 @@
+// Usage tracking shares the CLI and Studio identity. Properties stay coarse and
+// never carry intent text, file names, or paths.
+
+import { randomUUID } from "node:crypto";
+import * as fs from "node:fs";
+import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "node:fs";
+import { homedir } from "node:os";
+import { dirname, join } from "node:path";
+import { withFileLock } from "./config-lock.mjs";
+import { globalMediaDir } from "./media-home.mjs";
+
+const POSTHOG_API_KEY = "phc_zjjbX0PnWxERXrMHhkEJWj9A9BhGVLRReICgsfTMmpx";
+const POSTHOG_HOST = "https://us.i.posthog.com";
+const TIMEOUT_MS = 1500;
+let identifiedAccount = false;
+let warnedNonDefaultHost = false;
+
+function isTestOrCiContext() {
+  return (
+    process.env.CI === "true" ||
+    process.env.CI === "1" ||
+    process.env.NODE_ENV === "test" ||
+    process.env.NODE_ENV === "development"
+  );
+}
+
+function posthogHost() {
+  const override = process.env.MEDIA_USE_TELEMETRY_HOST;
+  if (override && !warnedNonDefaultHost && !isTestOrCiContext()) {
+    warnedNonDefaultHost = true;
+    console.error(
+      `media-use: telemetry is redirected to a non-default host via MEDIA_USE_TELEMETRY_HOST (${override}) — unset it unless this is intentional.`,
+    );
+  }
+  return override || POSTHOG_HOST;
+}
+
+/** True when telemetry must NOT be sent (opt-out envs, CI, dev, shared config). */
+export function optedOut() {
+  return (
+    // `hyperframes telemetry disable` writes telemetryEnabled: false to the
+    // shared config; one opt-out must cover the CLI and the media-use scripts.
+    readSharedConfig().telemetryEnabled === false ||
+    process.env.HYPERFRAMES_NO_TELEMETRY === "1" ||
+    process.env.DO_NOT_TRACK === "1" ||
+    process.env.CI === "true" ||
+    process.env.CI === "1" ||
+    process.env.NODE_ENV === "development"
+  );
+}
+
+// Read and write the shared config so media-use keeps one identity per install.
+function sharedConfigPath() {
+  return join(homedir(), ".hyperframes", "config.json");
+}
+
+function readSharedConfig() {
+  try {
+    const file = sharedConfigPath();
+    if (existsSync(file)) {
+      const parsed = JSON.parse(readFileSync(file, "utf8"));
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) return parsed;
+    }
+  } catch {
+    // unreadable config → treat as empty; never throw
+  }
+  return {};
+}
+
+// Best effort: skipped when the lock cannot be taken or the file cannot be read, never written unlocked.
+function updateSharedConfig(patch) {
+  const file = sharedConfigPath();
+  mkdirSync(dirname(file), { recursive: true });
+  try {
+    withFileLock(`${file}.lock`, fs, () => {
+      let config = {};
+      try {
+        config = JSON.parse(readFileSync(file, "utf8"));
+      } catch (error) {
+        if (error.code !== "ENOENT") return;
+      }
+      if (!config || typeof config !== "object" || Array.isArray(config)) return;
+      const tmp = `${file}.${process.pid}.tmp`;
+      writeFileSync(tmp, JSON.stringify({ ...config, ...patch }, null, 2) + "\n", { mode: 0o600 });
+      renameSync(tmp, file);
+    });
+  } catch {}
+}
+
+// Adopt a pre-existing media-use-only id (~/.media/anon-id from before this
+// change) so upgraders keep their PostHog persona instead of resetting to a new
+// one — otherwise cross-surface continuity would start over on upgrade.
+function legacyMediaAnonId() {
+  try {
+    const file = join(globalMediaDir(), "anon-id");
+    if (existsSync(file)) {
+      const id = readFileSync(file, "utf8").trim();
+      if (id) return id;
+    }
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+// Stable per-machine id from the shared config; seeds it (adopting a legacy
+// media-use id when present) if absent.
+function anonymousId() {
+  try {
+    const config = readSharedConfig();
+    if (typeof config.anonymousId === "string" && config.anonymousId.trim()) {
+      return config.anonymousId.trim();
+    }
+    const id = legacyMediaAnonId() || randomUUID();
+    updateSharedConfig({ anonymousId: id });
+    return id;
+  } catch {
+    return "anon"; // best-effort; a shared bucket is fine if the fs is read-only
+  }
+}
+
+function heygenAccountDistinctId() {
+  const file = join(process.env.HEYGEN_CONFIG_DIR || join(homedir(), ".heygen"), "credentials");
+  try {
+    if (!existsSync(file)) return null;
+    const raw = readFileSync(file, "utf8").trim();
+    if (!raw.startsWith("{")) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+    const user = parsed.user;
+    if (!user || typeof user !== "object" || Array.isArray(user)) return null;
+    const id = typeof user.email === "string" && user.email.trim() ? user.email : user.username;
+    // Lowercased so this joins with the CLI's own identify call regardless of
+    // the account's stored email casing — two different-case distinct ids
+    // would otherwise split one person across two PostHog profiles.
+    return typeof id === "string" && id.trim() ? id.trim().toLowerCase() : null;
+  } catch {
+    return null;
+  }
+}
+
+function showTelemetryNotice() {
+  if (optedOut()) return;
+  try {
+    const config = readSharedConfig();
+    // Shared with the CLI (config.telemetryNoticeShown): shown once per person
+    // across surfaces, not once per tool.
+    if (config.telemetryNoticeShown === true) return;
+    console.error(
+      [
+        "media-use sends usage telemetry: media type, resolution source, and provider; never intent text, file names, or paths.",
+        "If you sign in to HeyGen, usage links to your account email or username. Opt out with HYPERFRAMES_NO_TELEMETRY=1 or DO_NOT_TRACK=1.",
+      ].join("\n"),
+    );
+    updateSharedConfig({ telemetryNoticeShown: true });
+  } catch {
+    // notice is best-effort; never surface into the command
+  }
+}
+
+async function postBatch(batch) {
+  try {
+    await fetch(`${posthogHost()}/batch/`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json", Connection: "close" },
+      body: JSON.stringify({ api_key: POSTHOG_API_KEY, batch }),
+      signal: AbortSignal.timeout(TIMEOUT_MS),
+    });
+  } catch {
+    // telemetry is best-effort; never surface into the command
+  }
+}
+
+async function postEvent(event, properties, distinctId) {
+  await postBatch([
+    {
+      event,
+      properties: { ...properties, surface: "media-use", $ip: null },
+      distinct_id: distinctId,
+      timestamp: new Date().toISOString(),
+    },
+  ]);
+}
+
+async function identifyAccount(anonId) {
+  if (optedOut() || identifiedAccount) return;
+  const distinctId = heygenAccountDistinctId();
+  if (!distinctId) return;
+  identifiedAccount = true;
+  await postEvent("$identify", { $anon_distinct_id: anonId }, distinctId);
+}
+
+/**
+ * Fire-and-forget a single event to PostHog. Best-effort: awaited with a short
+ * timeout so a short-lived script flushes before exit, but any failure (offline,
+ * opted out) is swallowed. `properties` must be non-PII (no intent/paths).
+ */
+export async function track(event, properties = {}) {
+  if (optedOut()) return;
+  showTelemetryNotice();
+  const anonId = anonymousId();
+  await identifyAccount(anonId);
+  await postEvent(event, properties, anonId);
+}
+
+export function __anonymousIdForTest() {
+  return anonymousId();
+}
+
+export function __resetTelemetryForTest() {
+  identifiedAccount = false;
+  warnedNonDefaultHost = false;
+}
diff --git a/.claude/skills/media-use/scripts/lib/telemetry.test.mjs b/.claude/skills/media-use/scripts/lib/telemetry.test.mjs
new file mode 100644
index 0000000..4a0c541
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/telemetry.test.mjs
@@ -0,0 +1,73 @@
+import assert from "node:assert/strict";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join } from "node:path";
+import { test } from "node:test";
+import { optedOut } from "./telemetry.mjs";
+
+// optedOut() reads ~/.hyperframes/config.json and env vars. Point HOME at a temp
+// dir so the run never touches the real config, and pin the env opt-outs to a
+// neutral state; restore both afterwards.
+const ENV_KEYS = [
+  "HOME",
+  "USERPROFILE",
+  "HYPERFRAMES_NO_TELEMETRY",
+  "DO_NOT_TRACK",
+  "CI",
+  "NODE_ENV",
+];
+const savedEnv = Object.fromEntries(ENV_KEYS.map((k) => [k, process.env[k]]));
+const home = mkdtempSync(join(tmpdir(), "mu-telemetry-"));
+const configPath = join(home, ".hyperframes", "config.json");
+
+function writeConfig(contents) {
+  if (contents === null) {
+    rmSync(configPath, { force: true });
+  } else {
+    mkdirSync(dirname(configPath), { recursive: true });
+    writeFileSync(configPath, contents);
+  }
+}
+
+test.before(() => {
+  for (const key of ENV_KEYS) delete process.env[key];
+  process.env.HOME = process.env.USERPROFILE = home;
+});
+
+test.after(() => {
+  for (const key of ENV_KEYS) {
+    if (savedEnv[key] === undefined) delete process.env[key];
+    else process.env[key] = savedEnv[key];
+  }
+  rmSync(home, { recursive: true, force: true });
+});
+
+test("optedOut is false with no config and no opt-out env", () => {
+  writeConfig(null);
+  assert.equal(optedOut(), false);
+});
+
+test("optedOut honors telemetryEnabled: false from the shared config", () => {
+  writeConfig(JSON.stringify({ telemetryEnabled: false }));
+  assert.equal(optedOut(), true);
+});
+
+test("optedOut is false when the shared config enables telemetry", () => {
+  writeConfig(JSON.stringify({ telemetryEnabled: true }));
+  assert.equal(optedOut(), false);
+});
+
+test("optedOut treats an unreadable shared config as no opt-out", () => {
+  writeConfig("{not json");
+  assert.equal(optedOut(), false);
+});
+
+test("optedOut still honors the env opt-outs", () => {
+  writeConfig(JSON.stringify({ telemetryEnabled: true }));
+  process.env.DO_NOT_TRACK = "1";
+  try {
+    assert.equal(optedOut(), true);
+  } finally {
+    delete process.env.DO_NOT_TRACK;
+  }
+});
diff --git a/.claude/skills/media-use/scripts/lib/transcriptCutFade.mjs b/.claude/skills/media-use/scripts/lib/transcriptCutFade.mjs
new file mode 100644
index 0000000..bc16760
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/transcriptCutFade.mjs
@@ -0,0 +1,21 @@
+function round3(n) {
+  return Math.round(Number(n) * 1000) / 1000;
+}
+
+// 30ms in/out ramps kill the click at every concat boundary. A segment shorter
+// than 4x the ramp would spend its whole length fading, so scale down there and
+// skip entirely on a degenerate one. fadeIn/fadeOut are false at the export's
+// own true start/end, where there is no splice to smooth.
+export function fadeFilterFor(durationSeconds, { fadeIn, fadeOut }) {
+  if (!fadeIn && !fadeOut) return null;
+  const FADE_SECONDS = 0.03;
+  if (!Number.isFinite(durationSeconds) || durationSeconds <= 0.01) return null;
+  const d = Math.min(FADE_SECONDS, durationSeconds / 4);
+  const parts = [];
+  if (fadeIn) parts.push(`afade=t=in:st=0:d=${round3(d)}`);
+  if (fadeOut) {
+    const out = round3(durationSeconds - d);
+    if (out > 0) parts.push(`afade=t=out:st=${out}:d=${round3(d)}`);
+  }
+  return parts.length ? parts.join(",") : null;
+}
diff --git a/.claude/skills/media-use/scripts/lib/words.mjs b/.claude/skills/media-use/scripts/lib/words.mjs
new file mode 100644
index 0000000..e062ecb
--- /dev/null
+++ b/.claude/skills/media-use/scripts/lib/words.mjs
@@ -0,0 +1,18 @@
+export function normalizeWords(input) {
+  const raw = Array.isArray(input) ? input : Array.isArray(input?.words) ? input.words : [];
+  return raw
+    .map((w, index) => {
+      const text = String(w?.text ?? w?.word ?? "").trim();
+      const start = Number(w?.start);
+      const end = Number(w?.end);
+      if (!text || !Number.isFinite(start) || !Number.isFinite(end)) return null;
+      return { id: w?.id ?? `w${index}`, text, start, end };
+    })
+    .filter(Boolean);
+}
+
+export function wordListsFromMediaMeta(input) {
+  if (Array.isArray(input) || Array.isArray(input?.words)) return [normalizeWords(input)];
+  if (!Array.isArray(input?.voices)) return [];
+  return input.voices.map((voice) => normalizeWords(voice));
+}
diff --git a/.claude/skills/media-use/scripts/prefs.mjs b/.claude/skills/media-use/scripts/prefs.mjs
new file mode 100644
index 0000000..6334130
--- /dev/null
+++ b/.claude/skills/media-use/scripts/prefs.mjs
@@ -0,0 +1,69 @@
+#!/usr/bin/env node
+/**
+ * Remembered defaults CLI — the lightweight tier of HyperFrames user memory.
+ *
+ *   node prefs.mjs get --hyperframes . [--json]
+ *     Print the merged view (project `.media/preferences.json` over user
+ *     `~/.media/preferences.json`), each key with its source and the receipt
+ *     material (confirmed_in, updated_at).
+ *
+ *   node prefs.mjs record --hyperframes . --key destination --value x-feed [--workflow <w>]
+ *     Record one confirmed brief answer into the project tier; the same value
+ *     confirmed in two different projects promotes the key to the user tier.
+ *
+ * Consumption rule (references/memory.md): a remembered value becomes the
+ * recommended option with a receipt — it never skips a question.
+ */
+import { parseArgs } from "node:util";
+import { mergedPreferences, recordPreference } from "./lib/prefs-store.mjs";
+
+const { values: args, positionals } = parseArgs({
+  options: {
+    hyperframes: { type: "string", default: "." },
+    key: { type: "string" },
+    value: { type: "string" },
+    workflow: { type: "string" },
+    json: { type: "boolean", default: false },
+  },
+  allowPositionals: true,
+});
+
+const verb = positionals[0];
+
+function fail(message) {
+  console.error(message);
+  process.exit(1);
+}
+
+if (verb === "get") {
+  const merged = mergedPreferences(args.hyperframes);
+  if (args.json) {
+    console.log(JSON.stringify(merged, null, 2));
+  } else if (Object.keys(merged).length === 0) {
+    console.log("no remembered preferences yet");
+  } else {
+    for (const [key, entry] of Object.entries(merged)) {
+      console.log(
+        `${key} = ${entry.value}  (${entry.source}; confirmed in ${entry.confirmed_in.join(", ")})`,
+      );
+    }
+  }
+} else if (verb === "record") {
+  if (!args.key || !args.value) fail("record needs --key and --value");
+  try {
+    const result = recordPreference({
+      projectDir: args.hyperframes,
+      key: args.key,
+      value: args.value,
+      workflow: args.workflow,
+    });
+    const promotion = result.promoted ? "; promoted to user tier" : "";
+    console.log(`recorded ${result.key} = ${result.value} (project${promotion})`);
+  } catch (err) {
+    fail(err instanceof Error ? err.message : String(err));
+  }
+} else {
+  fail(
+    "usage: prefs.mjs <get|record> --hyperframes . [--key <k> --value <v> --workflow <w>] [--json]",
+  );
+}
diff --git a/.claude/skills/media-use/scripts/recipe.mjs b/.claude/skills/media-use/scripts/recipe.mjs
new file mode 100644
index 0000000..12d5dde
--- /dev/null
+++ b/.claude/skills/media-use/scripts/recipe.mjs
@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+/**
+ * Recipes CLI — the heavyweight tier of HyperFrames user memory.
+ *
+ *   node recipe.mjs freeze --hyperframes . --name <n> [--workflow <w>] [--blocks a,b,c]
+ *     Freeze the current approved run as a named recipe: frame.md + the
+ *     storyboard skeleton (structure kept, content blanked) + the brief
+ *     skeleton (when BRIEF.md exists) + the confirmed brief values.
+ *     The workflow is read from BRIEF.md; --workflow only covers projects
+ *     briefed before BRIEF.md existed. Re-freezing the same name bumps the
+ *     version and archives the old folder as <name>@v<N>. Promotes to
+ *     ~/.media/recipes/ immediately.
+ *
+ *   node recipe.mjs list --hyperframes . [--workflow <w>] [--json]
+ *     Two-tier merged listing (project wins), newest approval first.
+ *
+ *   node recipe.mjs use --hyperframes . --name <n> [--json]
+ *     Adopt a recipe: import it from the user tier if needed, copy its
+ *     frame.md over the project's, and print the brief values + skeleton path.
+ *
+ * When recipes are offered and consumed: references/memory.md.
+ */
+import { parseArgs } from "node:util";
+import { freezeRecipe, listRecipes, useRecipe } from "./lib/recipe-store.mjs";
+
+const { values: args, positionals } = parseArgs({
+  options: {
+    hyperframes: { type: "string", default: "." },
+    name: { type: "string" },
+    workflow: { type: "string" },
+    blocks: { type: "string" },
+    json: { type: "boolean", default: false },
+  },
+  allowPositionals: true,
+});
+
+const verb = positionals[0];
+
+function fail(message) {
+  console.error(message);
+  process.exit(1);
+}
+
+try {
+  if (verb === "freeze") {
+    if (!args.name) fail("freeze needs --name");
+    const frozen = freezeRecipe({
+      projectDir: args.hyperframes,
+      name: args.name,
+      workflow: args.workflow,
+      blocks: args.blocks
+        ? args.blocks
+            .split(",")
+            .map((b) => b.trim())
+            .filter(Boolean)
+        : undefined,
+    });
+    if (args.json) console.log(JSON.stringify({ ok: true, ...frozen }));
+    else {
+      console.log(
+        `froze recipe ${frozen.slug} (v${frozen.version}, ${frozen.workflow}) → ${frozen.dir}`,
+      );
+      if (frozen.workflowOverridden)
+        console.log(`  (BRIEF.md says "${frozen.workflow}" — the --workflow flag was ignored)`);
+      if (!frozen.briefSkeleton)
+        console.log("  (no BRIEF.md in the project — brief skeleton skipped)");
+    }
+  } else if (verb === "list") {
+    const list = listRecipes({ projectDir: args.hyperframes, workflow: args.workflow });
+    if (args.json) console.log(JSON.stringify(list));
+    else if (list.length === 0) console.log("no recipes yet");
+    else {
+      for (const r of list) {
+        console.log(
+          `${r.name}  v${r.version}  ${r.workflow}  (${r.source}; approved ${String(r.approved_at ?? "?").slice(0, 10)})`,
+        );
+      }
+    }
+  } else if (verb === "use") {
+    if (!args.name) fail("use needs --name");
+    const used = useRecipe({ projectDir: args.hyperframes, name: args.name });
+    if (args.json) console.log(JSON.stringify({ ok: true, ...used }));
+    else {
+      console.log(
+        `using recipe ${used.recipe.name} (v${used.recipe.version}, ${used.recipe.workflow})`,
+      );
+      console.log(`  frame spec → ${used.frameSpecPath} (copied over)`);
+      console.log(`  storyboard skeleton → ${used.skeletonPath}`);
+      if (used.briefSkeletonPath) console.log(`  brief skeleton → ${used.briefSkeletonPath}`);
+      for (const key of ["destination", "aspect", "language", "voice", "style_preset"]) {
+        if (used.recipe[key]) console.log(`  ${key}: ${used.recipe[key]}`);
+      }
+    }
+  } else {
+    fail(
+      "usage: recipe.mjs <freeze|list|use> --hyperframes . [--name <n>] [--workflow <w>] [--blocks a,b] [--json]",
+    );
+  }
+} catch (err) {
+  fail(err instanceof Error ? err.message : String(err));
+}
diff --git a/.claude/skills/media-use/scripts/resolve-plugin.test.mjs b/.claude/skills/media-use/scripts/resolve-plugin.test.mjs
new file mode 100644
index 0000000..8460ee8
--- /dev/null
+++ b/.claude/skills/media-use/scripts/resolve-plugin.test.mjs
@@ -0,0 +1,62 @@
+import assert from "node:assert/strict";
+import { spawnSync } from "node:child_process";
+import { copyFileSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { delimiter, join } from "node:path";
+import { tmpdir } from "node:os";
+import { fileURLToPath } from "node:url";
+import { test } from "node:test";
+
+test(
+  "plugin resolver uses the release CLI without a repository checkout",
+  { skip: process.platform === "win32" },
+  (t) => {
+    const dir = mkdtempSync(join(tmpdir(), "hf-resolve-plugin-"));
+    t.after(() => rmSync(dir, { recursive: true, force: true }));
+    mkdirSync(join(dir, "lib"));
+    for (const file of ["resolve.mjs", "lib/npx-sync.mjs"]) {
+      copyFileSync(fileURLToPath(new URL(file, import.meta.url)), join(dir, file));
+    }
+    writeFileSync(
+      join(dir, "npx"),
+      `#!${process.execPath}\nconsole.log(JSON.stringify({args:process.argv.slice(2),skip:process.env.HYPERFRAMES_SKIP_SKILLS}));process.exit(7);`,
+      { mode: 0o755 },
+    );
+    const result = spawnSync(process.execPath, [join(dir, "resolve.mjs"), "--intent", "a & b"], {
+      cwd: dir,
+      encoding: "utf8",
+      env: {
+        ...process.env,
+        PATH: `${dir}${delimiter}${process.env.PATH}`,
+        HYPERFRAMES_PLUGIN_VERSION: "1.2.3",
+        HYPERFRAMES_SKIP_SKILLS: "1",
+      },
+    });
+    assert.equal(result.status, 7, result.stderr);
+    assert.deepEqual(JSON.parse(result.stdout), {
+      args: ["--yes", "hyperframes@1.2.3", "media-use", "resolve", "--intent", "a & b"],
+      skip: "1",
+    });
+  },
+);
+
+test("helper package override keeps a contributor's local CLI", (t) => {
+  const root = mkdtempSync(join(tmpdir(), "hf-resolve-local-"));
+  t.after(() => rmSync(root, { recursive: true, force: true }));
+  const scripts = join(root, "skills/media-use/scripts");
+  mkdirSync(join(scripts, "lib"), { recursive: true });
+  mkdirSync(join(root, "packages/cli/dist"), { recursive: true });
+  for (const file of ["resolve.mjs", "lib/npx-sync.mjs"]) {
+    copyFileSync(fileURLToPath(new URL(file, import.meta.url)), join(scripts, file));
+  }
+  writeFileSync(join(root, "packages/cli/dist/cli.js"), 'console.log("local-cli");');
+  const result = spawnSync(process.execPath, [join(scripts, "resolve.mjs")], {
+    encoding: "utf8",
+    env: {
+      ...process.env,
+      HYPERFRAMES_PLUGIN_VERSION: "",
+      HYPERFRAMES_SKILL_PKG_VERSION: "0.8.79",
+    },
+  });
+  assert.equal(result.status, 0, result.stderr);
+  assert.equal(result.stdout.trim(), "local-cli");
+});
diff --git a/.claude/skills/media-use/scripts/resolve.mjs b/.claude/skills/media-use/scripts/resolve.mjs
new file mode 100644
index 0000000..a2a0b9b
--- /dev/null
+++ b/.claude/skills/media-use/scripts/resolve.mjs
@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+import { spawnSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { resolveNpxInvocation } from "./lib/npx-sync.mjs";
+
+// Installed plugins have no monorepo packages/ tree. The plugin launcher passes
+// the release version and suppression environment through to this legacy shim.
+const pluginVersion = process.env.HYPERFRAMES_PLUGIN_VERSION;
+if (pluginVersion) {
+  const invocation = resolveNpxInvocation(
+    ["--yes", `hyperframes@${pluginVersion}`, "media-use", "resolve", ...process.argv.slice(2)],
+    { stdio: "inherit" },
+  );
+  const result = spawnSync(invocation.cmd, invocation.args, invocation.opts);
+  if (result.error) console.error(result.error.message);
+  process.exit(result.status ?? 1);
+}
+const root = join(fileURLToPath(new URL("../../../", import.meta.url)));
+const dist = join(root, "packages/cli/dist/cli.js");
+const result = existsSync(dist)
+  ? spawnSync(process.execPath, [dist, "media-use", "resolve", ...process.argv.slice(2)], {
+      stdio: "inherit",
+    })
+  : spawnSync(
+      "bun",
+      [join(root, "packages/cli/src/cli.ts"), "media-use", "resolve", ...process.argv.slice(2)],
+      { stdio: "inherit" },
+    );
+process.exit(result.status ?? 1);
diff --git a/.claude/skills/media-use/scripts/transcribe.mjs b/.claude/skills/media-use/scripts/transcribe.mjs
new file mode 100644
index 0000000..ccf9b24
--- /dev/null
+++ b/.claude/skills/media-use/scripts/transcribe.mjs
@@ -0,0 +1,194 @@
+#!/usr/bin/env node
+
+import { execFileSync } from "node:child_process";
+import {
+  existsSync,
+  readFileSync,
+  writeFileSync,
+  copyFileSync,
+  renameSync,
+  mkdtempSync,
+  rmSync,
+} from "node:fs";
+import { homedir, tmpdir } from "node:os";
+import { basename, extname, join, resolve } from "node:path";
+import { parseArgs, stripVTControlCharacters } from "node:util";
+import { mergeTokensToWords } from "./lib/parakeet-words.mjs";
+import { track } from "./lib/telemetry.mjs";
+import { resolveNpxInvocation } from "./lib/npx-sync.mjs";
+
+// The DEFAULT local transcription path. Prefers NVIDIA Parakeet-TDT via
+// parakeet-mlx, which beats whisper.cpp on the Open ASR Leaderboard (~6.05% vs
+// 7.44% avg WER, and 4.73% vs 5.96% on noisy test-other) and is 5-10x faster
+// with native punctuation. Emits { text, words:[{text,start,end}] } (word
+// timestamps merged from Parakeet's sub-word tokens) for transcript-cut /
+// captions / the audio engine.
+//
+// Parakeet v3 covers English + 25 European languages. For other languages, or
+// when parakeet-mlx is not installed, it falls back to whisper.cpp via
+// `hyperframes transcribe` (99 languages; the CLI resolves/builds whisper.cpp
+// on first use — it is not bundled). `--engine` forces one.
+
+const { values: args } = parseArgs({
+  options: {
+    input: { type: "string", short: "i" },
+    out: { type: "string", short: "o" },
+    engine: { type: "string", default: "auto" }, // auto | parakeet | whisper
+    model: { type: "string", default: "mlx-community/parakeet-tdt-0.6b-v3" },
+    json: { type: "boolean", default: false },
+    help: { type: "boolean", short: "h", default: false },
+  },
+  strict: true,
+});
+
+if (args.help) {
+  console.log(`media-use transcribe: better-than-whisper local ASR (Parakeet), whisper.cpp fallback
+
+Usage:
+  node transcribe.mjs --input audio.wav [--out audio.transcribe.json] [--engine auto|parakeet|whisper]
+
+Parakeet (default) beats whisper.cpp on accuracy + speed for English/European
+languages; whisper.cpp (99 languages) is the fallback. Install Parakeet once:
+  npx hyperframes models install parakeet   (macOS, Windows, Linux with glibc 2.32+)
+  uv venv ~/.venvs/parakeet && VIRTUAL_ENV=~/.venvs/parakeet uv pip install parakeet-mlx   (Apple Silicon)`);
+  process.exit(0);
+}
+
+if (!args.input) {
+  console.error("error: --input is required");
+  process.exit(2);
+}
+const inputPath = resolve(args.input);
+if (!existsSync(inputPath)) {
+  console.error(`error: input not found: ${inputPath}`);
+  process.exit(2);
+}
+const outPath = resolve(
+  args.out || `${inputPath.slice(0, -extname(inputPath).length)}.transcribe.json`,
+);
+
+// Locate the parakeet-mlx runner the same way the CLI does: env override, then
+// the documented ~/.venvs/parakeet install, then PATH. Checking the venv (not
+// just PATH) is what keeps a user who followed the install docs verbatim from
+// silently falling through to whisper. Returns the runner path, or null.
+function resolveParakeet() {
+  for (const p of [
+    process.env.HYPERFRAMES_PARAKEET,
+    join(homedir(), ".venvs", "parakeet", "bin", "parakeet-mlx"),
+  ]) {
+    if (p && existsSync(p)) return p;
+  }
+  try {
+    execFileSync("parakeet-mlx", ["--help"], {
+      stdio: ["ignore", "ignore", "ignore"],
+      timeout: 20000,
+    });
+    return "parakeet-mlx";
+  } catch {
+    return null;
+  }
+}
+
+// Write via a sibling temp + atomic rename so a SIGKILL mid-write can't leave a
+// truncated transcript at outPath (downstream reads it as valid JSON).
+function atomicWrite(target, data) {
+  const tmp = `${target}.tmp-${process.pid}`;
+  writeFileSync(tmp, data);
+  renameSync(tmp, target);
+}
+
+function report(engine, wordCount) {
+  if (args.json) console.log(JSON.stringify({ ok: true, out: outPath, engine, words: wordCount }));
+  else
+    console.log(
+      `transcribed ${basename(inputPath)} -> ${outPath}${wordCount != null ? ` (${wordCount} words,` : " ("}${engine})`,
+    );
+}
+
+function runParakeet(runner) {
+  const workDir = mkdtempSync(join(tmpdir(), "media-use-asr-"));
+  try {
+    execFileSync(
+      runner,
+      [inputPath, "--model", args.model, "--output-format", "json", "--output-dir", workDir],
+      { stdio: ["ignore", "pipe", "pipe"], timeout: 1_800_000 },
+    );
+    const jsonPath = join(workDir, `${basename(inputPath, extname(inputPath))}.json`);
+    if (!existsSync(jsonPath)) throw new Error("parakeet produced no JSON");
+    const merged = mergeTokensToWords(JSON.parse(readFileSync(jsonPath, "utf8")));
+    atomicWrite(outPath, JSON.stringify(merged, null, 2));
+    report("parakeet", merged.words.length);
+  } finally {
+    rmSync(workDir, { recursive: true, force: true });
+  }
+}
+
+// The hyperframes CLI (its Parakeet, else whisper.cpp built on first use — see
+// SKILL.md): writes transcript.json into --dir; relocate to --out.
+function runCli(cliEngine) {
+  const workDir = mkdtempSync(join(tmpdir(), "media-use-whisper-"));
+  try {
+    // On Windows a bare "npx" is npx.cmd, which execFileSync cannot exec
+    // (spawnSync npx ENOENT) — resolveNpxInvocation reroutes it through
+    // node + npx-cli.js (and throws actionably when it can't), same
+    // mechanism as the audio engine's TTS spawns.
+    // Under auto or parakeet the CLI may run its own Parakeet; --json says which engine ran.
+    const resolved = resolveNpxInvocation(
+      ["hyperframes", "transcribe", inputPath, "--dir", workDir, "--engine", cliEngine, "--json"],
+      { stdio: ["ignore", "pipe", "pipe"], timeout: 1_800_000 },
+    );
+    let stdout;
+    try {
+      stdout = String(execFileSync(resolved.cmd, resolved.args, resolved.opts));
+    } catch (e) {
+      // stderr holds spinner redraws and --json prints the reason on stdout, so keep the last lines.
+      const tail = stripVTControlCharacters(`${e.stderr ?? ""}\n${e.stdout ?? ""}`)
+        .split(/[\r\n]+/)
+        .map((l) => l.trim())
+        .filter((l) => l && l !== "│")
+        .slice(-3)
+        .join("\n");
+      throw new Error(
+        `hyperframes transcribe failed (exit ${e.status ?? e.code})${tail ? `:\n${tail}` : ""}`,
+      );
+    }
+    const produced = join(workDir, "transcript.json");
+    if (!existsSync(produced))
+      throw new Error("hyperframes transcribe produced no transcript.json");
+    const tmp = `${outPath}.tmp-${process.pid}`;
+    copyFileSync(produced, tmp);
+    renameSync(tmp, outPath); // atomic publish
+    let words;
+    try {
+      const t = JSON.parse(readFileSync(outPath, "utf8"));
+      // The CLI writes a flat word array, not { words }.
+      words = Array.isArray(t) ? t.length : undefined;
+    } catch {
+      /* leave undefined */
+    }
+    let ran = "whisper";
+    try {
+      ran = JSON.parse(stdout.trim().split("\n").at(-1)).engine === "parakeet" ? "parakeet" : ran;
+    } catch {
+      /* no JSON line: keep whisper */
+    }
+    report(ran, words);
+    return ran;
+  } finally {
+    rmSync(workDir, { recursive: true, force: true });
+  }
+}
+
+try {
+  const parakeetBin = resolveParakeet();
+  const asked = args.engine === "parakeet" || args.engine === "whisper" ? args.engine : "auto";
+  // Without parakeet-mlx, the CLI's own Parakeet (any OS, `hyperframes models install parakeet`).
+  let engine = "parakeet";
+  if (asked !== "whisper" && parakeetBin) runParakeet(parakeetBin);
+  else engine = runCli(asked);
+  await track("media_use_transcribe", { engine });
+} catch (err) {
+  if (args.json) console.log(JSON.stringify({ ok: false, error: err.message }));
+  else console.error(`error: transcription failed: ${err.message}`);
+  process.exit(1);
+}
diff --git a/.claude/skills/media-use/scripts/transcribe.test.mjs b/.claude/skills/media-use/scripts/transcribe.test.mjs
new file mode 100644
index 0000000..3f0d2a5
--- /dev/null
+++ b/.claude/skills/media-use/scripts/transcribe.test.mjs
@@ -0,0 +1,112 @@
+import assert from "node:assert/strict";
+import { execFileSync, spawnSync } from "node:child_process";
+import { chmodSync, mkdirSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+// The stub stands in for `npx hyperframes transcribe <in> --dir <dir> ...`: it records its args,
+// writes the CLI's flat array and prints the CLI's --json line naming `cliEngine`.
+function runScript(engine, cliEngine) {
+  const root = mkdtempSync(join(tmpdir(), "media-use-transcribe-"));
+  try {
+    const bin = join(root, "bin");
+    mkdirSync(bin);
+    writeFileSync(
+      join(bin, "npx"),
+      `#!/bin/sh\necho "$@" > "${root}/args"\nwhile [ "$1" != "--dir" ]; do shift; done\n` +
+        `echo '[{"text":"a","start":0,"end":1},{"text":"b","start":1,"end":2}]' > "$2/transcript.json"\n` +
+        `echo '{"ok":true,"engine":"${cliEngine}"}'\n`,
+    );
+    chmodSync(join(bin, "npx"), 0o755);
+    const input = join(root, "in.wav");
+    writeFileSync(input, "");
+    const script = fileURLToPath(new URL("./transcribe.mjs", import.meta.url));
+    const env = { ...process.env, PATH: `${bin}:${process.env.PATH}`, HOME: root };
+    delete env.HYPERFRAMES_PARAKEET;
+    const out = execFileSync(
+      process.execPath,
+      [script, "--input", input, "--engine", engine, "--json"],
+      {
+        encoding: "utf8",
+        env: { ...env, HYPERFRAMES_MEDIA_HOME: join(root, "home"), HYPERFRAMES_NO_TELEMETRY: "1" },
+      },
+    );
+    return { result: JSON.parse(out.trim()), args: readFileSync(join(root, "args"), "utf8") };
+  } finally {
+    rmSync(root, { recursive: true, force: true });
+  }
+}
+
+test(
+  "--engine whisper makes the CLI run whisper and reports the flat transcript's word count",
+  { skip: process.platform === "win32" },
+  () => {
+    const { result, args } = runScript("whisper", "whisper");
+    assert.match(args, /--engine whisper --json/);
+    assert.equal(result.words, 2);
+    assert.equal(result.engine, "whisper");
+  },
+);
+
+test(
+  "auto reports the engine the CLI says it ran, Parakeet included",
+  { skip: process.platform === "win32" },
+  () => {
+    const { result, args } = runScript("auto", "parakeet");
+    assert.match(args, /--engine auto --json/);
+    assert.equal(result.engine, "parakeet");
+  },
+);
+
+test(
+  "--engine parakeet without parakeet-mlx asks the CLI for its Parakeet",
+  { skip: process.platform === "win32" },
+  () => {
+    const { result, args } = runScript("parakeet", "parakeet");
+    assert.match(args, /--engine parakeet --json/);
+    assert.equal(result.engine, "parakeet");
+  },
+);
+
+test(
+  "a failed --engine parakeet run reports the reason the CLI printed on stdout",
+  { skip: process.platform === "win32" },
+  () => {
+    const root = mkdtempSync(join(tmpdir(), "media-use-transcribe-"));
+    try {
+      const bin = join(root, "bin");
+      mkdirSync(bin);
+      const reason =
+        "Parakeet is not installed. Install it with: hyperframes models install parakeet";
+      writeFileSync(
+        join(bin, "npx"),
+        `#!/bin/sh\necho '{"ok":false,"error":"${reason}"}'\nexit 1\n`,
+      );
+      chmodSync(join(bin, "npx"), 0o755);
+      const input = join(root, "in.wav");
+      writeFileSync(input, "");
+      const script = fileURLToPath(new URL("./transcribe.mjs", import.meta.url));
+      const res = spawnSync(
+        process.execPath,
+        [script, "--input", input, "--engine", "parakeet", "--json"],
+        {
+          encoding: "utf8",
+          env: {
+            ...process.env,
+            HYPERFRAMES_PARAKEET: "",
+            PATH: `${bin}:${process.env.PATH}`,
+            HOME: root,
+            HYPERFRAMES_MEDIA_HOME: join(root, "home"),
+            HYPERFRAMES_NO_TELEMETRY: "1",
+          },
+        },
+      );
+      assert.equal(res.status, 1);
+      assert.match(JSON.parse(res.stdout.trim()).error, /hyperframes models install parakeet/);
+    } finally {
+      rmSync(root, { recursive: true, force: true });
+    }
+  },
+);
diff --git a/.claude/skills/media-use/scripts/transcript-cut.mjs b/.claude/skills/media-use/scripts/transcript-cut.mjs
new file mode 100644
index 0000000..eb0bcbf
--- /dev/null
+++ b/.claude/skills/media-use/scripts/transcript-cut.mjs
@@ -0,0 +1,289 @@
+#!/usr/bin/env node
+
+import { execFileSync } from "node:child_process";
+import { mkdtempSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, extname, join, resolve } from "node:path";
+import { parseArgs } from "node:util";
+import { compileCutList } from "./lib/cutlist.mjs";
+import { fadeFilterFor } from "./lib/transcriptCutFade.mjs";
+import { track } from "./lib/telemetry.mjs";
+
+const { values: args } = parseArgs({
+  options: {
+    input: { type: "string" },
+    transcript: { type: "string" },
+    remove: { type: "string" },
+    "remove-words": { type: "string" },
+    "remove-fillers": { type: "string" },
+    "cut-silence": { type: "string" },
+    keep: { type: "string" },
+    copy: { type: "boolean", default: false },
+    plan: { type: "boolean", default: false },
+    out: { type: "string" },
+    json: { type: "boolean", default: false },
+    help: { type: "boolean", short: "h", default: false },
+  },
+  strict: true,
+});
+
+if (args.help) {
+  console.log(`media-use transcript-cut — compile transcript edits into video cuts
+
+Usage:
+  node transcript-cut.mjs --input in.mp4 --transcript transcript.json --remove "12-15" --out out.mp4
+
+Options:
+  --input             Source video/audio file
+  --transcript        JSON word transcript, array or { words: [...] }
+  --remove            Time ranges to remove, seconds: a-b,c-d
+  --remove-words      Word-index ranges to remove: 12-18,40-41
+  --remove-fillers    Comma list of filler words to remove
+  --cut-silence       Remove inter-word gaps longer than this many seconds
+  --keep              Inverse mode: direct kept ranges, mutually exclusive with removal
+  --copy              Use stream copy for faster, keyframe-snapped cuts
+  --plan              Print kept segment JSON and exit without ffmpeg
+  --out               Output file
+  --json              Output JSON status
+  --help, -h          Show this help`);
+  process.exit(0);
+}
+
+try {
+  run();
+  await track("media_use_transcript_cut", {
+    mode: args.plan ? "plan" : "encode",
+    remove_fillers: !!args["remove-fillers"],
+    cut_silence: !!args["cut-silence"],
+    ranges: !!args.remove,
+    keep: !!args.keep,
+  });
+} catch (err) {
+  if (args.json) console.log(JSON.stringify({ ok: false, error: err.message }));
+  else console.error(`error: ${err.message}`);
+  process.exit(1);
+}
+
+function run() {
+  if (!args.transcript) throw new Error("--transcript is required");
+  const transcript = JSON.parse(readFileSync(resolve(args.transcript), "utf8"));
+  const segments = compileCutList(transcript, {
+    remove: args.remove,
+    removeWords: args["remove-words"],
+    removeFillers: args["remove-fillers"],
+    cutSilence: args["cut-silence"],
+    keep: args.keep,
+  });
+
+  if (args.plan) {
+    console.log(JSON.stringify(segments));
+    return;
+  }
+
+  if (!args.input || !args.out)
+    throw new Error("--input and --out are required unless --plan is set");
+  if (segments.length === 0) throw new Error("cut list has no kept segments");
+
+  const inputPath = resolve(args.input);
+  const outPath = resolve(args.out);
+  mkdirSync(dirname(outPath), { recursive: true });
+  const tmpDir = mkdtempSync(join(tmpdir(), "media-use-cut-"));
+  const keptSeconds = sumDurations(segments);
+  const totalSeconds = probeDuration(inputPath);
+
+  try {
+    const parts = segments.map((segment, index) => {
+      // Intermediates carry PCM audio, not the final codec. Encoding each
+      // segment to a lossy codec separately makes the encoder pad every segment
+      // with priming silence (~25-35ms for AAC), which concat then bakes in as a
+      // gap at each cut -- a defect distinct from, and surviving, the fades
+      // below. PCM has no priming, so audio is encoded exactly once, at concat.
+      // The video container is .mov, not .mkv: ffmpeg writes Matroska
+      // timestamps in whole milliseconds, which moves frames off the source's
+      // frame grid, and the concat copy below carries that into the output.
+      const ext = args.copy ? extname(outPath) || ".mp4" : isAudioOnly(outPath) ? ".wav" : ".mov";
+      const out = join(tmpDir, `segment-${String(index).padStart(4, "0")}${ext}`);
+      // --copy stays fade-free (stream copy cannot filter). A segment's true
+      // start/end (index 0's start, the last segment's end) borders nothing
+      // kept, so only an interior splice edge gets a ramp.
+      const fade = args.copy
+        ? null
+        : fadeFilterFor(segment.end - segment.start, {
+            fadeIn: index > 0,
+            fadeOut: index < segments.length - 1,
+          });
+      cutSegment(inputPath, segment, out, args.copy, fade);
+      return out;
+    });
+    const listPath = join(tmpDir, "list.txt");
+    writeFileSync(
+      listPath,
+      parts.map((part) => `file '${escapeConcatPath(part)}'`).join("\n") + "\n",
+    );
+    // Encode to a sibling temp (same extension so ffmpeg picks the right muxer),
+    // then atomic-rename so a SIGKILL mid-encode can't leave a truncated outPath.
+    const tmpOut = `${outPath}.part${extname(outPath) || ".mp4"}`;
+    // --copy already produced final-codec segments, so concat can stream-copy.
+    // Otherwise the PCM intermediates are encoded here, once, for the whole file.
+    const concatCodecs = args.copy
+      ? ["-c", "copy"]
+      : isAudioOnly(outPath)
+        ? encodeArgsFor(extname(outPath).toLowerCase())
+        : ["-c:v", "copy", "-c:a", "aac", "-b:a", "192k", "-movflags", "+faststart"];
+    execFileSync(
+      "ffmpeg",
+      ["-y", "-f", "concat", "-safe", "0", "-i", listPath, ...concatCodecs, tmpOut],
+      {
+        stdio: "ignore",
+      },
+    );
+    renameSync(tmpOut, outPath);
+  } finally {
+    rmSync(tmpDir, { recursive: true, force: true });
+  }
+
+  // Stream copy can only cut on keyframes; on sparse-keyframe footage the snap
+  // can silently swallow the whole cut. Compare, then surface the drift in BOTH
+  // the stderr warning (human) and the --json result (pipelines).
+  let copyDrift = null;
+  if (args.copy) {
+    const outSeconds = probeDuration(outPath);
+    if (Math.abs(outSeconds - keptSeconds) > 1) {
+      copyDrift = { produced_s: round3(outSeconds), expected_s: round3(keptSeconds) };
+      if (!args.json) {
+        console.error(
+          `warning: --copy keyframe snapping produced ${round3(outSeconds)}s instead of ${round3(keptSeconds)}s kept; drop --copy for frame-accurate cuts`,
+        );
+      }
+    }
+  }
+
+  if (args.json) {
+    console.log(
+      JSON.stringify({
+        ok: true,
+        input: inputPath,
+        out: outPath,
+        segments,
+        kept_s: round3(keptSeconds),
+        total_s: round3(totalSeconds),
+        ...(copyDrift && { copy_drift: copyDrift }),
+      }),
+    );
+    return;
+  }
+
+  console.log(
+    `cut ${inputPath} -> ${outPath} (${segments.length} segments, ${fmt(keptSeconds)}s kept of ${fmt(
+      totalSeconds,
+    )}s)`,
+  );
+  console.log(`next: resolve --from ${outPath} --type <type>`);
+}
+
+function cutSegment(inputPath, segment, outPath, copy, fade) {
+  const argv = [
+    "-y",
+    "-nostdin",
+    "-ss",
+    seekTime(segment.start),
+    "-i",
+    inputPath,
+    "-to",
+    seekTime(segment.end - segment.start),
+  ];
+  if (copy) {
+    argv.push("-c", "copy", "-avoid_negative_ts", "make_zero");
+  } else if (extname(outPath).toLowerCase() === ".mov") {
+    // Concat splices raw segment edges together; without a short ramp the
+    // waveform steps discontinuously at every boundary and you hear a click.
+    if (fade) argv.push("-af", fade);
+    // Video intermediate: keep the picture cheap and the audio uncompressed.
+    argv.push("-c:v", "libx264", "-preset", "veryfast", "-crf", "18", "-c:a", "pcm_s16le");
+    // A keyframe every second. The renderer seeks into this footage, and x264
+    // on its own leaves up to 250 frames between keyframes.
+    argv.push("-force_key_frames", "expr:gte(t,n_forced)");
+    // Constant frame rate from the first frame. Left to itself, ffmpeg 7 starts
+    // a range that begins between two source frames one frame late, and .mov
+    // rounds that lead-in to the millisecond.
+    argv.push("-fps_mode", "cfr");
+  } else {
+    if (fade) argv.push("-af", fade);
+    argv.push("-c:a", "pcm_s16le");
+  }
+  argv.push(outPath);
+  execFileSync("ffmpeg", argv, { stdio: "ignore" });
+}
+
+// Codec set per output container. Audio-only outputs must not get the
+// video-centric aac/x264 set (aac inside .wav breaks timing entirely).
+function isAudioOnly(filePath) {
+  return [".wav", ".mp3", ".m4a", ".aac", ".flac"].includes(extname(filePath).toLowerCase());
+}
+
+function encodeArgsFor(ext) {
+  if (ext === ".wav") return ["-c:a", "pcm_s16le"];
+  if (ext === ".mp3") return ["-c:a", "libmp3lame", "-q:a", "2"];
+  if (ext === ".m4a" || ext === ".aac") return ["-c:a", "aac"];
+  if (ext === ".flac") return ["-c:a", "flac"];
+  return [
+    "-c:v",
+    "libx264",
+    "-preset",
+    "veryfast",
+    "-crf",
+    "18",
+    "-c:a",
+    "aac",
+    "-movflags",
+    "+faststart",
+  ];
+}
+
+function probeDuration(filePath) {
+  const raw = execFileSync(
+    "ffprobe",
+    [
+      "-v",
+      "error",
+      "-show_entries",
+      "format=duration",
+      "-of",
+      "default=noprint_wrappers=1:nokey=1",
+      "--",
+      filePath,
+    ],
+    { encoding: "utf8" },
+  );
+  const duration = Number(raw.trim());
+  if (!Number.isFinite(duration) || duration <= 0)
+    throw new Error(`could not probe duration: ${filePath}`);
+  return duration;
+}
+
+function escapeConcatPath(filePath) {
+  return filePath.replace(/'/g, "'\\''");
+}
+
+function sumDurations(segments) {
+  return segments.reduce((sum, segment) => sum + (segment.end - segment.start), 0);
+}
+
+function fmt(n) {
+  return round3(n)
+    .toFixed(3)
+    .replace(/\.?0+$/, "");
+}
+
+// -ss/-to name frames, and ffmpeg's accurate seek drops everything before the
+// time it is given: at 30 fps, frame 386 sits at 12.866666 s, and a 3-decimal
+// -ss of 12.867 starts that segment on frame 387 instead, leaving the cut a
+// frame short from the join on. So the values ffmpeg gets keep frame precision,
+// while fmt() above stays at 3 decimals for the times that are only printed.
+function seekTime(n) {
+  return Number(n).toFixed(6);
+}
+
+function round3(n) {
+  return Math.round(Number(n) * 1000) / 1000;
+}
diff --git a/.claude/skills/media-use/scripts/transcript-cut.test.mjs b/.claude/skills/media-use/scripts/transcript-cut.test.mjs
new file mode 100644
index 0000000..95852ad
--- /dev/null
+++ b/.claude/skills/media-use/scripts/transcript-cut.test.mjs
@@ -0,0 +1,341 @@
+import assert from "node:assert/strict";
+import { execFileSync, spawnSync } from "node:child_process";
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import test from "node:test";
+import { fileURLToPath } from "node:url";
+
+const SCRIPT = fileURLToPath(new URL("./transcript-cut.mjs", import.meta.url));
+const HAS_FFMPEG =
+  spawnSync("ffmpeg", ["-version"], { stdio: "ignore" }).status === 0 &&
+  spawnSync("ffprobe", ["-version"], { stdio: "ignore" }).status === 0;
+
+const SAMPLE_RATE = 44100;
+// A continuous tone's own slope between samples never exceeds amplitude * 2*pi*f/rate
+// (~2054 for 440Hz at full scale here); a raw splice between two independently-cut
+// points on the same tone lands at two unrelated phases, so an unfaded join jumps far
+// past that. This threshold sits well above normal tone motion and well below a splice.
+const MAX_CONTINUOUS_STEP = 6000;
+const MIN_SUSPICIOUS_ZERO_RUN = 20;
+
+function fixture() {
+  const dir = mkdtempSync(join(tmpdir(), "media-use-transcript-cut-"));
+  return { dir, cleanup: () => rmSync(dir, { recursive: true, force: true }) };
+}
+
+function run(args) {
+  return spawnSync(process.execPath, [SCRIPT, ...args], { encoding: "utf8" });
+}
+
+function readPcm(filePath) {
+  const raw = execFileSync("ffmpeg", [
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-i",
+    filePath,
+    "-f",
+    "s16le",
+    "-ac",
+    "1",
+    "-ar",
+    String(SAMPLE_RATE),
+    "-",
+  ]);
+  const samples = new Int16Array(raw.buffer, raw.byteOffset, raw.length / 2);
+  return samples;
+}
+
+// Three kept ranges, none starting or ending on a frame boundary of any rate below.
+const UNALIGNED_KEEP = "0.137-1.913,2.845-4.111,4.9-5.47";
+const UNALIGNED_KEPT_SECONDS = 1.776 + 1.266 + 0.57;
+
+function cutVideo(t, rate, keep = UNALIGNED_KEEP) {
+  const { dir, cleanup } = fixture();
+  t.after(cleanup);
+
+  const source = join(dir, "source.mp4");
+  execFileSync("ffmpeg", [
+    "-y",
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-f",
+    "lavfi",
+    "-i",
+    `testsrc2=size=160x90:rate=${rate}:duration=6`,
+    "-f",
+    "lavfi",
+    "-i",
+    `sine=frequency=440:duration=6:sample_rate=${SAMPLE_RATE}`,
+    "-c:v",
+    "libx264",
+    "-preset",
+    "ultrafast",
+    "-pix_fmt",
+    "yuv420p",
+    "-c:a",
+    "aac",
+    source,
+  ]);
+
+  const transcriptPath = join(dir, "transcript.json");
+  writeFileSync(transcriptPath, JSON.stringify({ words: [{ text: "tone", start: 0, end: 6 }] }));
+
+  const output = join(dir, "out.mp4");
+  const result = run([
+    "--input",
+    source,
+    "--transcript",
+    transcriptPath,
+    "--keep",
+    keep,
+    "--out",
+    output,
+    "--json",
+  ]);
+  assert.equal(result.status, 0, result.stderr || result.stdout);
+  return output;
+}
+
+function readVideoTimestamps(filePath) {
+  const probe = JSON.parse(
+    execFileSync(
+      "ffprobe",
+      [
+        "-v",
+        "error",
+        "-select_streams",
+        "v:0",
+        "-show_entries",
+        "stream=time_base:packet=pts",
+        "-of",
+        "json",
+        "--",
+        filePath,
+      ],
+      { encoding: "utf8" },
+    ),
+  );
+  const [tickNum, tickDen] = probe.streams[0].time_base.split("/").map(Number);
+  // Packets come in decode order; B-frames put that out of presentation order.
+  const pts = probe.packets.map((packet) => Number(packet.pts)).sort((a, b) => a - b);
+  return { tickNum, tickDen, pts };
+}
+
+for (const rate of ["30", "30000/1001", "60"]) {
+  test(
+    `puts every frame of a ${rate} fps video cut on the frame grid, with no gaps`,
+    { skip: !HAS_FFMPEG },
+    (t) => {
+      const [rateNum, rateDen = 1] = rate.split("/").map(Number);
+      const { tickNum, tickDen, pts } = readVideoTimestamps(cutVideo(t, rate));
+      assert.ok(pts.length > rateNum / rateDen, "expected several seconds of video");
+
+      // Frame i belongs at exactly i / rate seconds. Compared as integers, so a
+      // timestamp rounded to the millisecond (0.067 for 2/30) cannot pass.
+      const offGrid = pts.filter(
+        (value, index) => value * tickNum * rateNum !== index * rateDen * tickDen,
+      );
+      assert.equal(
+        offGrid.length,
+        0,
+        `${offGrid.length} of ${pts.length} frames are off the ${rate} fps grid (timestamps in units of ${tickNum}/${tickDen} s)`,
+      );
+    },
+  );
+}
+
+test(
+  "keeps the keyframes of a video cut no more than a second apart",
+  { skip: !HAS_FFMPEG },
+  (t) => {
+    // One kept range of almost four seconds, so only the encoder decides where keyframes go.
+    const output = cutVideo(t, "30", "0.137-4.111,4.9-5.47");
+    const probe = JSON.parse(
+      execFileSync(
+        "ffprobe",
+        [
+          "-v",
+          "error",
+          "-select_streams",
+          "v:0",
+          "-show_entries",
+          "packet=pts_time,flags",
+          "-of",
+          "json",
+          "--",
+          output,
+        ],
+        { encoding: "utf8" },
+      ),
+    );
+    const keyframes = probe.packets
+      .filter((packet) => packet.flags.startsWith("K"))
+      .map((packet) => Number(packet.pts_time))
+      .sort((a, b) => a - b);
+    const gaps = keyframes.slice(1).map((time, index) => time - keyframes[index]);
+    const widest = Math.max(...gaps);
+    // A frame of slack: the forced keyframe is the first frame at or after each second.
+    assert.ok(widest < 1.05, `keyframes are up to ${widest.toFixed(3)}s apart`);
+  },
+);
+
+test(
+  "does not pad the audio of a video cut with encoder priming at each splice",
+  { skip: !HAS_FFMPEG },
+  (t) => {
+    const seconds = readPcm(cutVideo(t, "30")).length / SAMPLE_RATE;
+    // The single AAC encode may round the end up by a frame or two (23 ms each).
+    // Encoding every segment separately instead adds about 25 ms per splice on top.
+    assert.ok(
+      Math.abs(seconds - UNALIGNED_KEPT_SECONDS) < 0.05,
+      `audio runs ${seconds.toFixed(3)}s for ${UNALIGNED_KEPT_SECONDS.toFixed(3)}s kept`,
+    );
+  },
+);
+
+test(
+  "keeps a spliced tone continuous at every cut, with no raw phase jump or silence gap",
+  { skip: !HAS_FFMPEG },
+  (t) => {
+    const { dir, cleanup } = fixture();
+    t.after(cleanup);
+
+    const source = join(dir, "tone.wav");
+    execFileSync("ffmpeg", [
+      "-y",
+      "-hide_banner",
+      "-loglevel",
+      "error",
+      "-f",
+      "lavfi",
+      "-i",
+      `sine=frequency=440:duration=6:sample_rate=${SAMPLE_RATE}`,
+      source,
+    ]);
+
+    const transcriptPath = join(dir, "transcript.json");
+    writeFileSync(transcriptPath, JSON.stringify({ words: [{ text: "tone", start: 0, end: 6 }] }));
+
+    const output = join(dir, "out.wav");
+    // Two "ugly" removal ranges: neither aligned to the 440Hz period, so the kept
+    // segments' cut edges land at unrelated phases of the same continuous tone --
+    // exactly the shape that clicks without a fade, and the shape jrusso1020's
+    // review proved this branch never actually fades.
+    const result = run([
+      "--input",
+      source,
+      "--transcript",
+      transcriptPath,
+      "--remove",
+      "1.37-1.83,3.29-3.71",
+      "--out",
+      output,
+      "--json",
+    ]);
+    assert.equal(result.status, 0, result.stderr || result.stdout);
+
+    const samples = readPcm(output);
+    assert.ok(samples.length > SAMPLE_RATE, "expected several seconds of audio");
+
+    let maxStep = 0;
+    let zeroRun = 0;
+    let maxZeroRun = 0;
+    for (let i = 1; i < samples.length; i++) {
+      const step = Math.abs(samples[i] - samples[i - 1]);
+      if (step > maxStep) maxStep = step;
+      if (samples[i] === 0) {
+        zeroRun++;
+        if (zeroRun > maxZeroRun) maxZeroRun = zeroRun;
+      } else {
+        zeroRun = 0;
+      }
+    }
+
+    assert.ok(
+      maxStep <= MAX_CONTINUOUS_STEP,
+      `largest sample-to-sample step was ${maxStep}, expected <= ${MAX_CONTINUOUS_STEP} (a raw, unfaded splice)`,
+    );
+    assert.ok(
+      maxZeroRun < MIN_SUSPICIOUS_ZERO_RUN,
+      `found a run of ${maxZeroRun} consecutive zero samples, expected < ${MIN_SUSPICIOUS_ZERO_RUN} (a priming-silence gap)`,
+    );
+  },
+);
+
+// Frame 32 at 30 fps sits at 1.0666666 s. A -ss rounded to 1.067 lands just past
+// it, so ffmpeg's accurate seek starts that segment on frame 33 and the cut comes
+// out a frame short from the join on.
+const THIRTY_FPS_FRAME_32 = 32 / 30;
+
+test("a kept range starting on a 30 fps frame keeps that frame", { skip: !HAS_FFMPEG }, (t) => {
+  const { dir, cleanup } = fixture();
+  t.after(cleanup);
+
+  const source = join(dir, "src.mp4");
+  execFileSync("ffmpeg", [
+    "-y",
+    "-hide_banner",
+    "-loglevel",
+    "error",
+    "-f",
+    "lavfi",
+    "-i",
+    "testsrc2=size=320x180:rate=30",
+    "-f",
+    "lavfi",
+    "-i",
+    `sine=frequency=440:sample_rate=${SAMPLE_RATE}`,
+    "-t",
+    "4",
+    "-c:v",
+    "libx264",
+    "-pix_fmt",
+    "yuv420p",
+    "-c:a",
+    "aac",
+    source,
+  ]);
+
+  const transcriptPath = join(dir, "transcript.json");
+  writeFileSync(transcriptPath, JSON.stringify([{ text: "a", start: 0.1, end: 3.9 }]));
+
+  const output = join(dir, "out.mp4");
+  const result = run([
+    "--input",
+    source,
+    "--transcript",
+    transcriptPath,
+    "--keep",
+    `0-1,${THIRTY_FPS_FRAME_32}-3`,
+    "--out",
+    output,
+    "--json",
+  ]);
+  assert.equal(result.status, 0, result.stderr || result.stdout);
+
+  // Frames 0-29 for 0-1s, then frames 32-89 for the second segment. Rounding
+  // -ss to the millisecond drops frame 32 and yields 87.
+  const frames = Number(
+    execFileSync(
+      "ffprobe",
+      [
+        "-v",
+        "error",
+        "-select_streams",
+        "v",
+        "-count_packets",
+        "-show_entries",
+        "stream=nb_read_packets",
+        "-of",
+        "csv=p=0",
+        "--",
+        output,
+      ],
+      { encoding: "utf8" },
+    ).trim(),
+  );
+  assert.equal(frames, 88, `expected 88 frames, got ${frames}`);
+});
diff --git a/.claude/skills/remotion-to-hyperframes/SKILL.md b/.claude/skills/remotion-to-hyperframes/SKILL.md
new file mode 100644
index 0000000..10ffe5f
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/SKILL.md
@@ -0,0 +1,49 @@
+---
+name: remotion-to-hyperframes
+description: Bring existing video code or footage into HyperFrames and verify it frame by frame against the original - Remotion first, also Motion Canvas, Lottie, Three.js, p5.js, canvas or plain HTML/CSS animation, or renders from Manim, After Effects or Blender. Use to port, convert, migrate or reuse work made with another tool.
+---
+
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.
+
+# Import into HyperFrames
+
+HyperFrames is the container: its tracks, sub-compositions and variables are editable in Studio whatever runs inside a clip. Bring each part in at the highest level it supports and record which level you used.
+
+| Level | For | How | Editable in Studio afterwards |
+| --- | --- | --- | --- |
+| Native | code that can become HTML + GSAP: most Remotion, HTML/CSS/GSAP animation, simple Motion Canvas | translate it, then verify frame by frame | every element; variables, catalog, presets apply |
+| Hosted | code that can draw any requested frame in a browser: canvas, p5.js, Three.js, Lottie, WebGL, other JS animation | keep the code and drive it from HyperFrames time | timing, position, exposed parameters |
+| Media | anything that outputs video or frames: Manim, After Effects, Blender, PIL, moviepy | render to a file and use it as a clip | cut, place, layer; not the pixels inside |
+
+Code that depends on wall-clock time, live physics or the network can only come in as media.
+
+## Native: translate, then verify
+
+1. For Remotion, run `python3 <SKILL_DIR>/scripts/lint_source.py <source dir>` first. Blockers (`useState`, `useReducer`, `useEffect` with dependencies, async `calculateMetadata`, React UI kits such as MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI) don't translate: host them or refactor them out, never approximate (`references/escape-hatch.md`). Warnings (`@remotion/lambda` config, `delayRender`, `useMemo`, custom hooks) are dropped and noted.
+2. Translate to the `/hyperframes` contract: one sub-composition per scene, times in seconds (`frame / fps`), asset paths root-relative. Each Remotion API's equivalent is in `references/api-map.md`.
+3. Keep it editable: the source's props become `data-composition-variables` bound with `data-var-text`, `data-var-src` or `var(--id)`; each `Sequence` becomes a timed clip or a sub-composition; a reused component becomes one sub-composition mounted several times with `data-variable-values`.
+4. Compare frame by frame: `npx hyperframes snapshot --at <t,…> --against <original.mp4>` saves the original's frame at each time next to yours. Sample every scene and both sides of every cut; look for one late or recoloured element, not only the overall picture. For a scored check, `scripts/render_diff.sh <original.mp4> <hf.mp4> <out>` gives SSIM per frame and `scripts/frame_strip.sh` shows which frames diverged (thresholds per complexity tier in `references/eval.md`). Render the Remotion side with `Config.setVideoImageFormat("png")` and `Config.setColorSpace("bt709")`, or the diff measures the encoders (about 0.05 SSIM).
+5. Write what didn't translate cleanly (dropped volume ramps, approximated presentations, substituted fonts) to `TRANSLATION_NOTES.md`.
+
+| Remotion | Read |
+| --- | --- |
+| `Composition`, `defaultProps`, `schema`, `calculateMetadata` | `references/parameters.md` |
+| `Sequence`, `Series`, `Loop`, `AbsoluteFill`, `Freeze` | `references/sequencing.md` |
+| `useCurrentFrame`, `interpolate`, `spring`, `Easing`, `interpolateColors` | `references/timing.md` |
+| `Audio`, `Video`, `Img`, `IFrame`, `staticFile`, `delayRender` | `references/media.md` |
+| `TransitionSeries`, `@remotion/transitions` | `references/transitions.md` |
+| `@remotion/lottie` | `references/lottie.md` |
+| `@remotion/google-fonts`, `Font.loadFont`, `@font-face` | `references/fonts.md` |
+| What can't be ported | `references/limitations.md` |
+
+Before hand-building a named visual the source used, search `npx hyperframes catalog --query "<the visual, in English>" --json`: it ranks the whole registry with nothing installed.
+
+## Hosted
+
+Keep the code and let HyperFrames own the clock: it draws the frame for the time it is given. The seek protocol and the built-in adapters for Lottie, Three.js, anime.js, WAAPI and CSS animations are in `../hyperframes/references/runtimes.md`. No `requestAnimationFrame` loop or timer as the time source, seeded randomness only, and `data-duration` on the root when nothing else defines the length.
+
+## Media
+
+`<video class="clip" data-has-audio="true" src="assets/x.mp4" ...>`, or `muted` when it is silent. Nothing else is needed.
+
+In the final message, list each imported part with its level, what a person can change in Studio, and how the frame-by-frame comparison came out.
diff --git a/.claude/skills/remotion-to-hyperframes/assets/.gitkeep b/.claude/skills/remotion-to-hyperframes/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/.gitignore b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/.gitignore
new file mode 100644
index 0000000..89d8102
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/.gitignore
@@ -0,0 +1 @@
+run-report.json
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/run.sh b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/run.sh
new file mode 100755
index 0000000..50920be
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/run.sh
@@ -0,0 +1,249 @@
+#!/usr/bin/env bash
+# run.sh — corpus orchestrator. Runs every tier and prints a pass/fail summary.
+#
+# Tiers 1-3: render Remotion baseline + HF translation, run SSIM diff,
+#            assert mean >= ssim_threshold from each fixture's expected.json.
+# Tier 4:    runs cases/validate.sh which lints each case and asserts against
+#            expected.json.
+#
+# Usage:
+#   ./run.sh                    run all tiers
+#   ./run.sh tier-1-title-card  run a single tier
+#
+# Requirements:
+#   - ffmpeg, ffprobe, python3 on PATH
+#   - node 22 (for the HF CLI)
+#   - npm (for Remotion installs)
+#   - HF CLI built at packages/cli/dist/cli.js (run `bun run --filter @hyperframes/cli build`
+#     in the repo root if missing)
+#
+# Output:
+#   <fixture>/diff/summary.json   per-fixture SSIM summary
+#   <fixture>/strip/strip.png     per-fixture comparison strip (only on fail)
+#   ./run-report.json             aggregate report
+
+set -euo pipefail
+
+THIS_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+SKILL_DIR="$(cd "$THIS_DIR/../.." && pwd)"
+REPO_ROOT="$(cd "$SKILL_DIR/../.." && pwd)"
+
+LINT="$SKILL_DIR/scripts/lint_source.py"
+DIFF="$SKILL_DIR/scripts/render_diff.sh"
+STRIP="$SKILL_DIR/scripts/frame_strip.sh"
+HF_CLI="$REPO_ROOT/packages/cli/dist/cli.js"
+REPORT="$THIS_DIR/run-report.json"
+
+# Per-fixture results land here as one JSON file each, then the aggregator
+# globs them. This is safer than building JSON via bash string concatenation
+# (a fixture name containing a quote would break the previous approach).
+RESULTS_DIR="$(mktemp -d)"
+trap 'rm -rf "$RESULTS_DIR"' EXIT
+
+# T4 is lint-only — no ffmpeg or HF CLI needed. Defer the render-tier
+# toolchain checks until run_render_tier() actually runs, so
+# `./run.sh tier-4-escape-hatch` works on a clean checkout.
+require_render_tier_tools() {
+  if [[ ! -f "$HF_CLI" ]]; then
+    echo "error: HF CLI not built at $HF_CLI" >&2
+    echo "       Run 'bun run --filter @hyperframes/cli build' in $REPO_ROOT" >&2
+    return 2
+  fi
+  if ! command -v ffmpeg >/dev/null 2>&1; then
+    echo "error: ffmpeg not on PATH" >&2
+    return 2
+  fi
+  return 0
+}
+
+# Write one fixture's result as a JSON file. Values are passed via argv so
+# bash string interpolation can't corrupt the JSON or inject Python source.
+write_result() {
+  local fixture_name="$1"
+  local status="$2"
+  shift 2
+  python3 - "$RESULTS_DIR/$fixture_name.json" "$fixture_name" "$status" "$@" <<'PY'
+import json
+import sys
+
+out_path, fixture_name, status, *kvs = sys.argv[1:]
+result = {"fixture": fixture_name, "status": status}
+for i in range(0, len(kvs), 2):
+    k, v = kvs[i], kvs[i + 1]
+    try:
+        result[k] = float(v) if "." in v or v.lstrip("-").isdigit() else v
+    except ValueError:
+        result[k] = v
+with open(out_path, "w") as f:
+    json.dump(result, f)
+PY
+}
+
+# Read a top-level scalar value from a JSON file. Falls back to $3 if the
+# key is missing (used to default composition_id for older fixtures).
+read_json_value() {
+  local file="$1"
+  local key="$2"
+  local default="${3:-}"
+  python3 - "$file" "$key" "$default" <<'PY'
+import json
+import sys
+
+path, key, default = sys.argv[1], sys.argv[2], sys.argv[3]
+with open(path) as f:
+    data = json.load(f)
+val = data.get(key, default)
+print(val if val is not None else "")
+PY
+}
+
+run_render_tier() {
+  local fixture_dir="$1"
+  local fixture_name
+  fixture_name=$(basename "$fixture_dir")
+  local expected="$fixture_dir/expected.json"
+
+  if ! require_render_tier_tools; then
+    echo "  ⚠ $fixture_name: render toolchain unavailable, skipping"
+    write_result "$fixture_name" "skipped" reason "render toolchain unavailable"
+    return 0
+  fi
+
+  local threshold composition_id
+  threshold=$(read_json_value "$expected" "ssim_threshold")
+  composition_id=$(read_json_value "$expected" "composition_id" "Composition")
+
+  echo "  ▶ $fixture_name (threshold $threshold, composition $composition_id)"
+
+  if [[ -x "$fixture_dir/setup.sh" ]]; then
+    "$fixture_dir/setup.sh" >/dev/null
+  fi
+
+  if ! python3 "$LINT" "$fixture_dir/remotion-src/src/" >/dev/null; then
+    echo "    ✗ lint failed (blockers in Remotion source)"
+    write_result "$fixture_name" "fail" stage "lint"
+    return 0
+  fi
+
+  if [[ ! -d "$fixture_dir/remotion-src/node_modules" ]]; then
+    echo "    ⏳ npm install (first run)"
+    (cd "$fixture_dir/remotion-src" && npm install --silent --no-progress >/dev/null 2>&1)
+  fi
+
+  echo "    ⏳ render Remotion baseline"
+  if ! (cd "$fixture_dir/remotion-src" && \
+        npx --no-install remotion render "$composition_id" out/baseline.mp4 >/dev/null 2>&1); then
+    echo "    ✗ Remotion render failed"
+    write_result "$fixture_name" "fail" stage "remotion-render"
+    return 0
+  fi
+
+  echo "    ⏳ render HF translation"
+  if ! (cd "$fixture_dir" && \
+        node "$HF_CLI" render hf-src/ --output hf.mp4 --quiet >/dev/null 2>&1); then
+    echo "    ✗ HF render failed"
+    write_result "$fixture_name" "fail" stage "hf-render"
+    return 0
+  fi
+
+  if R2HF_SSIM_THRESHOLD="$threshold" "$DIFF" \
+      "$fixture_dir/remotion-src/out/baseline.mp4" \
+      "$fixture_dir/hf.mp4" \
+      "$fixture_dir/diff" >/dev/null; then
+    local mean
+    mean=$(read_json_value "$fixture_dir/diff/summary.json" "mean")
+    echo "    ✓ pass (mean SSIM $mean, threshold $threshold)"
+    write_result "$fixture_name" "pass" mean_ssim "$mean" threshold "$threshold"
+  else
+    local mean
+    mean=$(read_json_value "$fixture_dir/diff/summary.json" "mean")
+    echo "    ✗ fail (mean SSIM $mean, threshold $threshold)"
+    "$STRIP" \
+      "$fixture_dir/remotion-src/out/baseline.mp4" \
+      "$fixture_dir/hf.mp4" \
+      "$fixture_dir/strip" 8 >/dev/null
+    write_result "$fixture_name" "fail" stage "ssim" mean_ssim "$mean" threshold "$threshold"
+  fi
+}
+
+run_lint_tier() {
+  local fixture_dir="$1"
+  local fixture_name
+  fixture_name=$(basename "$fixture_dir")
+
+  echo "  ▶ $fixture_name (lint-only)"
+  if "$fixture_dir/validate.sh" >/dev/null 2>&1; then
+    echo "    ✓ pass (8/8 cases)"
+    write_result "$fixture_name" "pass" mode "lint"
+  else
+    echo "    ✗ fail (some cases mismatched expected.json)"
+    write_result "$fixture_name" "fail" mode "lint"
+  fi
+}
+
+echo "remotion-to-hyperframes corpus run"
+echo "=================================="
+
+for tier in tier-1-title-card tier-2-multi-scene tier-3-data-driven; do
+  if [[ -n "${1:-}" && "$1" != "$tier" ]]; then
+    continue
+  fi
+  if [[ -d "$THIS_DIR/$tier" ]]; then
+    run_render_tier "$THIS_DIR/$tier"
+  fi
+done
+
+if [[ -z "${1:-}" || "$1" == "tier-4-escape-hatch" ]]; then
+  if [[ -d "$THIS_DIR/tier-4-escape-hatch" ]]; then
+    run_lint_tier "$THIS_DIR/tier-4-escape-hatch"
+  fi
+fi
+
+# Aggregate the per-fixture JSON files into one report.
+#
+# Skipped fixtures are *not* a pass — they mean a tier didn't run because
+# tooling or fixtures were unavailable. The orchestrator exits non-zero on
+# any skip so a clean checkout that lacks the HF CLI doesn't accidentally
+# report "passed 1/4" (T4 alone) and look like the corpus is healthy.
+#
+# Single-tier mode (`./run.sh tier-N`) only writes a result file for the
+# selected tier; tiers that weren't run aren't counted as skips.
+python3 - "$RESULTS_DIR" "$REPORT" <<'PY'
+import json
+import sys
+from pathlib import Path
+
+results_dir, out_path = Path(sys.argv[1]), Path(sys.argv[2])
+results = sorted(
+    (json.loads(p.read_text()) for p in results_dir.glob("*.json")),
+    key=lambda r: r["fixture"],
+)
+
+total = len(results)
+passed = sum(1 for r in results if r["status"] == "pass")
+failed = sum(1 for r in results if r["status"] == "fail")
+skipped = sum(1 for r in results if r["status"] == "skipped")
+report = {
+    "total": total,
+    "passed": passed,
+    "failed": failed,
+    "skipped": skipped,
+    "results": results,
+}
+out_path.write_text(json.dumps(report, indent=2))
+
+print()
+print("=" * 50)
+print(f"  passed {passed}/{total}, failed {failed}, skipped {skipped}")
+print(f"  report → {out_path}")
+if skipped > 0:
+    skipped_fixtures = [r["fixture"] for r in results if r["status"] == "skipped"]
+    skipped_reasons = sorted({r.get("reason", "unknown") for r in results if r["status"] == "skipped"})
+    print()
+    print(f"  ⚠ {skipped} skipped: {', '.join(skipped_fixtures)}")
+    for reason in skipped_reasons:
+        print(f"    reason: {reason}")
+    print("  Skipped fixtures count as failures for the aggregate.")
+print("=" * 50)
+sys.exit(0 if failed == 0 and skipped == 0 else 1)
+PY
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/.gitignore b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/.gitignore
new file mode 100644
index 0000000..d458771
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/.gitignore
@@ -0,0 +1,10 @@
+# Render output
+remotion-src/out/
+hf-src/out/
+hf.mp4
+diff/
+strip/
+
+# Remotion / HF dependencies
+node_modules/
+package-lock.json
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/README.md b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/README.md
new file mode 100644
index 0000000..7b49680
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/README.md
@@ -0,0 +1,41 @@
+# Tier 1 — title-card-fade
+
+## What it tests
+
+The simplest non-trivial Remotion → HyperFrames translation. A single text
+element fades in over the first 0.5 s, holds for 2.0 s, and fades out over
+the last 0.5 s. No audio, no media, no custom components.
+
+If a translation can't pass T1, it's broken on table-stakes basics:
+`AbsoluteFill`, `useCurrentFrame`, `interpolate` with multi-segment input,
+and the timing offset between Remotion's frame-based driver and HF's
+paused-GSAP driver.
+
+## Translation walk-through
+
+| Remotion                                                      | HyperFrames                                                                                             |
+| ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `<AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>`       | `<body style="background: #0a0a0a">` + a positioned root div                                            |
+| `useCurrentFrame()`                                           | dropped — HF seeks the timeline                                                                         |
+| `interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0])` at fps=30 | `gsap.timeline({ paused: true })` with three `.to()` calls at offsets 0s/0.5s/2.5s, each `ease: "none"` |
+| `<div style={{ opacity }}>HELLO</div>`                        | static markup; opacity is animated by the timeline                                                      |
+
+The Remotion→HF time conversion is `time = frame / fps`. So
+`[0, 15, 75, 90]` at 30 fps becomes `[0, 0.5, 2.5, 3.0]` seconds.
+
+## How to render and evaluate
+
+```bash
+# Render Remotion baseline
+cd remotion-src && npm install && npm run render
+# Renders to remotion-src/out/baseline.mp4
+
+# Render HyperFrames translation
+cd ../hf-src && npx hyperframes render --output ../hf.mp4
+
+# Compare with the eval harness (from skill scripts/)
+../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
+```
+
+`expected.json` documents the SSIM threshold (0.95) for this fixture; the
+calibrated mean against Remotion @ 4.0 with PNG/BT.709 output is 0.974.
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/expected.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/expected.json
new file mode 100644
index 0000000..4565c53
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/expected.json
@@ -0,0 +1,26 @@
+{
+  "tier": 1,
+  "name": "title-card-fade",
+  "composition_id": "TitleCard",
+  "description": "Solid black background, single 'HELLO' element fades in 0-0.5s, holds 0.5-2.5s, fades out 2.5-3.0s. Tests the most basic Remotion → HyperFrames translation: a single AbsoluteFill, a single useCurrentFrame-driven interpolate, no audio, no media, no custom React components.",
+  "duration_seconds": 3,
+  "fps": 30,
+  "width": 1280,
+  "height": 720,
+  "ssim_threshold": 0.95,
+  "validation": {
+    "measured_mean_ssim": 0.974,
+    "measured_min_ssim": 0.973,
+    "measured_p05_ssim": 0.973,
+    "measured_p95_ssim": 0.984,
+    "measured_at": "2026-09-18",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.7.71 (sub-composition fixtures)"
+  },
+  "translation_notes": [
+    "Remotion: AbsoluteFill → HF: position:absolute;inset:0 div",
+    "Remotion: interpolate(frame, [0,15,75,90], [0,1,1,0]) at fps=30 → HF: paused GSAP timeline with three keyframed tweens at 0s, 0.5s, 2.5s with ease:'none' (linear matches Remotion's default linear interpolation)",
+    "No fonts loaded; both renderers use system Helvetica/Arial fallback. The Linux fallback diverges between Remotion's bundled Chromium and HyperFrames' chrome-headless-shell — same fontWeight:800 renders perceptibly bolder in HF. This costs ~0.025 mean SSIM and is the dominant non-translation noise floor.",
+    "Remotion config must use setVideoImageFormat('png') + setColorSpace('bt709'); the JPEG default writes yuvj420p (full-range) which costs ~0.05 SSIM vs HF's yuv420p (limited-range)."
+  ],
+  "rationale": "Threshold 0.95 sits ~0.02 below measured p05. A real translation regression (wrong easing, wrong durations) drops mean SSIM by 0.05+. Encoder/font drift between CI runs is bounded at ~0.01."
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/compositions/title.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/compositions/title.html
new file mode 100644
index 0000000..d228708
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/compositions/title.html
@@ -0,0 +1,31 @@
+<template id="title-scene-template">
+  <div data-composition-id="title-scene" data-width="1280" data-height="720" data-duration="3">
+    <style>
+      .title {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #ffffff;
+        font-size: 160px;
+        font-weight: 800;
+        letter-spacing: 0.05em;
+        opacity: 0;
+      }
+    </style>
+    <div class="title">HELLO</div>
+    <script>
+      // Translation of Remotion's
+      //   interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0]) at fps=30
+      // into a paused GSAP timeline keyed in seconds.
+      const tl = gsap.timeline({ paused: true });
+      const target = document.querySelector(".title");
+      tl.to(target, { opacity: 1, duration: 0.5, ease: "none" }, 0);
+      tl.to(target, { opacity: 1, duration: 2.0, ease: "none" }, 0.5);
+      tl.to(target, { opacity: 0, duration: 0.5, ease: "none" }, 2.5);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["title-scene"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html
new file mode 100644
index 0000000..68ee419
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>tier-1-title-card</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+        background: #0a0a0a;
+        font-family: Helvetica, Arial, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="stage"
+      data-composition-id="tier-1-title-card"
+      data-start="0"
+      data-width="1280"
+      data-height="720"
+      data-duration="3"
+      data-fps="30"
+    >
+      <div
+        id="title"
+        class="clip"
+        data-composition-id="title-scene"
+        data-composition-src="compositions/title.html"
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+      ></div>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tier-1-title-card"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/package.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/package.json
new file mode 100644
index 0000000..1c33b63
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "tier-1-title-card-remotion",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "render": "remotion render TitleCard out/baseline.mp4"
+  },
+  "dependencies": {
+    "@remotion/cli": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remotion": "^4.0.0"
+  }
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/remotion.config.ts b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/remotion.config.ts
new file mode 100644
index 0000000..a22cafc
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/remotion.config.ts
@@ -0,0 +1,13 @@
+import { Config } from "@remotion/cli/config";
+
+// Match HyperFrames' default render so SSIM diffs measure translation
+// fidelity, not encoder differences.
+//
+//   setVideoImageFormat("png") avoids the JPEG limited-range/full-range
+//   colorspace flag (yuvj420p vs yuv420p) that otherwise costs ~0.05 SSIM.
+//
+//   setColorSpace("bt709") matches HF's BT.709 SDR output.
+Config.setVideoImageFormat("png");
+Config.setColorSpace("bt709");
+Config.setOverwriteOutput(true);
+Config.setConcurrency(1);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/Root.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/Root.tsx
new file mode 100644
index 0000000..f8dd727
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/Root.tsx
@@ -0,0 +1,13 @@
+import { Composition } from "remotion";
+import { TitleCard } from "./TitleCard";
+
+export const RemotionRoot = () => (
+  <Composition
+    id="TitleCard"
+    component={TitleCard}
+    durationInFrames={90}
+    fps={30}
+    width={1280}
+    height={720}
+  />
+);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/TitleCard.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/TitleCard.tsx
new file mode 100644
index 0000000..924557f
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/TitleCard.tsx
@@ -0,0 +1,34 @@
+import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";
+
+export const TitleCard = () => {
+  const frame = useCurrentFrame();
+
+  // Fade in 0-15, hold 15-75, fade out 75-90.
+  const opacity = interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0a0a0a",
+        justifyContent: "center",
+        alignItems: "center",
+        fontFamily: "Helvetica, Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 160,
+          fontWeight: 800,
+          color: "#ffffff",
+          opacity,
+          letterSpacing: "0.05em",
+        }}
+      >
+        HELLO
+      </div>
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/index.ts b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/index.ts
new file mode 100644
index 0000000..f31c790
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/src/index.ts
@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json
new file mode 100644
index 0000000..eb6f0f8
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/remotion-src/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/.gitignore b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/.gitignore
new file mode 100644
index 0000000..def72ea
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/.gitignore
@@ -0,0 +1,14 @@
+# Generated by setup.sh
+remotion-src/public/
+hf-src/assets/
+
+# Remotion / HF dependencies
+remotion-src/node_modules/
+remotion-src/package-lock.json
+
+# Render output
+remotion-src/out/
+hf-src/out/
+hf.mp4
+diff/
+strip/
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md
new file mode 100644
index 0000000..f2a1716
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md
@@ -0,0 +1,54 @@
+# Tier 2 — title-image-outro
+
+## What it tests
+
+Three-scene composition. Each scene exercises a different Remotion idiom:
+
+1. **Scene 1 (0–2 s)** — TitleScene with `spring({damping:12, stiffness:100, mass:1})`
+   driving a `transform: scale()` on text. Tests the lossy `spring → GSAP ease` translation.
+2. **Scene 2 (2–4 s)** — ImageScene that fades in a `staticFile`-loaded image and
+   linearly scales it from 0.8 → 1.0. Tests asset paths + linear `interpolate`.
+3. **Scene 3 (4–6 s)** — OutroScene with a 1-s linear fade-in. Sanity check after
+   the harder scenes.
+
+A silent 6-second WAV plays throughout at `volume={0.5}`. Tests `<Audio>` translation.
+
+If a translation passes T2, the skill correctly handles `<Sequence>` boundaries,
+`<Audio>` / `<Img>` / `staticFile`, and the Remotion `spring → GSAP ease` heuristic.
+
+## Translation walk-through
+
+| Remotion                                                            | HyperFrames                                                                                                         |
+| ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `<Sequence from={0} durationInFrames={60}>`                         | host `<div data-composition-src="compositions/scene-1.html" data-start="0" data-duration="2" data-track-index="0">` |
+| `spring({frame, fps, config: {damping:12, stiffness:100, mass:1}})` | `gsap.to(target, { scale: 1, duration: 0.7, ease: "back.out(1.4)" })`                                               |
+| `<Audio src={staticFile("music.wav")} volume={0.5} />`              | `<audio src="assets/music.wav" data-start="0" data-duration="6" data-volume="0.5" data-track-index="1">`            |
+| `<Img src={staticFile("square.png")} />`                            | `<img src="../assets/square.png">` inside `compositions/scene-2.html` (with setup.sh copying into both trees)       |
+| `interpolate(frame, [0, 15], [0, 1])` at 30 fps                     | `gsap.to(target, { opacity: 1, duration: 0.5, ease: "none" })`                                                      |
+
+The scene crossfading is a HyperFrames idiom, not a Remotion one: at scene boundaries
+each scene sub-composition sets its own `gsap.set(scene, { opacity: 0 })` at its local end so the scene disappears at the
+right time. Remotion does this implicitly by virtue of `<Sequence>`'s durationInFrames.
+
+## How to render and evaluate
+
+```bash
+# 1. Generate the binary assets (PNG + WAV) via ffmpeg
+./setup.sh
+
+# 2. Render Remotion baseline
+cd remotion-src && npm install && npm run render
+
+# 3. Render HyperFrames translation
+cd ../hf-src && npx hyperframes render --output ../hf.mp4
+
+# 4. Compare
+../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
+```
+
+## Why threshold 0.95?
+
+Same threshold as T1 (`expected.json` codifies it for the orchestrator). Spring → `back.out(1.4)`
+came in cleaner than predicted during calibration — the validated mean is 0.985 against the
+0.95 gate. If the translation breaks anything else (spring overshoot wrong, stagger off,
+asset path drift), mean SSIM will fall well below 0.95 — that's the failure signal.
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json
new file mode 100644
index 0000000..df13d4b
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json
@@ -0,0 +1,29 @@
+{
+  "tier": 2,
+  "name": "title-image-outro",
+  "composition_id": "MultiScene",
+  "description": "Three-scene composition exercising Sequence, spring, interpolate, Audio, Img, and staticFile. Title scene uses Remotion's spring (translated to GSAP back.out as an approximation). Image scene scales an Img (from staticFile) with linear interpolate. Outro scene fades text in linearly. A silent WAV plays throughout at volume 0.5.",
+  "duration_seconds": 6,
+  "fps": 30,
+  "width": 1280,
+  "height": 720,
+  "ssim_threshold": 0.95,
+  "validation": {
+    "measured_mean_ssim": 0.986,
+    "measured_min_ssim": 0.964,
+    "measured_p05_ssim": 0.967,
+    "measured_p95_ssim": 1,
+    "measured_at": "2026-09-18",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.7.71 (sub-composition fixtures)",
+    "notes": "Spring → back.out(1.4) translation came out cleaner than expected; mean 0.986 leaves substantial headroom over 0.95."
+  },
+  "translation_notes": [
+    "spring({damping:12, stiffness:100, mass:1}) → back.out(1.4) over 0.7s. Spring overshoot+settle and back.out's overshoot+settle have similar shape; budget ~0.02 SSIM for the late-tail curvature mismatch (validated lower than predicted in spec; original notes overestimated drift).",
+    "<Sequence from durationInFrames> → a sub-composition host with data-start/data-duration in seconds; the scene's own file uses local time and explicit gsap.set(opacity, 0/1) at its boundaries to crossfade in/out cleanly",
+    "<Audio src volume> → <audio data-start data-duration data-volume>",
+    "<Img src={staticFile('x')}> → <img src='assets/x'> (`../assets/x` inside the scene sub-composition file); setup.sh copies the asset into both fixture trees",
+    "interpolate with default linear easing → ease:'none' in GSAP",
+    "Fonts again rely on system Helvetica/Arial; ~0.015 SSIM cost from AA differences"
+  ],
+  "rationale": "Threshold 0.95 sits ~0.015 below measured p05 (0.966). T2 actually validated cleaner than T1 because the lower title fontWeight (140px vs T1's 160px) shows less of the system-font fallback divergence."
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-1.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-1.html
new file mode 100644
index 0000000..a980273
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-1.html
@@ -0,0 +1,35 @@
+<template id="scene-1-template">
+  <div data-composition-id="scene-1" data-width="1280" data-height="720" data-duration="2">
+    <style>
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      .title {
+        font-size: 140px;
+        font-weight: 800;
+        color: #ffffff;
+        letter-spacing: 0.05em;
+        transform: scale(0);
+      }
+    </style>
+    <div class="scene">
+      <div class="title">Welcome</div>
+    </div>
+    <script>
+      // Scene 1 (0-2s): spring scale on "Welcome". Remotion:
+      //   spring({frame, fps, config: {damping:12, stiffness:100, mass:1}}) -> back.out(1.4) over ~0.7s.
+      const tl = gsap.timeline({ paused: true });
+      const scene = document.querySelector(".scene");
+      tl.set(scene, { opacity: 1 }, 0);
+      tl.to(scene.querySelector(".title"), { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
+      tl.set(scene, { opacity: 0 }, 2);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scene-1"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-2.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-2.html
new file mode 100644
index 0000000..d2b1b3b
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-2.html
@@ -0,0 +1,35 @@
+<template id="scene-2-template">
+  <div data-composition-id="scene-2" data-width="1280" data-height="720" data-duration="2">
+    <style>
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      .square {
+        width: 200px;
+        height: 200px;
+        opacity: 0;
+        transform: scale(0.8);
+      }
+    </style>
+    <div class="scene">
+      <img class="square" src="../assets/square.png" alt="" />
+    </div>
+    <script>
+      // Scene 2 (2-4s, local 0-2s): opacity 0->1 over 0.5s, scale 0.8->1.0 over 2s, both linear.
+      const tl = gsap.timeline({ paused: true });
+      const scene = document.querySelector(".scene");
+      const square = scene.querySelector(".square");
+      tl.set(scene, { opacity: 1 }, 0);
+      tl.to(square, { opacity: 1, duration: 0.5, ease: "none" }, 0);
+      tl.to(square, { scale: 1.0, duration: 2.0, ease: "none" }, 0);
+      tl.set(scene, { opacity: 0 }, 2);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scene-2"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-3.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-3.html
new file mode 100644
index 0000000..3a5b1fb
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-3.html
@@ -0,0 +1,36 @@
+<template id="scene-3-template">
+  <div data-composition-id="scene-3" data-width="1280" data-height="720" data-duration="2">
+    <style>
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      .outro {
+        font-size: 100px;
+        font-weight: 600;
+        color: #ffffff;
+      }
+    </style>
+    <div class="scene">
+      <div class="outro">Goodbye</div>
+    </div>
+    <script>
+      // Scene 3 (4-6s, local 0-2s): opacity 0->1 over 1s, linear.
+      const tl = gsap.timeline({ paused: true });
+      const scene = document.querySelector(".scene");
+      tl.set(scene, { opacity: 1 }, 0);
+      tl.fromTo(
+        scene.querySelector(".outro"),
+        { opacity: 0 },
+        { opacity: 1, duration: 1.0, ease: "none" },
+        0,
+      );
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scene-3"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html
new file mode 100644
index 0000000..0da4aa7
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>tier-2-multi-scene</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+        background: #0a0a0a;
+        font-family: Helvetica, Arial, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="stage"
+      data-composition-id="tier-2-multi-scene"
+      data-start="0"
+      data-width="1280"
+      data-height="720"
+      data-duration="6"
+      data-fps="30"
+    >
+      <div
+        id="scene-1"
+        class="clip"
+        data-composition-id="scene-1"
+        data-composition-src="compositions/scene-1.html"
+        data-start="0"
+        data-duration="2"
+        data-track-index="0"
+      ></div>
+
+      <div
+        id="scene-2"
+        class="clip"
+        data-composition-id="scene-2"
+        data-composition-src="compositions/scene-2.html"
+        data-start="2"
+        data-duration="2"
+        data-track-index="0"
+      ></div>
+
+      <div
+        id="scene-3"
+        class="clip"
+        data-composition-id="scene-3"
+        data-composition-src="compositions/scene-3.html"
+        data-start="4"
+        data-duration="2"
+        data-track-index="0"
+      ></div>
+
+      <audio
+        id="bg-music"
+        data-start="0"
+        data-duration="6"
+        data-track-index="1"
+        data-volume="0.5"
+        src="assets/music.wav"
+      ></audio>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tier-2-multi-scene"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/package.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/package.json
new file mode 100644
index 0000000..88b0883
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "tier-2-multi-scene-remotion",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "render": "remotion render MultiScene out/baseline.mp4"
+  },
+  "dependencies": {
+    "@remotion/cli": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remotion": "^4.0.0"
+  }
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts
new file mode 100644
index 0000000..a22cafc
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/remotion.config.ts
@@ -0,0 +1,13 @@
+import { Config } from "@remotion/cli/config";
+
+// Match HyperFrames' default render so SSIM diffs measure translation
+// fidelity, not encoder differences.
+//
+//   setVideoImageFormat("png") avoids the JPEG limited-range/full-range
+//   colorspace flag (yuvj420p vs yuv420p) that otherwise costs ~0.05 SSIM.
+//
+//   setColorSpace("bt709") matches HF's BT.709 SDR output.
+Config.setVideoImageFormat("png");
+Config.setColorSpace("bt709");
+Config.setOverwriteOutput(true);
+Config.setConcurrency(1);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx
new file mode 100644
index 0000000..362d967
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/MultiScene.tsx
@@ -0,0 +1,105 @@
+import {
+  AbsoluteFill,
+  Audio,
+  Img,
+  Sequence,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+
+const TitleScene = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const scale = spring({ frame, fps, config: { damping: 12, stiffness: 100, mass: 1 } });
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0a0a0a",
+        justifyContent: "center",
+        alignItems: "center",
+        fontFamily: "Helvetica, Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 140,
+          fontWeight: 800,
+          color: "#ffffff",
+          transform: `scale(${scale})`,
+          letterSpacing: "0.05em",
+        }}
+      >
+        Welcome
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+const ImageScene = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
+  const scale = interpolate(frame, [0, 60], [0.8, 1.0], { extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0a0a0a",
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Img
+        src={staticFile("square.png")}
+        style={{
+          width: 200,
+          height: 200,
+          opacity,
+          transform: `scale(${scale})`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+};
+
+const OutroScene = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill
+      style={{
+        backgroundColor: "#0a0a0a",
+        justifyContent: "center",
+        alignItems: "center",
+        fontFamily: "Helvetica, Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 100,
+          fontWeight: 600,
+          color: "#ffffff",
+          opacity,
+        }}
+      >
+        Goodbye
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const MultiScene = () => (
+  <AbsoluteFill>
+    <Sequence from={0} durationInFrames={60}>
+      <TitleScene />
+    </Sequence>
+    <Sequence from={60} durationInFrames={60}>
+      <ImageScene />
+    </Sequence>
+    <Sequence from={120} durationInFrames={60}>
+      <OutroScene />
+    </Sequence>
+    <Audio src={staticFile("music.wav")} volume={0.5} />
+  </AbsoluteFill>
+);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx
new file mode 100644
index 0000000..37703e9
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/Root.tsx
@@ -0,0 +1,13 @@
+import { Composition } from "remotion";
+import { MultiScene } from "./MultiScene";
+
+export const RemotionRoot = () => (
+  <Composition
+    id="MultiScene"
+    component={MultiScene}
+    durationInFrames={180}
+    fps={30}
+    width={1280}
+    height={720}
+  />
+);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts
new file mode 100644
index 0000000..f31c790
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/src/index.ts
@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json
new file mode 100644
index 0000000..eb6f0f8
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/remotion-src/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/setup.sh b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/setup.sh
new file mode 100755
index 0000000..9182123
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/setup.sh
@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+# setup.sh — generate the binary assets this fixture needs.
+#
+# Both Remotion and HyperFrames variants need a 200x200 blue PNG and a
+# 6-second silent WAV. Generating them via ffmpeg keeps binaries out of
+# the repo while still letting the fixture render reproducibly.
+#
+# Run from the fixture root: ./setup.sh
+
+set -euo pipefail
+
+THIS_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+if ! command -v ffmpeg >/dev/null 2>&1; then
+  echo "error: ffmpeg not on PATH" >&2
+  exit 2
+fi
+
+mkdir -p "$THIS_DIR/remotion-src/public" "$THIS_DIR/hf-src/assets"
+
+# 200x200 solid blue PNG, ~200 bytes.
+ffmpeg -y -hide_banner -loglevel error \
+  -f lavfi -i "color=color=#3066be:size=200x200" -frames:v 1 \
+  "$THIS_DIR/remotion-src/public/square.png"
+cp "$THIS_DIR/remotion-src/public/square.png" "$THIS_DIR/hf-src/assets/square.png"
+
+# 6-second silent WAV at 8 kHz mono. ~96 KB if checked in, but it is generated.
+ffmpeg -y -hide_banner -loglevel error \
+  -f lavfi -i "anullsrc=cl=mono:r=8000" -t 6 -acodec pcm_s16le \
+  "$THIS_DIR/remotion-src/public/music.wav"
+cp "$THIS_DIR/remotion-src/public/music.wav" "$THIS_DIR/hf-src/assets/music.wav"
+
+echo "generated:"
+ls -la "$THIS_DIR/remotion-src/public/" "$THIS_DIR/hf-src/assets/"
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/.gitignore b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/.gitignore
new file mode 100644
index 0000000..d458771
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/.gitignore
@@ -0,0 +1,10 @@
+# Render output
+remotion-src/out/
+hf-src/out/
+hf.mp4
+diff/
+strip/
+
+# Remotion / HF dependencies
+node_modules/
+package-lock.json
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md
new file mode 100644
index 0000000..7117333
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md
@@ -0,0 +1,85 @@
+# Tier 3 — stargazed-data-driven
+
+## What it tests
+
+A purpose-built data-driven fixture that exercises the realistic shape of a
+production Remotion composition without using the runtime adapter from
+PR #214. If a translation passes T3, the skill correctly handles:
+
+- A `<Composition>` with a `z.object` schema and typed `defaultProps`
+- Custom React subcomponents reused with different props across scenes
+- A nested data structure (`stats[]`) materialized as repeated HTML with
+  per-instance attributes
+- A frame-driven count-up animation (`AnimatedNumber` → GSAP `onUpdate`)
+- Two different `spring` configs translated to two different `back.out` overshoots
+- Per-instance delays via component props (`delayInFrames` → GSAP timeline offsets)
+
+## Composition shape
+
+```
+Stargazed (10 s @ 30 fps, 1280×720)
+├── Sequence 0–3 s   TitleScene
+│                    ├── title  ← spring scale
+│                    └── subtitle ← linear fade
+├── Sequence 3–7 s   StatsScene
+│                    ├── StatCard "Stars" 1247 #fbbf24 (delay 0 frames)
+│                    ├── StatCard "Forks" 312 #60a5fa  (delay 12 frames)
+│                    └── StatCard "Issues" 48 #f87171  (delay 24 frames)
+└── Sequence 7–10 s  OutroScene
+                     └── UnderlinedText "thanks for watching" ← scale-in underline
+```
+
+Each `StatCard` is a custom subcomponent that internally uses `AnimatedNumber`
+to count from 0 to the target. `AnimatedNumber` itself derives the displayed
+value from `useCurrentFrame()` + a manual `1 - (1 - t)^3` ease.
+
+## The lossy parts (and why threshold = 0.90)
+
+1. **`spring → back.out(N)`**: two different spring configs in this composition.
+   - `{ damping: 12, stiffness: 100, mass: 1 }` (title) → `back.out(1.4)`
+   - `{ damping: 14, stiffness: 90, mass: 1 }` (stat card) → `back.out(1.2)`
+
+   Overshoot ratio (1.4 vs 1.2) approximates the damping difference. The
+   late-tail curve of GSAP's back ease and Remotion's spring don't match
+   exactly — costs ~0.03 mean SSIM per spring instance.
+
+2. **Count-up easing**: `AnimatedNumber` uses `1 - (1 - t)^3` (cubic ease-out)
+   manually computed in the component. GSAP's `power3.out` is the same curve
+   shape — should match closely. The displayed integer is rounded each frame
+   in both renderers; minor mismatches occur when the rounded value flips
+   between two numbers on a sub-frame timing difference.
+
+3. **Font rendering**: same caveat as T1/T2. System Helvetica/Arial fallback
+   produces minor anti-aliasing differences between renderers. Affects the
+   stat card numbers (large weight 800) most.
+
+A mean SSIM below 0.90 in T3 indicates a _structural_ mismatch (wrong scene
+durations, wrong stagger timing, missing prop wiring), not approximation
+drift. That's the failure signal we care about. The calibrated mean against
+Remotion @ 4.0 with PNG/BT.709 output is 0.953.
+
+## Translation walk-through (skill cheat sheet)
+
+| Remotion                                                                    | HyperFrames                                                                           |
+| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| `<Composition schema={z.object({...})} defaultProps={...} />`               | data-\* attributes on root `#stage` div                                               |
+| nested array prop (`stats[]`)                                               | repeated HTML markup with per-instance `data-*` attrs                                 |
+| custom React subcomponent                                                   | inline repeated HTML using the component's prop interface as the template             |
+| `<AnimatedNumber from={0} to={value} dur={45} />` (cubic ease-out count-up) | tween on `{ v: 0 }` object with `onUpdate` rewriting `textContent`, ease `power3.out` |
+| `spring({damping:12, stiffness:100})`                                       | `back.out(1.4)` over ~0.7 s                                                           |
+| `spring({damping:14, stiffness:90})`                                        | `back.out(1.2)` over ~0.7 s                                                           |
+| `delayInFrames={i * 12}` (per-instance)                                     | GSAP timeline offset `(i * 0.4)` s                                                    |
+| `useVideoConfig()` to get `fps`                                             | dropped — composition fps is in `data-fps` on `#stage`                                |
+
+## How to render and evaluate
+
+```bash
+# Render Remotion baseline (no setup.sh — no binary assets in this fixture)
+cd remotion-src && npm install && npm run render
+
+# Render HyperFrames translation
+cd ../hf-src && npx hyperframes render --output ../hf.mp4
+
+# Compare
+../../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
+```
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json
new file mode 100644
index 0000000..f971597
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json
@@ -0,0 +1,41 @@
+{
+  "tier": 3,
+  "name": "stargazed-data-driven",
+  "composition_id": "Stargazed",
+  "description": "Data-driven 10-second composition with three scenes, custom React subcomponents reused across scenes, a Zod schema with defaultProps, and a count-up number animation. Translates the realistic shape of a production Remotion composition into HF — without using the runtime adapter from PR #214.",
+  "duration_seconds": 10,
+  "fps": 30,
+  "width": 1280,
+  "height": 720,
+  "ssim_threshold": 0.9,
+  "validation": {
+    "measured_mean_ssim": 0.953,
+    "measured_min_ssim": 0.927,
+    "measured_p05_ssim": 0.938,
+    "measured_p95_ssim": 0.978,
+    "measured_at": "2026-09-18",
+    "measured_against": "remotion@4.0 (PNG output, BT.709) vs hyperframes@0.7.71 (sub-composition fixtures)",
+    "notes": "Count-up timing in StatsScene shows a few-frame offset between Remotion's manual 1-(1-t)^3 and GSAP's power3.out — both formulas are identical, so the offset comes from sub-frame timing of when the seek + onUpdate fire. Final values converge correctly. Visible only as transient digit mismatches mid-animation; no SSIM impact above the noise floor."
+  },
+  "remotion_apis_exercised": [
+    "Composition with z.object schema and typed defaultProps",
+    "Sequence (3 nested with computed offsets)",
+    "AbsoluteFill",
+    "useCurrentFrame, useVideoConfig",
+    "interpolate (single-segment, multi-segment, with extrapolation)",
+    "spring (two configs: damping:12 and damping:14)",
+    "Custom React subcomponents reused with different props (StatCard ×3)",
+    "Custom React utility component (AnimatedNumber for count-up)",
+    "Custom React utility component (UnderlinedText)",
+    "Per-instance delay via prop (delayInFrames)"
+  ],
+  "translation_notes": [
+    "Zod schema + defaultProps → data-* attributes on the root #stage div. The skill emits one data attribute per scalar prop; nested arrays (stats[]) get materialized as repeated HTML markup with per-instance data attributes (data-stat-index, data-stat-value, --card-color).",
+    "Custom React subcomponents inline as repeated HTML divs. The component prop interface becomes the repeated markup template. This is lossy for components with internal state — fine here because StatCard, AnimatedNumber, UnderlinedText all derive from props alone.",
+    "AnimatedNumber's frame-driven count-up → a GSAP tween on a { v: 0 } counter object with onUpdate rewriting textContent. GSAP's power3.out is cubic easeOut, matching the Remotion 1-(1-t)^3 manual ease.",
+    "Two different springs in this composition: damping:12 → back.out(1.4) (snappy), damping:14 → back.out(1.2) (calmer). The 1.4 vs 1.2 overshoot ratio approximates the damping difference.",
+    "Per-instance stagger via delayInFrames prop translates to a GSAP timeline offset of (i * 0.4)s.",
+    "Threshold 0.90 reflects: spring → back.out approximation (×2 different configs), the count-up easing curve match (very close but not identical due to sub-frame seek timing), font/AA differences on body text. SSIM well below 0.90 indicates a structural mismatch, not approximation drift."
+  ],
+  "rationale": "Threshold 0.90 sits ~0.04 below measured p05 (0.938). The wider gap vs T1/T2 reflects T3's bigger approximation budget (2 spring instances + count-up timing + font fallback on multiple text sizes). Mean SSIM below 0.90 = structural mismatch (wrong durations, wrong stagger, missing prop wiring), not approximation drift."
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-1.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-1.html
new file mode 100644
index 0000000..323741f
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-1.html
@@ -0,0 +1,52 @@
+<template id="scene-1-template">
+  <div data-composition-id="scene-1" data-width="1280" data-height="720" data-duration="3">
+    <style>
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      .scene-1 {
+        flex-direction: column;
+      }
+      .scene-1 .title {
+        font-size: 160px;
+        font-weight: 900;
+        letter-spacing: 0.05em;
+        transform: scale(0);
+      }
+      .scene-1 .subtitle {
+        font-size: 36px;
+        font-weight: 400;
+        color: #9ca3af;
+        margin-top: 24px;
+        opacity: 0;
+      }
+    </style>
+    <div class="scene scene-1">
+      <div class="title">STARGAZED</div>
+      <div class="subtitle">by HeyGen</div>
+    </div>
+    <script>
+      // Remotion: <Sequence 0..90> TitleScene. Frame -> time at 30 fps.
+      const tl = gsap.timeline({ paused: true });
+      const scene = document.querySelector(".scene-1");
+      tl.set(scene, { opacity: 1 }, 0);
+      // spring({damping:12, stiffness:100, mass:1}) -> back.out(1.4) ~0.7s
+      tl.to(scene.querySelector(".title"), { scale: 1, duration: 0.7, ease: "back.out(1.4)" }, 0);
+      // interpolate(frame, [20,40], [0,1]) -> 0.667s..1.333s linear
+      tl.fromTo(
+        scene.querySelector(".subtitle"),
+        { opacity: 0 },
+        { opacity: 1, duration: 0.667, ease: "none" },
+        0.667,
+      );
+      tl.set(scene, { opacity: 0 }, 3);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scene-1"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html
new file mode 100644
index 0000000..ed456e6
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html
@@ -0,0 +1,99 @@
+<template id="scene-2-template">
+  <div data-composition-id="scene-2" data-width="1280" data-height="720" data-duration="4">
+    <style>
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      .scene-2 {
+        gap: 48px;
+      }
+      .stat-card {
+        width: 280px;
+        height: 220px;
+        background: #1a1a1a;
+        border-radius: 16px;
+        border: 2px solid var(--card-color);
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        opacity: 0;
+        transform: scale(0);
+      }
+      .stat-card .number {
+        font-size: 72px;
+        font-weight: 800;
+        color: var(--card-color);
+        line-height: 1;
+      }
+      .stat-card .label {
+        font-size: 24px;
+        font-weight: 500;
+        color: #9ca3af;
+        margin-top: 16px;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+      }
+    </style>
+    <div class="scene scene-2">
+      <div
+        class="stat-card"
+        data-stat-index="0"
+        data-stat-value="1247"
+        style="--card-color: #fbbf24"
+      >
+        <div class="number">0</div>
+        <div class="label">Stars</div>
+      </div>
+      <div
+        class="stat-card"
+        data-stat-index="1"
+        data-stat-value="312"
+        style="--card-color: #60a5fa"
+      >
+        <div class="number">0</div>
+        <div class="label">Forks</div>
+      </div>
+      <div class="stat-card" data-stat-index="2" data-stat-value="48" style="--card-color: #f87171">
+        <div class="number">0</div>
+        <div class="label">Issues</div>
+      </div>
+    </div>
+    <script>
+      // Remotion: <Sequence 90..210> StatsScene; StatCard stagger i*12 frames = i*0.4s.
+      const tl = gsap.timeline({ paused: true });
+      const scene = document.querySelector(".scene-2");
+      tl.set(scene, { opacity: 1 }, 0);
+      scene.querySelectorAll(".stat-card").forEach((card, i) => {
+        const start = i * 0.4;
+        const value = Number(card.dataset.statValue);
+        const numberEl = card.querySelector(".number");
+        // spring({damping:14, stiffness:90, mass:1}) -> back.out(1.2) ~0.7s; opacity 0..0.4s linear
+        tl.to(card, { scale: 1, duration: 0.7, ease: "back.out(1.2)" }, start);
+        tl.to(card, { opacity: 1, duration: 0.4, ease: "none" }, start);
+        // AnimatedNumber: easeOutCubic over 45 frames (1.5s) is GSAP power3.out on a counter.
+        const counter = { v: 0 };
+        tl.to(
+          counter,
+          {
+            v: value,
+            duration: 1.5,
+            ease: "power3.out",
+            onUpdate: () => {
+              numberEl.textContent = Math.round(counter.v).toLocaleString();
+            },
+          },
+          start,
+        );
+      });
+      tl.set(scene, { opacity: 0 }, 4);
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scene-2"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-3.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-3.html
new file mode 100644
index 0000000..c83b2d6
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-3.html
@@ -0,0 +1,55 @@
+<template id="scene-3-template">
+  <div data-composition-id="scene-3" data-width="1280" data-height="720" data-duration="3">
+    <style>
+      .scene {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+      }
+      .scene-3 .outro-wrap {
+        position: relative;
+        display: inline-block;
+        opacity: 0;
+      }
+      .scene-3 .outro-text {
+        font-size: 80px;
+        font-weight: 600;
+      }
+      .scene-3 .outro-underline {
+        position: absolute;
+        left: 0;
+        bottom: -8px;
+        width: 100%;
+        height: 6px;
+        background: #fbbf24;
+        border-radius: 3px;
+        transform: scaleX(0);
+        transform-origin: left center;
+      }
+    </style>
+    <div class="scene scene-3">
+      <div class="outro-wrap">
+        <div class="outro-text">thanks for watching</div>
+        <div class="outro-underline"></div>
+      </div>
+    </div>
+    <script>
+      // Remotion: <Sequence 210..300> OutroScene.
+      const tl = gsap.timeline({ paused: true });
+      const scene = document.querySelector(".scene-3");
+      tl.set(scene, { opacity: 1 }, 0);
+      tl.to(scene.querySelector(".outro-wrap"), { opacity: 1, duration: 0.4, ease: "none" }, 0);
+      // interpolate(frame, [10,40], [0,1]) for the underline -> starts 0.333s, 1s long
+      tl.to(
+        scene.querySelector(".outro-underline"),
+        { scaleX: 1, duration: 1.0, ease: "none" },
+        0.333,
+      );
+      window.__timelines = window.__timelines || {};
+      window.__timelines["scene-3"] = tl;
+    </script>
+  </div>
+</template>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html
new file mode 100644
index 0000000..10156df
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>tier-3-data-driven</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        width: 1280px;
+        height: 720px;
+        overflow: hidden;
+        background: #0a0a0a;
+        font-family: Helvetica, Arial, sans-serif;
+        color: #ffffff;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="stage"
+      data-composition-id="tier-3-data-driven"
+      data-start="0"
+      data-width="1280"
+      data-height="720"
+      data-duration="10"
+      data-fps="30"
+      data-title="STARGAZED"
+      data-subtitle="by HeyGen"
+      data-outro="thanks for watching"
+    >
+      <div
+        id="scene-1"
+        class="clip"
+        data-composition-id="scene-1"
+        data-composition-src="compositions/scene-1.html"
+        data-start="0"
+        data-duration="3"
+        data-track-index="0"
+      ></div>
+
+      <div
+        id="scene-2"
+        class="clip"
+        data-composition-id="scene-2"
+        data-composition-src="compositions/scene-2.html"
+        data-start="3"
+        data-duration="4"
+        data-track-index="0"
+      ></div>
+
+      <div
+        id="scene-3"
+        class="clip"
+        data-composition-id="scene-3"
+        data-composition-src="compositions/scene-3.html"
+        data-start="7"
+        data-duration="3"
+        data-track-index="0"
+      ></div>
+
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["tier-3-data-driven"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/package.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/package.json
new file mode 100644
index 0000000..d5acfc2
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "tier-3-data-driven-remotion",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "render": "remotion render Stargazed out/baseline.mp4"
+  },
+  "dependencies": {
+    "@remotion/cli": "^4.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "remotion": "^4.0.0",
+    "zod": "^3.22.0"
+  }
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/remotion.config.ts b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/remotion.config.ts
new file mode 100644
index 0000000..a22cafc
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/remotion.config.ts
@@ -0,0 +1,13 @@
+import { Config } from "@remotion/cli/config";
+
+// Match HyperFrames' default render so SSIM diffs measure translation
+// fidelity, not encoder differences.
+//
+//   setVideoImageFormat("png") avoids the JPEG limited-range/full-range
+//   colorspace flag (yuvj420p vs yuv420p) that otherwise costs ~0.05 SSIM.
+//
+//   setColorSpace("bt709") matches HF's BT.709 SDR output.
+Config.setVideoImageFormat("png");
+Config.setColorSpace("bt709");
+Config.setOverwriteOutput(true);
+Config.setConcurrency(1);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Root.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Root.tsx
new file mode 100644
index 0000000..5932bcd
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Root.tsx
@@ -0,0 +1,27 @@
+import { Composition } from "remotion";
+import { z } from "zod";
+import { Stargazed, stargazedSchema } from "./Stargazed";
+
+const defaultProps: z.infer<typeof stargazedSchema> = {
+  title: "STARGAZED",
+  subtitle: "by HeyGen",
+  stats: [
+    { label: "Stars", value: 1247, color: "#fbbf24" },
+    { label: "Forks", value: 312, color: "#60a5fa" },
+    { label: "Issues", value: 48, color: "#f87171" },
+  ],
+  outro: "thanks for watching",
+};
+
+export const RemotionRoot = () => (
+  <Composition
+    id="Stargazed"
+    component={Stargazed}
+    schema={stargazedSchema}
+    durationInFrames={300}
+    fps={30}
+    width={1280}
+    height={720}
+    defaultProps={defaultProps}
+  />
+);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx
new file mode 100644
index 0000000..4579c6d
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/Stargazed.tsx
@@ -0,0 +1,37 @@
+import { AbsoluteFill, Sequence } from "remotion";
+import { z } from "zod";
+import { TitleScene } from "./scenes/TitleScene";
+import { StatsScene } from "./scenes/StatsScene";
+import { OutroScene } from "./scenes/OutroScene";
+
+export const stargazedSchema = z.object({
+  title: z.string(),
+  subtitle: z.string(),
+  stats: z.array(
+    z.object({
+      label: z.string(),
+      value: z.number(),
+      color: z.string(),
+    }),
+  ),
+  outro: z.string(),
+});
+
+export const Stargazed: React.FC<z.infer<typeof stargazedSchema>> = ({
+  title,
+  subtitle,
+  stats,
+  outro,
+}) => (
+  <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
+    <Sequence from={0} durationInFrames={90}>
+      <TitleScene title={title} subtitle={subtitle} />
+    </Sequence>
+    <Sequence from={90} durationInFrames={120}>
+      <StatsScene stats={stats} />
+    </Sequence>
+    <Sequence from={210} durationInFrames={90}>
+      <OutroScene text={outro} />
+    </Sequence>
+  </AbsoluteFill>
+);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/AnimatedNumber.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/AnimatedNumber.tsx
new file mode 100644
index 0000000..d1a03f5
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/AnimatedNumber.tsx
@@ -0,0 +1,23 @@
+import { interpolate, useCurrentFrame } from "remotion";
+
+interface Props {
+  from: number;
+  to: number;
+  durationInFrames: number;
+}
+
+/**
+ * Counts from `from` to `to` over `durationInFrames` with easeOut.
+ * Driven entirely by useCurrentFrame — deterministic.
+ */
+export const AnimatedNumber: React.FC<Props> = ({ from, to, durationInFrames }) => {
+  const frame = useCurrentFrame();
+  const t = interpolate(frame, [0, durationInFrames], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  // Ease-out cubic — fast start, slow finish, matches the ramp on data dashboards.
+  const eased = 1 - (1 - t) ** 3;
+  const value = Math.round(from + (to - from) * eased);
+  return <>{value.toLocaleString()}</>;
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/StatCard.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/StatCard.tsx
new file mode 100644
index 0000000..7de79fc
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/StatCard.tsx
@@ -0,0 +1,59 @@
+import { interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { AnimatedNumber } from "./AnimatedNumber";
+
+interface Props {
+  label: string;
+  value: number;
+  color: string;
+  delayInFrames: number;
+}
+
+export const StatCard: React.FC<Props> = ({ label, value, color, delayInFrames }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const local = frame - delayInFrames;
+
+  const scale = spring({
+    frame: local,
+    fps,
+    config: { damping: 14, stiffness: 90, mass: 1 },
+  });
+  const opacity = interpolate(local, [0, 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div
+      style={{
+        width: 280,
+        height: 220,
+        background: "#1a1a1a",
+        borderRadius: 16,
+        border: `2px solid ${color}`,
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        opacity,
+        transform: `scale(${scale})`,
+      }}
+    >
+      <div style={{ fontSize: 72, fontWeight: 800, color, lineHeight: 1 }}>
+        {local >= 0 ? <AnimatedNumber from={0} to={value} durationInFrames={45} /> : 0}
+      </div>
+      <div
+        style={{
+          fontSize: 24,
+          fontWeight: 500,
+          color: "#9ca3af",
+          marginTop: 16,
+          textTransform: "uppercase",
+          letterSpacing: "0.1em",
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/UnderlinedText.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/UnderlinedText.tsx
new file mode 100644
index 0000000..38800f4
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/components/UnderlinedText.tsx
@@ -0,0 +1,47 @@
+import { interpolate, useCurrentFrame } from "remotion";
+
+interface Props {
+  text: string;
+  color: string;
+}
+
+export const UnderlinedText: React.FC<Props> = ({ text, color }) => {
+  const frame = useCurrentFrame();
+  // Underline scales from left over 0-30 frames.
+  const underlineScaleX = interpolate(frame, [10, 40], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+  const opacity = interpolate(frame, [0, 12], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <div style={{ position: "relative", display: "inline-block", opacity }}>
+      <div
+        style={{
+          fontSize: 80,
+          fontWeight: 600,
+          color: "#ffffff",
+          fontFamily: "Helvetica, Arial, sans-serif",
+        }}
+      >
+        {text}
+      </div>
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          bottom: -8,
+          width: "100%",
+          height: 6,
+          background: color,
+          transform: `scaleX(${underlineScaleX})`,
+          transformOrigin: "left center",
+          borderRadius: 3,
+        }}
+      />
+    </div>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/index.ts b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/index.ts
new file mode 100644
index 0000000..f31c790
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/index.ts
@@ -0,0 +1,4 @@
+import { registerRoot } from "remotion";
+import { RemotionRoot } from "./Root";
+
+registerRoot(RemotionRoot);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/OutroScene.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/OutroScene.tsx
new file mode 100644
index 0000000..3121b49
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/OutroScene.tsx
@@ -0,0 +1,18 @@
+import { AbsoluteFill } from "remotion";
+import { UnderlinedText } from "../components/UnderlinedText";
+
+interface Props {
+  text: string;
+}
+
+export const OutroScene: React.FC<Props> = ({ text }) => (
+  <AbsoluteFill
+    style={{
+      justifyContent: "center",
+      alignItems: "center",
+      fontFamily: "Helvetica, Arial, sans-serif",
+    }}
+  >
+    <UnderlinedText text={text} color="#fbbf24" />
+  </AbsoluteFill>
+);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/StatsScene.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/StatsScene.tsx
new file mode 100644
index 0000000..aeb6878
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/StatsScene.tsx
@@ -0,0 +1,34 @@
+import { AbsoluteFill } from "remotion";
+import { StatCard } from "../components/StatCard";
+
+interface Stat {
+  label: string;
+  value: number;
+  color: string;
+}
+
+interface Props {
+  stats: Stat[];
+}
+
+export const StatsScene: React.FC<Props> = ({ stats }) => (
+  <AbsoluteFill
+    style={{
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 48,
+      flexDirection: "row",
+      fontFamily: "Helvetica, Arial, sans-serif",
+    }}
+  >
+    {stats.map((stat, i) => (
+      <StatCard
+        key={stat.label}
+        label={stat.label}
+        value={stat.value}
+        color={stat.color}
+        delayInFrames={i * 12}
+      />
+    ))}
+  </AbsoluteFill>
+);
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/TitleScene.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/TitleScene.tsx
new file mode 100644
index 0000000..12d0003
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/src/scenes/TitleScene.tsx
@@ -0,0 +1,55 @@
+import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
+
+interface Props {
+  title: string;
+  subtitle: string;
+}
+
+export const TitleScene: React.FC<Props> = ({ title, subtitle }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+
+  const titleScale = spring({
+    frame,
+    fps,
+    config: { damping: 12, stiffness: 100, mass: 1 },
+  });
+  const subtitleOpacity = interpolate(frame, [20, 40], [0, 1], {
+    extrapolateLeft: "clamp",
+    extrapolateRight: "clamp",
+  });
+
+  return (
+    <AbsoluteFill
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+        fontFamily: "Helvetica, Arial, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          fontSize: 160,
+          fontWeight: 900,
+          color: "#ffffff",
+          letterSpacing: "0.05em",
+          transform: `scale(${titleScale})`,
+        }}
+      >
+        {title}
+      </div>
+      <div
+        style={{
+          fontSize: 36,
+          fontWeight: 400,
+          color: "#9ca3af",
+          marginTop: 24,
+          opacity: subtitleOpacity,
+        }}
+      >
+        {subtitle}
+      </div>
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json
new file mode 100644
index 0000000..eb6f0f8
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/remotion-src/tsconfig.json
@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/README.md b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/README.md
new file mode 100644
index 0000000..ac36e23
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/README.md
@@ -0,0 +1,51 @@
+# Tier 4 — escape-hatch
+
+## What it tests
+
+T4 is the **lint-only** tier. There are no renders to diff — the skill is
+graded on whether it correctly _refuses_ to translate each case (and
+recommends the runtime interop pattern from PR #214 instead) or, where
+appropriate, translates after dropping warning-level decorations.
+
+Each `cases/*.tsx` file is a minimal Remotion composition that
+demonstrates one specific pattern. The skill should:
+
+1. Run `scripts/lint_source.py` over the source.
+2. Compare the JSON output to `expected.json` for that case.
+3. Take the documented `skill_action`:
+   - `refuse_translation_recommend_interop` — print the rationale + link to
+     the PR #214 interop guide; do not produce HF output.
+   - `drop_lambda_code_translate_remainder_if_clean` — drop the
+     `@remotion/lambda` code with a note; translate the rest only if no
+     other blockers are present.
+   - `translate_after_dropping_wrappers` — translate normally; drop
+     `useCallback` / `useMemo` / `delayRender` wrappers.
+   - `inline_hook_body_if_pure` — inline the custom hook's body if it's a
+     pure derivation of `useCurrentFrame`; otherwise bow out.
+
+## Cases
+
+| #   | File                       | Expected finding                    | Notes                                           |
+| --- | -------------------------- | ----------------------------------- | ----------------------------------------------- |
+| 01  | `01-use-state.tsx`         | blocker `r2hf/use-state`            | useState driving animation                      |
+| 02  | `02-use-effect-deps.tsx`   | blocker `r2hf/use-effect-deps`      | useEffect/useLayoutEffect with non-empty deps   |
+| 03  | `03-async-metadata.tsx`    | blocker `r2hf/async-metadata`       | calculateMetadata returns a Promise             |
+| 04  | `04-third-party-react.tsx` | blocker `r2hf/third-party-react-ui` | imports `@mui/material`                         |
+| 05  | `05-lambda-config.tsx`     | warning `r2hf/lambda-import`        | imports `@remotion/lambda` — drops, translates  |
+| 06  | `06-warnings-only.tsx`     | warnings only                       | delayRender / useCallback / useMemo             |
+| 07  | `07-custom-hook.tsx`       | warning `r2hf/custom-hook`          | locally-defined `useFadeIn` (export const form) |
+| 08  | `08-mixed.tsx`             | 3 blockers + 1 warning              | aggregate-findings test                         |
+
+## Validation
+
+```bash
+./validate.sh
+```
+
+The script runs `lint_source.py` against each case and asserts:
+
+- Each expected blocker rule fires with severity `blocker`.
+- Each expected warning rule fires with severity `warning` (or stronger).
+- `lint_source.py`'s exit code is 1 when blockers are expected, 0 otherwise.
+
+T4 passes when every case matches its expected output. No renders involved.
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/01-use-state.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/01-use-state.tsx
new file mode 100644
index 0000000..d022bb2
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/01-use-state.tsx
@@ -0,0 +1,29 @@
+// T4 case 01 — useState drives animation.
+//
+// Should be detected by lint_source.py as blocker r2hf/use-state.
+// The skill should refuse to translate and recommend the runtime interop
+// pattern from PR #214.
+//
+// Why this is a blocker: useState is React's component-local mutable state.
+// HF's seek-driven model produces deterministic frames from a single time
+// value — there's no per-frame React render cycle to update state on.
+
+import React, { useState } from "react";
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+
+export const StateDriven: React.FC = () => {
+  const frame = useCurrentFrame();
+  const [hue, setHue] = useState(0);
+
+  // Even if this looks innocuous, the setHue call breaks determinism: HF
+  // can't reproduce React state mutations across seeks.
+  if (frame % 30 === 0 && hue < 360) {
+    setHue((h) => h + 30);
+  }
+
+  return (
+    <AbsoluteFill style={{ background: `hsl(${hue}, 80%, 50%)` }}>
+      <div>frame {frame}</div>
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/02-use-effect-deps.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/02-use-effect-deps.tsx
new file mode 100644
index 0000000..270a65f
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/02-use-effect-deps.tsx
@@ -0,0 +1,29 @@
+// T4 case 02 — useEffect with non-empty deps performs side effects per render.
+//
+// Should be detected by lint_source.py as blocker r2hf/use-effect-deps.
+// The skill should refuse to translate.
+//
+// Why this is a blocker: side effects (network, DOM mutation outside the
+// rendered tree, timers) don't translate to a seek-driven model. HF assumes
+// the page is fully rendered and pure between seeks.
+
+import React, { useEffect, useRef } from "react";
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+
+export const SideEffectDriven: React.FC = () => {
+  const frame = useCurrentFrame();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    ctx?.fillRect(frame, frame, 10, 10);
+  }, [frame]);
+
+  return (
+    <AbsoluteFill>
+      <canvas ref={canvasRef} width={1280} height={720} />
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/03-async-metadata.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/03-async-metadata.tsx
new file mode 100644
index 0000000..c1ecbbb
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/03-async-metadata.tsx
@@ -0,0 +1,39 @@
+// T4 case 03 — calculateMetadata returns a Promise.
+//
+// Should be detected by lint_source.py as blocker r2hf/async-metadata.
+// The skill should refuse to translate.
+//
+// Why this is a blocker: HF needs the composition's duration, dimensions,
+// and props known up-front to produce HTML and seed the timeline. Async
+// metadata fetched from a server at render time has no equivalent in HF —
+// the metadata would need to be resolved at build time before the HTML is
+// authored.
+
+import React from "react";
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+
+interface Props {
+  text: string;
+}
+
+export const AsyncMetadataDriven: React.FC<Props> = ({ text }) => {
+  const frame = useCurrentFrame();
+  return (
+    <AbsoluteFill>
+      <div>
+        {text} · frame {frame}
+      </div>
+    </AbsoluteFill>
+  );
+};
+
+export const calculateMetadata = async ({ props }: { props: Props }) => {
+  const response = await fetch(
+    `https://api.example.com/duration?text=${encodeURIComponent(props.text)}`,
+  );
+  const { durationInFrames } = await response.json();
+  return {
+    durationInFrames,
+    fps: 30,
+  };
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/04-third-party-react.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/04-third-party-react.tsx
new file mode 100644
index 0000000..5787c48
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/04-third-party-react.tsx
@@ -0,0 +1,30 @@
+// T4 case 04 — Imports from a third-party React UI library.
+//
+// Should be detected by lint_source.py as blocker r2hf/third-party-react-ui.
+// The skill should refuse to translate.
+//
+// Why this is a blocker: a Material-UI Button (or any React UI library
+// component) is a React-only abstraction with internal hooks, refs, and
+// theme provider context. Translating it to HTML+CSS would require
+// re-implementing the design system, which is out of scope for a video
+// translation skill. Use the runtime interop pattern from PR #214 to keep
+// these components rendering through Remotion's React tree.
+
+import React from "react";
+import { Button } from "@mui/material";
+import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
+
+export const MuiDriven: React.FC = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+
+  return (
+    <AbsoluteFill style={{ alignItems: "center", justifyContent: "center" }}>
+      <div style={{ opacity }}>
+        <Button variant="contained" color="primary">
+          Click me · frame {frame}
+        </Button>
+      </div>
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/05-lambda-config.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/05-lambda-config.tsx
new file mode 100644
index 0000000..e4cdb2c
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/05-lambda-config.tsx
@@ -0,0 +1,38 @@
+// T4 case 05 — Imports @remotion/lambda for distributed rendering config.
+//
+// Should be detected by lint_source.py as warning r2hf/lambda-import.
+// The skill drops the Lambda code with a note (HF runs single-machine
+// today) and translates the rest of the composition.
+//
+// Why this is a warning, not a blocker: @remotion/lambda config is
+// orthogonal to the rendered composition — it's deployment configuration,
+// not animation logic. Treating it as a hard blocker would refuse
+// translation for compositions that are otherwise clean. The skill drops
+// the Lambda calls in step 3 (Generate) and writes a TRANSLATION_NOTES.md
+// entry so the user knows to set up HF rendering separately.
+
+import React from "react";
+import { renderMediaOnLambda } from "@remotion/lambda";
+import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
+
+export const LambdaConfigured: React.FC = () => {
+  const frame = useCurrentFrame();
+  const opacity = interpolate(frame, [0, 30], [0, 1]);
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      <div>frame {frame}</div>
+    </AbsoluteFill>
+  );
+};
+
+// Rendered at scale via Lambda — no HF equivalent.
+export async function renderViaLambda() {
+  return renderMediaOnLambda({
+    region: "us-east-1",
+    functionName: "remotion-render",
+    composition: "LambdaConfigured",
+    serveUrl: "https://example.com/bundle",
+    inputProps: {},
+    codec: "h264",
+  });
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/06-warnings-only.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/06-warnings-only.tsx
new file mode 100644
index 0000000..eecf832
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/06-warnings-only.tsx
@@ -0,0 +1,36 @@
+// T4 case 06 — Patterns that warn but don't block.
+//
+// Should be detected by lint_source.py with:
+//   - r2hf/delay-render (warning) — drop the call; HF handles asset readiness
+//   - r2hf/use-callback (warning) — decorative, drop the wrapper
+//   - r2hf/use-memo    (warning) — decorative, drop the wrapper
+//
+// 0 blockers expected — the skill should still translate this composition
+// after dropping the wrappers. delayRender is paired with continueRender via
+// an empty-deps useEffect (mount-once side effect), which doesn't trip the
+// use-effect-deps blocker.
+
+import React, { useCallback, useMemo } from "react";
+import { AbsoluteFill, delayRender, continueRender, useCurrentFrame, interpolate } from "remotion";
+
+const handle = delayRender();
+// Resolve the handle once at module load — no per-frame side effects.
+queueMicrotask(() => continueRender(handle));
+
+export const WarningsOnly: React.FC = () => {
+  const frame = useCurrentFrame();
+
+  // useCallback / useMemo — decorative for render-perf in React, no equivalent
+  // needed in the seek-driven HF model.
+  const opacity = useMemo(
+    () => interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" }),
+    [frame],
+  );
+  const onMount = useCallback(() => {}, []);
+
+  return (
+    <AbsoluteFill style={{ opacity }} onClick={onMount}>
+      <div>frame {frame}</div>
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/07-custom-hook.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/07-custom-hook.tsx
new file mode 100644
index 0000000..7ebcf9c
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/07-custom-hook.tsx
@@ -0,0 +1,28 @@
+// T4 case 07 — Locally-defined custom hook.
+//
+// Should be detected by lint_source.py as warning r2hf/custom-hook.
+// 0 blockers expected — the skill can attempt translation if the hook body
+// is pure (derives from props/frame alone).
+//
+// Why this is a warning: custom hooks vary widely in what they do. Some are
+// pure derivations of useCurrentFrame (translatable — inline the body); some
+// wrap useState/useEffect (blocker — but those will be caught by the other
+// rules independently). The warning prompts the agent to inspect the body.
+
+import React from "react";
+import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
+
+// Custom hook — pure derivation from frame, no state. Translates fine.
+function useFadeIn(durationInFrames: number) {
+  const frame = useCurrentFrame();
+  return interpolate(frame, [0, durationInFrames], [0, 1], { extrapolateRight: "clamp" });
+}
+
+export const CustomHookDriven: React.FC = () => {
+  const opacity = useFadeIn(30);
+  return (
+    <AbsoluteFill style={{ opacity }}>
+      <div>fading in</div>
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/08-mixed.tsx b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/08-mixed.tsx
new file mode 100644
index 0000000..68d9182
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/cases/08-mixed.tsx
@@ -0,0 +1,41 @@
+// T4 case 08 — Multiple blockers + multiple warnings in one file.
+//
+// Should report:
+//   blockers: r2hf/use-state, r2hf/use-effect-deps, r2hf/third-party-react-ui
+//   warnings: r2hf/use-callback (also r2hf/delay-render via the import chain
+//             would only fire if delayRender is actually called)
+//
+// Tests that the linter aggregates findings correctly and does not stop at
+// the first blocker.
+
+import React, { useState, useEffect, useCallback } from "react";
+import { AbsoluteFill, useCurrentFrame } from "remotion";
+import { Card } from "@chakra-ui/react";
+
+interface Item {
+  id: string;
+  label: string;
+}
+
+export const MixedBlockers: React.FC = () => {
+  const frame = useCurrentFrame();
+  const [items, setItems] = useState<Item[]>([]);
+
+  useEffect(() => {
+    fetch("/api/items")
+      .then((r) => r.json())
+      .then(setItems);
+  }, [frame]);
+
+  const onClick = useCallback(() => {
+    setItems((prev) => [...prev, { id: String(prev.length), label: "new" }]);
+  }, []);
+
+  return (
+    <AbsoluteFill onClick={onClick}>
+      {items.map((item) => (
+        <Card key={item.id}>{item.label}</Card>
+      ))}
+    </AbsoluteFill>
+  );
+};
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/expected.json b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/expected.json
new file mode 100644
index 0000000..94a494e
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/expected.json
@@ -0,0 +1,85 @@
+{
+  "tier": 4,
+  "name": "escape-hatch",
+  "description": "Lint-only fixture set. Each case demonstrates a Remotion pattern the skill cannot or should not translate cleanly. The skill is graded on whether lint_source.py emits the right finding for each case — there are no renders to compare. T4 passes when every case triggers its expected rule and no others.",
+  "cases": [
+    {
+      "file": "01-use-state.tsx",
+      "expected": {
+        "blockers": [{ "rule": "r2hf/use-state", "min_count": 1 }],
+        "warnings": [],
+        "skill_action": "refuse_translation_recommend_interop"
+      }
+    },
+    {
+      "file": "02-use-effect-deps.tsx",
+      "expected": {
+        "blockers": [{ "rule": "r2hf/use-effect-deps", "min_count": 1 }],
+        "warnings": [],
+        "skill_action": "refuse_translation_recommend_interop"
+      }
+    },
+    {
+      "file": "03-async-metadata.tsx",
+      "expected": {
+        "blockers": [{ "rule": "r2hf/async-metadata", "min_count": 1 }],
+        "warnings": [],
+        "skill_action": "refuse_translation_recommend_interop"
+      }
+    },
+    {
+      "file": "04-third-party-react.tsx",
+      "expected": {
+        "blockers": [{ "rule": "r2hf/third-party-react-ui", "min_count": 1 }],
+        "warnings": [],
+        "skill_action": "refuse_translation_recommend_interop"
+      }
+    },
+    {
+      "file": "05-lambda-config.tsx",
+      "expected": {
+        "blockers": [],
+        "warnings": [{ "rule": "r2hf/lambda-import", "min_count": 1 }],
+        "skill_action": "drop_lambda_code_translate_remainder_if_clean"
+      }
+    },
+    {
+      "file": "06-warnings-only.tsx",
+      "expected": {
+        "blockers": [],
+        "warnings": [
+          { "rule": "r2hf/delay-render", "min_count": 1 },
+          { "rule": "r2hf/use-callback", "min_count": 1 },
+          { "rule": "r2hf/use-memo", "min_count": 1 }
+        ],
+        "skill_action": "translate_after_dropping_wrappers"
+      }
+    },
+    {
+      "file": "07-custom-hook.tsx",
+      "expected": {
+        "blockers": [],
+        "warnings": [{ "rule": "r2hf/custom-hook", "min_count": 1 }],
+        "skill_action": "inline_hook_body_if_pure"
+      }
+    },
+    {
+      "file": "08-mixed.tsx",
+      "expected": {
+        "blockers": [
+          { "rule": "r2hf/use-state", "min_count": 1 },
+          { "rule": "r2hf/use-effect-deps", "min_count": 1 },
+          { "rule": "r2hf/third-party-react-ui", "min_count": 1 }
+        ],
+        "warnings": [{ "rule": "r2hf/use-callback", "min_count": 1 }],
+        "skill_action": "refuse_translation_recommend_interop"
+      }
+    }
+  ],
+  "totals": {
+    "expected_blocker_cases": 5,
+    "expected_warning_only_cases": 3,
+    "expected_total_blocker_findings_min": 7,
+    "expected_total_warning_findings_min": 6
+  }
+}
diff --git a/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/validate.sh b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/validate.sh
new file mode 100755
index 0000000..e7180f4
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/assets/test-corpus/tier-4-escape-hatch/validate.sh
@@ -0,0 +1,110 @@
+#!/usr/bin/env bash
+# validate.sh — assert lint_source.py output matches expected.json for every T4 case.
+#
+# T4 has no renders to diff. The skill is graded on whether it correctly
+# refuses to translate each case (or drops only the lambda config in case 5,
+# or warns appropriately in cases 6 and 7).
+#
+# Usage:
+#   ./validate.sh
+# Exit 0 on pass.
+
+set -euo pipefail
+
+THIS_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+SCRIPTS_DIR="$(cd "$THIS_DIR/../../../scripts" && pwd)"
+EXPECTED="$THIS_DIR/expected.json"
+
+if [[ ! -f "$SCRIPTS_DIR/lint_source.py" ]]; then
+  echo "error: lint_source.py not found at $SCRIPTS_DIR/lint_source.py" >&2
+  exit 2
+fi
+if [[ ! -f "$EXPECTED" ]]; then
+  echo "error: expected.json not found at $EXPECTED" >&2
+  exit 2
+fi
+
+# Drive lint_file() in-process so the per-case overhead is one Python startup,
+# not N (8 cases × ~80 ms forking python3 was the dominant cost).
+SCRIPTS_DIR="$SCRIPTS_DIR" \
+THIS_DIR="$THIS_DIR" \
+EXPECTED="$EXPECTED" \
+python3 <<'PY'
+import json
+import os
+import sys
+from collections import Counter
+from pathlib import Path
+
+scripts_dir = Path(os.environ["SCRIPTS_DIR"])
+this_dir = Path(os.environ["THIS_DIR"])
+expected_path = Path(os.environ["EXPECTED"])
+cases_dir = this_dir / "cases"
+
+sys.path.insert(0, str(scripts_dir))
+from lint_source import BLOCKER, WARNING, lint_file  # noqa: E402
+
+expected = json.loads(expected_path.read_text())
+
+fails: list[str] = []
+passes: list[str] = []
+
+for case in expected["cases"]:
+    file_name = case["file"]
+    fixture = cases_dir / file_name
+    if not fixture.exists():
+        fails.append(f"{file_name}: fixture missing at {fixture}")
+        continue
+
+    findings = lint_file(fixture)
+    rule_counts: Counter[str] = Counter()
+    severity_by_rule: dict[str, str] = {}
+    for f in findings:
+        rule_counts[f.rule] += 1
+        severity_by_rule[f.rule] = f.severity
+
+    case_failed = False
+
+    def assert_rule(expected_entry, expected_severity_floor, kind):
+        global case_failed
+        rule = expected_entry["rule"]
+        min_count = expected_entry["min_count"]
+        actual = rule_counts[rule]
+        actual_severity = severity_by_rule.get(rule)
+        if actual < min_count:
+            fails.append(f"{file_name}: expected >={min_count} {kind} findings of rule {rule}, got {actual}")
+            case_failed = True
+        elif actual_severity not in expected_severity_floor:
+            fails.append(
+                f"{file_name}: rule {rule} found but severity={actual_severity!r} (expected {kind})"
+            )
+            case_failed = True
+
+    for entry in case["expected"]["blockers"]:
+        assert_rule(entry, {BLOCKER}, "blocker")
+    for entry in case["expected"]["warnings"]:
+        assert_rule(entry, {WARNING, BLOCKER}, "warning")
+
+    # Implied lint exit code: 1 when blockers are expected, 0 otherwise.
+    has_blockers = any(f.severity == BLOCKER for f in findings)
+    expected_has_blockers = bool(case["expected"]["blockers"])
+    if has_blockers != expected_has_blockers:
+        fails.append(
+            f"{file_name}: implied lint exit {1 if has_blockers else 0}, "
+            f"expected {1 if expected_has_blockers else 0} (blockers expected: {expected_has_blockers})"
+        )
+        case_failed = True
+
+    if not case_failed:
+        passes.append(file_name)
+
+print(f"Passed: {len(passes)}")
+for name in passes:
+    print(f"  ✓ {name}")
+if fails:
+    print(f"Failed: {len(fails)}")
+    for msg in fails:
+        print(f"  ✗ {msg}")
+    sys.exit(1)
+sys.exit(0)
+PY
diff --git a/.claude/skills/remotion-to-hyperframes/references/api-map.md b/.claude/skills/remotion-to-hyperframes/references/api-map.md
new file mode 100644
index 0000000..3eba671
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/api-map.md
@@ -0,0 +1,142 @@
+# Remotion → HyperFrames API Map
+
+Authoritative translation table. Load this reference when starting a translation
+to know the high-level mapping; load the per-topic references for fragile
+details (timing, transitions, etc.).
+
+## Reading this table
+
+- **`drop`** = remove from output entirely. The HF runtime handles it.
+- **`see references/X.md`** = the mapping is non-trivial; read the linked file.
+- **`refuse + interop`** = the skill bows out and recommends the runtime adapter
+  pattern from [PR #214](https://github.com/heygen-com/hyperframes/pull/214).
+
+## Composition root
+
+| Remotion                                             | HyperFrames                                                                                                          |
+| ---------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `<Composition id durationInFrames fps width height>` | root `<div id="stage" data-composition-id data-start="0" data-duration="<dur/fps>" data-fps data-width data-height>` |
+| `defaultProps={...}`                                 | `data-*` attributes on `#stage` (one per scalar prop). Nested objects/arrays — see [parameters.md](parameters.md)    |
+| `schema={z.object(...)}`                             | not represented in HTML; the schema lives in the agent's translation step only                                       |
+| `calculateMetadata` (sync)                           | resolve at translation time, write concrete values into `data-*`                                                     |
+| `calculateMetadata` (async)                          | **refuse + interop** — see [escape-hatch.md](escape-hatch.md)                                                        |
+| `registerRoot(RemotionRoot)`                         | drop                                                                                                                 |
+| `<AbsoluteFill style>`                               | `<div style="position:absolute;inset:0;{style}">`                                                                    |
+
+## Sequencing
+
+See [sequencing.md](sequencing.md) for nesting and stagger details.
+
+| Remotion                                   | HyperFrames                                                                                                                                                                                                                 |
+| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<Sequence from={F} durationInFrames={D}>` | a host `<div data-composition-src="compositions/<name>.html" data-start="<F/fps>" data-duration="<D/fps>" data-track-index="N">` in the root, its content in that sub-composition file (see [sequencing.md](sequencing.md)) |
+| `<Series>` + `<Series.Sequence>`           | sibling scene hosts with sequential `data-start` values                                                                                                                                                                     |
+| `<Loop durationInFrames={D}>`              | not a primitive — emit a bounded GSAP repeat from the available duration                                                                                                                                                    |
+| `<Freeze frame={F}>`                       | drop the wrapper; HF doesn't have running animation outside the seek-driven timeline so freeze is a no-op                                                                                                                   |
+
+## Timing
+
+See [timing.md](timing.md) — this is the highest-leverage section.
+
+| Remotion                                                   | HyperFrames                                                                                                        |
+| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `useCurrentFrame()`                                        | drop — HF seeks the timeline. The math derived from `frame` becomes an animatable property of a paused GSAP tween. |
+| `useVideoConfig()` for `fps` / `durationInFrames`          | drop — read from `data-fps` / `data-duration` on `#stage`                                                          |
+| `interpolate(frame, [a,b], [x,y])` (linear)                | `gsap.fromTo(t, {p:x}, {p:y, duration:(b-a)/fps, ease:"none"})` at offset `a/fps`                                  |
+| `interpolate(frame, [a,b,c,d], [x,y,y,z])` (multi-segment) | three `gsap.to` calls at offsets `a/fps`, `b/fps`, `c/fps`                                                         |
+| `interpolate(..., {easing: Easing.bezier})`                | GSAP `CustomEase.create("c", "M0,0 C${a},${b} ${c},${d} 1,1")`                                                     |
+| `spring({frame, fps, config: {damping, stiffness, mass}})` | GSAP `back.out(N)` — see [timing.md](timing.md) for damping → overshoot table                                      |
+| `interpolateColors(frame, range, colors)`                  | `gsap.to({...}, { backgroundColor, color, duration, ease })` — GSAP handles color tweens natively                  |
+| `Easing.in / .out / .inOut(power)`                         | GSAP `power<N>.in` / `power<N>.out` / `power<N>.inOut`                                                             |
+
+## Media
+
+See [media.md](media.md) for trim, volume ramps, and decoder notes.
+
+| Remotion                               | HyperFrames                                                                                                                                                                                                                                                                                                                                  |
+| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `<Audio src volume>`                   | `<audio data-start data-duration data-track-index data-volume src>`                                                                                                                                                                                                                                                                          |
+| `<Audio playbackRate startFrom endAt>` | `data-playback-rate`, `data-trim-start`, `data-trim-end`                                                                                                                                                                                                                                                                                     |
+| `<Video src>`                          | `<video playsinline data-has-audio="true" data-start data-duration data-track-index src>` only when the file has an audio stream (check with `ffprobe -v error -select_streams a -show_entries stream=codec_type -of csv=p=0 <file>`: non-empty means it has audio) and the source is not `muted` or `volume={0}`; otherwise `muted` instead |
+| `<OffthreadVideo>`                     | `<video>` — HF doesn't need the off-thread variant (uses headless Chrome)                                                                                                                                                                                                                                                                    |
+| `<Img src>`                            | `<img>`                                                                                                                                                                                                                                                                                                                                      |
+| `<IFrame src>`                         | `<iframe>` — HF auto-falls back to screenshot mode for nested iframes                                                                                                                                                                                                                                                                        |
+| `staticFile("x.png")`                  | `"assets/x.png"` in the root, `"../assets/x.png"` inside a `compositions/` scene file — copy the file into `hf-src/assets/` next to `index.html`                                                                                                                                                                                             |
+| `delayRender()` / `continueRender()`   | drop — HF waits on asset readiness via the Frame Adapter pattern                                                                                                                                                                                                                                                                             |
+
+## Transitions
+
+See [transitions.md](transitions.md).
+
+| Remotion                                                                       | HyperFrames                                                                                               |
+| ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `<TransitionSeries>` + `<TransitionSeries.Transition presentation={fade()} />` | manual `gsap.to(scene, {opacity: 0/1, duration})` crossfade at the boundary                               |
+| `slide()`, `wipe()`, `clockWipe()`, `fade()`                                   | HF [shader-transitions](https://hyperframes.heygen.com/catalog/blocks) package presets — pick the closest |
+| `linearTiming({durationInFrames})`                                             | duration in seconds (`/fps`)                                                                              |
+| `springTiming({config})`                                                       | duration in seconds, ease `back.out` — see [timing.md](timing.md)                                         |
+
+## Lottie
+
+See [lottie.md](lottie.md).
+
+| Remotion                        | HyperFrames                                                                                                       |
+| ------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `<Lottie animationData={data}>` | `<div id="lottie-N">` + `<script>const anim = lottie.loadAnimation({...}); window.__hfLottie.push(anim)</script>` |
+| `loop` / `playbackRate` props   | translate only after checking player seek behavior; HF adapter seeks absolute time via `goToAndStop`              |
+| `@remotion/lottie` runtime      | `lottie-web` from CDN — drop the React wrapper                                                                    |
+
+## Fonts
+
+See [fonts.md](fonts.md).
+
+| Remotion                                            | HyperFrames                                                                                 |
+| --------------------------------------------------- | ------------------------------------------------------------------------------------------- |
+| `loadFont()` from `@remotion/google-fonts/<Family>` | `@font-face` rule referencing the Google Fonts CSS, OR `<link>` to Google Fonts in `<head>` |
+| Local font via `@font-face`                         | same — paste the rule into `<style>`                                                        |
+| System font fallback                                | document the font-fallback divergence cost (see [eval.md](eval.md))                         |
+
+## Parameters
+
+See [parameters.md](parameters.md).
+
+| Remotion                      | HyperFrames                                                                                   |
+| ----------------------------- | --------------------------------------------------------------------------------------------- |
+| `z.object({foo: z.string()})` | `data-foo` on `#stage` (the schema is implicit in HTML structure)                             |
+| nested array prop (`stats[]`) | repeated HTML markup with per-instance `data-*` attrs                                         |
+| Zod default values            | bake defaults into the HTML directly                                                          |
+| Zod runtime validation        | not represented; if validation matters, validate in the translation step before emitting HTML |
+
+## React patterns
+
+| Remotion                                           | HyperFrames                                                      |
+| -------------------------------------------------- | ---------------------------------------------------------------- |
+| Custom React subcomponent (pure, prop-driven)      | inline as repeated HTML using the prop interface as the template |
+| `useState` driving animation                       | **refuse + interop**                                             |
+| `useReducer` driving animation                     | **refuse + interop**                                             |
+| `useEffect(fn, [deps])` (non-empty deps)           | **refuse + interop**                                             |
+| `useEffect(fn, [])` (mount-once side effect)       | drop the effect; use `queueMicrotask` if startup work is needed  |
+| `useCallback`, `useMemo`                           | drop the wrappers — decorative                                   |
+| Custom hook (pure derivation of `useCurrentFrame`) | inline the body                                                  |
+| Custom hook with state/effects                     | refuse + interop                                                 |
+
+## Distributed rendering
+
+`@remotion/lambda` and `@remotion/cloudrun` are deployment configuration —
+orthogonal to the rendered composition itself. The skill emits these as
+**warnings** (not blockers) and drops them in step 3 (Generate) with a note
+in `TRANSLATION_NOTES.md`. HF is single-machine today; document the gap.
+
+| Remotion                   | HyperFrames                                            |
+| -------------------------- | ------------------------------------------------------ |
+| `@remotion/lambda` import  | drop the import (warning `r2hf/lambda-import`)         |
+| `renderMediaOnLambda(...)` | drop the call; note in `TRANSLATION_NOTES.md`          |
+| `@remotion/cloudrun`       | drop the import + call; note in `TRANSLATION_NOTES.md` |
+
+## When to bow out entirely
+
+If any blocker pattern is present, recommend the runtime interop pattern from
+[PR #214](https://github.com/heygen-com/hyperframes/pull/214) instead of
+attempting translation. See [escape-hatch.md](escape-hatch.md).
+
+The blockers are documented in [`scripts/lint_source.py`](../scripts/lint_source.py)
+and tested by [tier-4-escape-hatch](../assets/test-corpus/tier-4-escape-hatch/).
diff --git a/.claude/skills/remotion-to-hyperframes/references/escape-hatch.md b/.claude/skills/remotion-to-hyperframes/references/escape-hatch.md
new file mode 100644
index 0000000..9dd0fa4
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/escape-hatch.md
@@ -0,0 +1,115 @@
+# When to bow out: the runtime interop pattern
+
+Some Remotion compositions can't be translated cleanly. The skill should
+recognize them upfront and recommend the **runtime interop pattern** from
+[PR #214](https://github.com/heygen-com/hyperframes/pull/214) instead of
+producing broken HTML.
+
+## When to recommend interop
+
+Run `scripts/lint_source.py` first. If it returns any blocker, recommend
+interop. The blockers are:
+
+| Rule                        | What it catches                                                |
+| --------------------------- | -------------------------------------------------------------- |
+| `r2hf/use-state`            | useState driving animation                                     |
+| `r2hf/use-reducer`          | useReducer driving animation                                   |
+| `r2hf/use-effect-deps`      | useEffect/useLayoutEffect with non-empty deps (side effects)   |
+| `r2hf/async-metadata`       | calculateMetadata returns a Promise                            |
+| `r2hf/third-party-react-ui` | Imports from MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI |
+
+Each of these breaks the seek-driven, deterministic-frame model that HF
+relies on. Translating them produces silently-wrong output.
+
+## What the interop pattern actually does
+
+Per [PR #214](https://github.com/heygen-com/hyperframes/pull/214), the
+runtime adapter:
+
+1. Bundles the user's Remotion code with React + `@remotion/player` via esbuild.
+2. Mounts a Remotion `<Player>` inside an HF composition's HTML.
+3. Pauses the player on mount.
+4. Registers the player on `window.__hfRemotion` with `seekTo(frame)`,
+   `pause()`, `durationInFrames`, `fps`.
+5. HF's render loop seeks the player frame-by-frame via `seekTo(frame)`.
+
+Result: Remotion's React tree renders at HF's deterministic frame ticks.
+Custom hooks, useState, useEffect, MUI components — all work because
+Remotion's React reconciler is doing the rendering.
+
+## The recommendation message
+
+When the skill detects a blocker, output something like:
+
+> The Remotion source uses `useState` (and others), which can't be
+> translated to HF's seek-driven HTML model. The recommended path is the
+> **runtime interop pattern**: bundle your Remotion code with `@remotion/player`
+> and let HF drive it frame-by-frame.
+>
+> See https://github.com/heygen-com/hyperframes/pull/214 for the full
+> implementation. Quick summary:
+>
+> 1. Bundle `entry.tsx` with esbuild: `npx esbuild entry.tsx --bundle --outfile=dist/bundle.js --format=iife --jsx=automatic`
+> 2. Mount the Player and register on `window.__hfRemotion`:
+>
+>    ```tsx
+>    const playerRef = useRef<PlayerRef>(null);
+>    useEffect(() => {
+>      playerRef.current?.pause();
+>      window.__hfRemotion = window.__hfRemotion || [];
+>      window.__hfRemotion.push({
+>        seekTo: (f) => playerRef.current?.seekTo(f),
+>        pause: () => playerRef.current?.pause(),
+>        durationInFrames,
+>        fps,
+>      });
+>    }, []);
+>    ```
+>
+> 3. Reference the bundle from your HF `index.html` and render normally:
+>    `<script src="dist/bundle.js"></script>`
+
+## The lint output already includes recommendations
+
+`lint_source.py` emits a `recommendation` field per finding. Surface those
+verbatim — they're tuned per blocker rule:
+
+```json
+{
+  "rule": "r2hf/use-state",
+  "message": "useState detected — Remotion compositions that drive animation via React state are not deterministic frame-capture targets in HyperFrames",
+  "recommendation": "Use the runtime interop pattern from PR #214 instead of attempting a translation"
+}
+```
+
+## When NOT to bow out: warnings only
+
+Some patterns produce warnings, not blockers — translate after dropping
+the wrappers:
+
+| Rule                      | Action                                                              |
+| ------------------------- | ------------------------------------------------------------------- |
+| `r2hf/lambda-import`      | drop the `@remotion/lambda` config; HF runs single-machine, log gap |
+| `r2hf/delay-render`       | drop the call; HF handles asset readiness                           |
+| `r2hf/use-callback`       | drop the wrapper, inline the function                               |
+| `r2hf/use-memo`           | drop the wrapper, compute inline                                    |
+| `r2hf/custom-hook` (pure) | inline the hook body if it's a derivation of `useCurrentFrame`      |
+| `r2hf/static-file`        | replace `staticFile("x")` with `"assets/x"`                         |
+| `r2hf/interpolate-colors` | translate to GSAP color tween (see [timing.md](timing.md))          |
+
+These are documented in T4 cases 05–07.
+
+`r2hf/lambda-import` is a warning — not a blocker — because Lambda
+configuration is orthogonal to the rendered composition. Translating an
+otherwise-clean Remotion comp shouldn't fail just because the author also
+configured AWS Lambda for distributed rendering. The skill drops the
+`@remotion/lambda` imports and `renderMediaOnLambda(...)` calls in step 3
+(Generate) and writes a `TRANSLATION_NOTES.md` entry so the user knows to
+set up HF rendering separately.
+
+## When the source has BOTH blockers AND warnings
+
+Bow out. The presence of a single blocker means the skill shouldn't
+attempt translation — even if the rest of the composition is clean.
+The user should use interop for the whole thing OR refactor the
+blocker patterns out of their Remotion source first.
diff --git a/.claude/skills/remotion-to-hyperframes/references/eval.md b/.claude/skills/remotion-to-hyperframes/references/eval.md
new file mode 100644
index 0000000..edb951c
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/eval.md
@@ -0,0 +1,140 @@
+# Eval: how to validate a translation end-to-end
+
+Every translation should be measured. The skill ships three scripts and
+a tiered test corpus that, together, gate translation quality.
+
+## The three scripts
+
+| Script                   | Input                       | Output                                                              |
+| ------------------------ | --------------------------- | ------------------------------------------------------------------- |
+| `scripts/lint_source.py` | Remotion source dir or file | JSON findings + exit code (0 clean, 1 has blockers)                 |
+| `scripts/render_diff.sh` | two MP4 paths               | per-frame SSIM + JSON summary (`mean`, `min`, `p05`, `p95`, `pass`) |
+| `scripts/frame_strip.sh` | two MP4 paths               | side-by-side comparison strip PNG for visual debugging              |
+
+Run them in this order: **lint → render → diff → (if fail) strip**.
+
+## Per-fixture flow
+
+```bash
+# 1. Lint the source — blockers mean stop
+python3 ../../scripts/lint_source.py ./remotion-src/src/
+
+# 2. Generate any binary assets (T2+T3 only)
+[ -f setup.sh ] && ./setup.sh
+
+# 3. Render Remotion baseline
+cd remotion-src && npm install && npm run render
+# -> remotion-src/out/baseline.mp4
+
+# 4. Render HF translation
+cd .. && node ../../../packages/cli/dist/cli.js render hf-src/ --output hf.mp4
+# -> hf.mp4
+
+# 5. SSIM diff
+../../scripts/render_diff.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./diff
+# -> diff/summary.json
+
+# 6. If diff fails, generate frame strip for visual inspection
+../../scripts/frame_strip.sh ./remotion-src/out/baseline.mp4 ./hf.mp4 ./strip 8
+# -> strip/strip.png
+```
+
+## Reading `diff/summary.json`
+
+```json
+{
+  "frame_count": 90,
+  "mean": 0.974,
+  "min": 0.972,
+  "max": 0.999,
+  "p05": 0.972,
+  "p95": 0.983,
+  "threshold": 0.95,
+  "pass": true
+}
+```
+
+| Field         | What it tells you                                                           |
+| ------------- | --------------------------------------------------------------------------- |
+| `mean`        | average SSIM across all frames; the headline number                         |
+| `min`         | worst frame; below threshold means at least one frame is structurally wrong |
+| `p05` / `p95` | 5th / 95th percentile — most frames sit between these                       |
+| `threshold`   | from `R2HF_SSIM_THRESHOLD` env var (default 0.85)                           |
+| `pass`        | whether `mean >= threshold`                                                 |
+
+## Validated tier thresholds
+
+Calibrated against actual Remotion + HF renders:
+
+| Tier | Composition shape                           | Mean  | Threshold | Margin |
+| ---- | ------------------------------------------- | ----- | --------- | ------ |
+| T1   | single-element fade-in                      | 0.974 | 0.95      | +0.022 |
+| T2   | multi-scene + spring + audio + image        | 0.985 | 0.95      | +0.016 |
+| T3   | data-driven, custom subcomponents, count-up | 0.953 | 0.90      | +0.038 |
+
+Each fixture's `expected.json` carries:
+
+- `ssim_threshold` — the gate for `pass`
+- `validation` — the actual measured numbers from the calibration run
+- `translation_notes` — what's lossy and why
+
+## Critical: encoder config
+
+Both Remotion and HF must output the same pixel format for SSIM to be
+meaningful. Remotion's default JPEG output writes `yuvj420p` (full-range);
+HF outputs `yuv420p` (limited-range). The mismatch costs ~0.05 SSIM.
+
+Every fixture's `remotion.config.ts` sets:
+
+```ts
+Config.setVideoImageFormat("png");
+Config.setColorSpace("bt709");
+```
+
+If the user's source doesn't have these, add them in the translation
+step — otherwise the diff measures encoder differences, not translation
+fidelity.
+
+## What the noise floor looks like
+
+The dominant non-translation noise is **system font fallback divergence**.
+Remotion's bundled Chromium and HF's `chrome-headless-shell` interpret
+`font-weight: 800` differently when there's no real font installed:
+
+- Remotion HELLO at 160px: medium-weight stroke
+- HF HELLO at 160px: heavy-weight stroke
+
+This costs ~0.025 mean SSIM. Visible in T1's frame strip.
+[fonts.md](fonts.md) covers how to mitigate (use Inter, load explicit
+Google Fonts).
+
+## Threshold rule of thumb
+
+Set the threshold ~0.02 below measured `p05`:
+
+- Real translation regressions drop mean by 0.05+ — caught.
+- Encoder/font drift between CI runs is bounded at ~0.01 — not caught.
+
+If a calibration run's measured mean is far above your initial threshold
+guess, _don't_ tighten the threshold to fit. Leave headroom — fixtures
+re-rendered on different hardware will drift.
+
+## When the diff fails
+
+1. **Look at `frame_strip.sh` output first.** A side-by-side strip at 6–10
+   evenly-spaced timestamps shows whether the failure is structural
+   (wrong scene durations, missing element) or cosmetic (different font
+   weight, slight timing skew).
+2. **Check `diff/ssim.log`.** Per-frame SSIM tells you _which_ frames
+   failed. Cluster of bad frames in the middle of a scene = animation
+   problem; bad frames at scene boundaries = sequencing problem.
+3. **Re-read the relevant reference.** [timing.md](timing.md) for
+   spring/easing issues, [sequencing.md](sequencing.md) for scene
+   boundary issues, [media.md](media.md) for asset loading issues.
+
+## CI integration
+
+The fixtures are not yet wired into CI (`packages/producer/tests/` runs
+inside Docker; the skill corpus needs the same). PR 7 of the stack adds
+the orchestrator that runs all four tiers and emits an aggregated pass
+report. For now, evaluate by hand per fixture.
diff --git a/.claude/skills/remotion-to-hyperframes/references/fonts.md b/.claude/skills/remotion-to-hyperframes/references/fonts.md
new file mode 100644
index 0000000..56c9298
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/fonts.md
@@ -0,0 +1,112 @@
+# Font translation
+
+Fonts are the dominant non-translation noise floor. Same `font-weight: 800`
+renders perceptibly bolder on HF's `chrome-headless-shell` than on
+Remotion's bundled Chromium when there's no real font installed. Validation
+showed this costs ~0.025 mean SSIM at the noise floor.
+
+## Pattern: `@remotion/google-fonts/<Family>`
+
+```tsx
+import { loadFont } from "@remotion/google-fonts/Inter";
+loadFont("normal", { weights: ["400", "800"] });
+```
+
+Translate to a `<link>` tag in `<head>`:
+
+```html
+<head>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
+    rel="stylesheet"
+  />
+  <style>
+    body {
+      font-family: Inter, sans-serif;
+    }
+  </style>
+</head>
+```
+
+Pull the family name and weights from the import path and `loadFont`
+arguments. HF's compiler inlines the Google Fonts CSS at render time, so
+you don't pay a network round-trip per render.
+
+## Pattern: local fonts via `@font-face`
+
+```tsx
+import { Font } from "remotion";
+
+Font.loadFont("/MyFont.woff2", "MyFont");
+```
+
+Translate to a `@font-face` rule:
+
+```html
+<style>
+  @font-face {
+    font-family: "MyFont";
+    src: url("assets/MyFont.woff2") format("woff2");
+    font-weight: 400;
+    font-style: normal;
+  }
+</style>
+```
+
+Copy the font file into `hf-src/assets/` next to the HTML.
+
+## Pattern: system font fallback (no font load)
+
+```tsx
+<div style={{ fontFamily: "Helvetica, Arial, sans-serif" }}>...</div>
+```
+
+Same string in HF — but be aware: on Linux without a real Helvetica
+installed (typical CI environment), Remotion and HF fall back to
+_different_ sans-serif system fonts because they bundle different
+Chromium versions. This is the noise floor: ~0.025 mean SSIM cost,
+visible as different stroke widths at large font weights (800+).
+
+If matching the Remotion render exactly matters for a specific
+fixture, load the same font explicitly — don't rely on system
+fallback.
+
+## When in doubt: use Inter
+
+Inter renders identically across Chromium versions and is free.
+Translate any "system sans-serif" Remotion comp to Inter when you
+need to minimize font drift in the validation harness.
+
+## Font loading and `delayRender`
+
+Remotion uses `delayRender()` to defer the first frame until fonts
+load. HF's compiler inlines Google Fonts at compile time and waits
+on `@font-face` readiness via the Frame Adapter pattern — the
+`delayRender` call drops in translation. See [media.md](media.md).
+
+## Multi-weight loading
+
+When Remotion loads multiple weights:
+
+```tsx
+loadFont("normal", { weights: ["400", "500", "700", "800"] });
+```
+
+Inline all weights in the Google Fonts URL:
+
+```
+?family=Inter:wght@400;500;700;800&display=swap
+```
+
+Translation rule: enumerate every distinct `font-weight` value
+that appears in the composition's CSS (`font-weight: 800` →
+weight 800 must be loaded). If the Remotion source loads weights
+that aren't actually used, drop them.
+
+## Font subsetting
+
+Remotion's `loadFont` doesn't subset; HF's compiler doesn't either
+(yet). Don't try to optimize this in translation — it's lossless to
+keep the same weight set as the Remotion source.
diff --git a/.claude/skills/remotion-to-hyperframes/references/limitations.md b/.claude/skills/remotion-to-hyperframes/references/limitations.md
new file mode 100644
index 0000000..f40d99a
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/limitations.md
@@ -0,0 +1,136 @@
+# Translation limitations
+
+What the skill explicitly cannot translate, separated from the
+blocker-list (which is enforced by `lint_source.py`). These are
+_known_ gaps — surface them to the user as translation notes
+when translating the surrounding composition.
+
+## React patterns the skill refuses
+
+See [escape-hatch.md](escape-hatch.md). Any of these triggers
+a bow-out:
+
+- `useState`, `useReducer` driving animation
+- `useEffect` / `useLayoutEffect` with non-empty deps (side effects)
+- async `calculateMetadata`
+- Third-party React UI libraries (MUI, Chakra, Mantine, antd, shadcn, Radix, NextUI)
+
+`@remotion/lambda` is no longer in this list — it's a warning, not a
+blocker, because Lambda config is orthogonal to composition rendering.
+The skill drops the imports and `renderMediaOnLambda(...)` calls and
+writes a `TRANSLATION_NOTES.md` entry. See
+[escape-hatch.md](escape-hatch.md).
+
+## Patterns that work with caveats
+
+### Volume ramps on `<Audio>`
+
+Remotion accepts a function for `volume`:
+
+```tsx
+<Audio src={...} volume={(f) => interpolate(f, [0, 30], [0, 1])} />
+```
+
+HF ramps volume with a `data-automation` volume lane on the `<audio>`
+(form in `/media-use` → `references/mixing.md`).
+Translation: write the lane from the `interpolate` points, OR bake the ramp
+into the audio file with `ffmpeg afade`. The dropped-ramp path produces audibly different
+output but visually-identical video, so SSIM passes — just flag it.
+
+### `<Loop>` with stateful children
+
+```tsx
+<Loop durationInFrames={30}>
+  <CounterThatIncrementsViaUseRef />
+</Loop>
+```
+
+A bounded GSAP repeat can reproduce _visual_ repetition when its finite count is derived
+from the visible duration. If the looped child has cross-iteration state (a counter, a
+randomness seed), HF won't reproduce it identically per iteration. Bow out unless the child
+is fully deterministic per-iteration; use `repeat: -1` only when the root declares a finite `data-duration`.
+
+### Remotion's `<Img>` with crossOrigin
+
+```tsx
+<Img src="https://other-domain.com/x.png" crossOrigin="anonymous" />
+```
+
+HF's renderer doesn't enforce CORS the same way Remotion does. Most
+public images work; private images served with auth headers won't.
+If the source uses `crossOrigin="use-credentials"`, the asset needs
+to be downloaded and inlined at translation time.
+
+### Custom `presentation` in `<TransitionSeries>`
+
+```tsx
+const customPresentation: PresentationComponent = ({ children, presentationProgress }) => {
+  return <div style={{ filter: `blur(${(1 - presentationProgress) * 20}px)` }}>{children}</div>;
+};
+```
+
+Pure presentations (transform/filter/opacity computed from progress)
+translate to GSAP tweens cleanly. Presentations that read
+`useCurrentFrame()` internally or have stateful children don't —
+bow out.
+
+### Code-split components (`React.lazy`)
+
+```tsx
+const HeavyChart = React.lazy(() => import("./HeavyChart"));
+```
+
+`React.lazy` is async and doesn't fit the deterministic-render model.
+Translate to a regular import; the resulting HF composition will
+just include all the code upfront.
+
+## Patterns that always work
+
+- `<AbsoluteFill>` and `<Sequence>` (any nesting)
+- `useCurrentFrame()` derivations: `interpolate`, `spring`, `Easing`,
+  `interpolateColors`, manual math
+- `<Audio>`, `<Video>`, `<Img>`, `<IFrame>` with simple props
+- `staticFile()` references
+- Custom React subcomponents that are pure functions of props
+- Custom hooks that are pure derivations of `useCurrentFrame`
+- `@remotion/lottie` (translates to HF's Lottie adapter)
+- `@remotion/google-fonts/<Family>` (translates to `<link>` or `@font-face`)
+- Sync `calculateMetadata` (resolved at translation time)
+- `<TransitionSeries>` with built-in presentations (`fade`, `slide`,
+  `wipe`, `clockWipe`, `flip`, `iris`)
+
+## What the skill never tries to translate
+
+These are out-of-scope by design:
+
+- **HDR rendering** — HF supports HDR but Remotion doesn't, so there's
+  nothing to translate from.
+- **Variable frame rate** — both tools assume constant fps.
+- **Multi-composition `<Composition>` lists** — translate one at a
+  time. The skill prompts the user to choose which composition.
+- **Remotion Studio props panel** — visual prop editing in HF Studio
+  needs different infrastructure; out of scope.
+
+## Reporting gaps to the user
+
+When translation produces _something_ but the something has gaps, write
+a `TRANSLATION_NOTES.md` next to the output:
+
+```markdown
+# Translation notes
+
+The following Remotion patterns were translated with caveats:
+
+- `<Audio volume={(f) => ...}>` (line 15): volume ramp written as a
+  `data-automation` volume lane (see the media-use skill's mixing reference); the
+  ffmpeg `afade` bake-in is the alternative.
+- `<HeavyChart>` (line 30): translated as inline HTML. The original
+  React.lazy boundary was dropped — bundle size unchanged because HF
+  serves a single HTML file.
+
+If any of these caveats matter, consider the runtime interop pattern
+instead.
+```
+
+This file is also generated by the skill alongside the HF output, not
+held in the corpus.
diff --git a/.claude/skills/remotion-to-hyperframes/references/lottie.md b/.claude/skills/remotion-to-hyperframes/references/lottie.md
new file mode 100644
index 0000000..5b7e5b6
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/lottie.md
@@ -0,0 +1,119 @@
+# Lottie translation: @remotion/lottie → HF lottie adapter
+
+Lottie animations are a clean translation case — HF has a built-in
+[Lottie adapter](https://github.com/heygen-com/hyperframes/blob/main/packages/core/src/runtime/adapters/lottie.ts)
+that supports both `lottie-web` and `@lottiefiles/dotlottie-web`. The
+adapter auto-discovers animations registered on `window.__hfLottie`
+and seeks them per-frame via `goToAndStop`.
+
+## Pattern
+
+```tsx
+import { Lottie } from "@remotion/lottie";
+import animationData from "./hello.json";
+
+export const MyComp = () => (
+  <AbsoluteFill>
+    <Lottie animationData={animationData} loop={false} />
+  </AbsoluteFill>
+);
+```
+
+Translates to:
+
+```html
+<div id="stage" ...>
+  <div id="lottie-anim" style="width:100%;height:100%"></div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
+  <script>
+    const anim = lottie.loadAnimation({
+      container: document.getElementById("lottie-anim"),
+      renderer: "svg",
+      loop: false,
+      autoplay: false,
+      path: "assets/hello.json",
+    });
+    window.__hfLottie = window.__hfLottie || [];
+    window.__hfLottie.push(anim);
+  </script>
+</div>
+```
+
+Key differences from a typical Lottie embed:
+
+- `autoplay: false` — HF drives playback by seeking
+- `loop: false` typically (unless Remotion's `loop={true}`)
+- `window.__hfLottie.push(anim)` is what hooks the animation into HF's
+  per-frame seek
+
+## Asset handling
+
+Remotion bundles the animation JSON via webpack import. HF needs the JSON
+on disk under `assets/` and references it via path:
+
+1. Copy `hello.json` from the Remotion project into `hf-src/assets/`.
+2. Reference as `path: "assets/hello.json"` in `loadAnimation`.
+
+For dotlottie (binary) format, swap in `@lottiefiles/dotlottie-web`:
+
+```html
+<script src="https://unpkg.com/@lottiefiles/dotlottie-web"></script>
+<canvas id="anim" style="width:100%;height:100%"></canvas>
+<script>
+  const player = new DotLottie({
+    canvas: document.getElementById("anim"),
+    src: "assets/hello.lottie",
+    autoplay: false,
+  });
+  window.__hfLottie = window.__hfLottie || [];
+  window.__hfLottie.push(player);
+</script>
+```
+
+The HF adapter handles both player APIs (it duck-types `goToAndStop`
+vs `setCurrentRawFrameValue` / `seek`).
+
+## Multiple Lottie animations
+
+Multiple `<Lottie>` instances in one composition work — push each one
+onto `window.__hfLottie` and the adapter will seek all of them in sync:
+
+```js
+window.__hfLottie.push(anim1);
+window.__hfLottie.push(anim2);
+window.__hfLottie.push(anim3);
+```
+
+## Lottie source isn't actually translation-blocking
+
+Lottie animations encode their own deterministic timeline. They're the
+_easiest_ part of a Remotion composition to translate because the
+animation logic is already self-contained — neither Remotion nor HF
+"animate" them, both just seek them. Translation cost is near-zero.
+
+## After Effects → Lottie limitations
+
+Lottie supports a subset of After Effects features. Expressions, most
+Effects (drop shadow, color overlay), all blend modes beyond Normal/Add/
+Multiply, luma mattes, and most 3D parameters are not supported. If the
+Remotion composition uses a Lottie file that depends on these, the
+animation will break in BOTH Remotion and HF — this isn't a translation
+problem, it's a Lottie limitation. See
+[airbnb/lottie/after-effects.md](https://github.com/airbnb/lottie/blob/master/after-effects.md)
+for the full supported feature list.
+
+## Loop behavior
+
+Remotion's `loop={true}` plays the animation continuously. Translate it
+to `loop: true` on the player: the HF adapter wraps composition time into
+the animation's own length, so the cycle repeats for the whole scene. It
+does not add playback-rate scaling; bake a non-default rate into the
+Lottie asset and verify the rendered output.
+
+## Performance note
+
+Per the [Lottie adapter](https://github.com/heygen-com/hyperframes/blob/main/packages/core/src/runtime/adapters/lottie.ts)
+docs: lottie-web's `goToAndStop(time, isFrame=false)` takes time in ms;
+the adapter passes `time * 1000` for precision. This is more accurate
+than passing frame numbers (especially for animations whose internal
+fps doesn't match the HF render fps).
diff --git a/.claude/skills/remotion-to-hyperframes/references/media.md b/.claude/skills/remotion-to-hyperframes/references/media.md
new file mode 100644
index 0000000..8354183
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/media.md
@@ -0,0 +1,166 @@
+# Media translation: Audio, Video, Img, IFrame, staticFile
+
+## Asset paths
+
+Remotion's `staticFile("x.png")` resolves to the project's `public/` directory.
+HF uses relative paths from the composition's `index.html`, conventionally
+`assets/`:
+
+```tsx
+<Img src={staticFile("logo.png")} />
+```
+
+```html
+<img src="assets/logo.png" />
+```
+
+When translating, copy the asset from `remotion-src/public/x` to
+`hf-src/assets/x`. Multiple files can be batched with a setup script;
+see T2's `setup.sh` for an example pattern.
+
+## `<Audio>`
+
+```tsx
+<Audio src={staticFile("music.wav")} volume={0.5} />
+```
+
+```html
+<audio
+  data-start="0"
+  data-duration="6"
+  data-track-index="2"
+  data-volume="0.5"
+  src="assets/music.wav"
+></audio>
+```
+
+`data-start` and `data-duration` are required — the runtime needs them to
+schedule the audio. Default to the composition's full duration if Remotion
+didn't specify trim.
+
+### Volume ramps
+
+```tsx
+<Audio src={staticFile("music.wav")} volume={(f) => interpolate(f, [0, 30], [0, 1])} />
+```
+
+Volume ramps become a `data-automation` volume lane on the `<audio>`
+(form in `/media-use` → `references/mixing.md`); `data-volume`
+is the static baseline.
+
+### Trim / playbackRate
+
+```tsx
+<Audio src={staticFile("music.wav")} startFrom={60} endAt={180} playbackRate={1.5} />
+```
+
+```html
+<audio
+  data-start="0"
+  data-duration="<resolved from trim>"
+  data-trim-start="2"
+  data-trim-end="6"
+  data-playback-rate="1.5"
+  src="assets/music.wav"
+></audio>
+```
+
+`startFrom` / `endAt` are frame indexes; convert to seconds.
+
+## `<Video>` and `<OffthreadVideo>`
+
+```tsx
+<Video src={staticFile("intro.mp4")} playsInline />
+<OffthreadVideo src={staticFile("intro.mp4")} />
+```
+
+```html
+<!-- intro.mp4 has an audio stream -->
+<video
+  playsinline
+  data-has-audio="true"
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+  src="assets/intro.mp4"
+></video>
+
+<!-- intro.mp4 is silent (or the Remotion element is muted) -->
+<video
+  playsinline
+  muted
+  data-start="0"
+  data-duration="5"
+  data-track-index="0"
+  src="assets/intro.mp4"
+></video>
+```
+
+`<OffthreadVideo>` is a Remotion-specific optimization for headless
+rendering. HF runs in headless Chrome already, so the off-thread variant
+collapses to a regular `<video>`.
+
+`playsinline` is required for the runtime to autoplay (browser policy); always
+emit it. Check the source file for an audio stream first:
+`ffprobe -v error -select_streams a -show_entries stream=codec_type -of csv=p=0 <file>`
+(non-empty output means it has audio). Remotion `<Video>` maps to
+`<video playsinline>` + `data-has-audio="true"` only when the file has an audio
+stream and the Remotion source does not set `muted` or `volume={0}`; otherwise
+emit `muted`. Silent b-roll with `data-has-audio="true"` aborts the render
+(`ASSET_MEDIA_TYPE_MISMATCH`).
+
+## `<Img>`
+
+```tsx
+<Img src={staticFile("logo.png")} style={{ width: 200, height: 200 }} />
+```
+
+```html
+<img src="assets/logo.png" style="width: 200px; height: 200px;" />
+```
+
+Width/height get rounded to integer px. If the original style has
+animated dimensions, the GSAP tween animates them — see [timing.md](timing.md).
+
+## `<IFrame>`
+
+```tsx
+<IFrame src="https://example.com" />
+```
+
+```html
+<iframe src="https://example.com"></iframe>
+```
+
+When HF detects a nested iframe in a composition, it auto-falls back to
+**screenshot mode** rather than the deterministic BeginFrame mode. This
+costs render performance but produces visibly-correct output. See
+[hyperframes-vs-remotion.mdx](https://github.com/heygen-com/hyperframes/blob/main/docs/guides/hyperframes-vs-remotion.mdx)
+for details.
+
+## `delayRender()` / `continueRender()`
+
+```tsx
+const handle = delayRender();
+useEffect(() => {
+  loadAsset().then(() => continueRender(handle));
+}, []);
+```
+
+Drop. HF waits on asset readiness via the [Frame Adapter pattern](https://hyperframes.heygen.com/concepts/frame-adapters)
+— images, videos, fonts, and Lottie animations all signal load
+completion natively. There's nothing to do at the application level.
+
+## When the asset isn't a file
+
+If Remotion's media source is a Buffer, dataURL, or URL.createObjectURL,
+the asset doesn't exist on disk and can't be copied via setup.sh. Two
+options:
+
+1. Materialize the asset at translation time — write the buffer to a file
+   in `hf-src/assets/`.
+2. Embed as a data URL directly in the HTML (`src="data:image/png;base64,..."`)
+   for small assets (< 100 KB).
+
+For audio/video Buffers, option 1 is preferred — base64-encoded media
+bloats the HTML and slows the renderer.
diff --git a/.claude/skills/remotion-to-hyperframes/references/parameters.md b/.claude/skills/remotion-to-hyperframes/references/parameters.md
new file mode 100644
index 0000000..f7a5264
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/parameters.md
@@ -0,0 +1,172 @@
+# Parameter translation: Zod schemas, defaultProps, calculateMetadata
+
+How a typed Remotion `<Composition schema={...} defaultProps={...} />`
+turns into a parameterized HF composition.
+
+## Sync calculateMetadata (translatable)
+
+```tsx
+<Composition
+  id="MyVideo"
+  component={MyVideo}
+  schema={z.object({ title: z.string(), duration: z.number() })}
+  defaultProps={{ title: "Hello", duration: 90 }}
+  calculateMetadata={({ props }) => ({
+    durationInFrames: props.duration,
+    fps: 30,
+  })}
+/>
+```
+
+When `calculateMetadata` is synchronous and only uses `props`, **resolve
+it at translation time** — call it with `defaultProps` (or whatever the
+caller specifies) and write the concrete result into the HTML:
+
+```html
+<div
+  id="stage"
+  data-composition-id="MyVideo"
+  data-start="0"
+  data-duration="3"          <!-- 90/30 -->
+  data-fps="30"
+  data-title="Hello"
+></div>
+```
+
+The `data-title` attribute carries the value through. Code that originally
+read `props.title` reads `document.getElementById("stage").dataset.title`
+in HF.
+
+Inside a scene sub-composition file that lookup does not reach the root
+`#stage`. Pass a prop to a scene with `data-variable-values` on its host and
+read it there with `window.__hyperframes.getVariables()` (declare defaults with
+`data-composition-variables` on the scene's composition element).
+
+## Async calculateMetadata (NOT translatable)
+
+```tsx
+<Composition
+  calculateMetadata={async ({ props }) => {
+    const res = await fetch(...);
+    return { durationInFrames: res.duration };
+  }}
+/>
+```
+
+**Refuse + interop**. HF needs composition metadata up-front to seed the
+HTML. Resolving network calls at translation time defeats the purpose
+of having dynamic metadata. See [escape-hatch.md](escape-hatch.md).
+
+The lint rule `r2hf/async-metadata` catches this. T4 case 03 tests it.
+
+## Default props
+
+```tsx
+defaultProps={{
+  title: "Hello",
+  subtitle: "World",
+  count: 42,
+}}
+```
+
+Translate to `data-*` attributes on the root `#stage` div:
+
+```html
+<div id="stage" data-title="Hello" data-subtitle="World" data-count="42">...</div>
+```
+
+Convention: `propName` → `data-prop-name` (kebab-case). Inside the GSAP
+script, read via `document.getElementById("stage").dataset.propName`.
+
+## Nested object / array props
+
+```tsx
+defaultProps={{
+  stats: [
+    { label: "Stars", value: 1247, color: "#fbbf24" },
+    { label: "Forks", value: 312, color: "#60a5fa" },
+  ],
+}}
+```
+
+Don't try to encode the array as a JSON `data-` attribute — HF's runtime
+doesn't parse those. Materialize the array as **repeated HTML markup**:
+
+```html
+<div id="scene-stats">
+  <div class="stat-card" data-stat-index="0" data-stat-value="1247" style="--card-color:#fbbf24">
+    <div class="number">0</div>
+    <div class="label">Stars</div>
+  </div>
+  <div class="stat-card" data-stat-index="1" data-stat-value="312" style="--card-color:#60a5fa">
+    <div class="number">0</div>
+    <div class="label">Forks</div>
+  </div>
+</div>
+```
+
+The component template (`StatCard.tsx`) becomes the markup template;
+each instance gets its scalar props rendered as `data-*` and CSS
+custom properties.
+
+Validated in T3 — three StatCards reused with different props,
+mean SSIM 0.953.
+
+## Numeric props that need typed parsing
+
+`document.getElementById("stage").dataset.count` is a string. Convert at
+read time:
+
+```js
+const count = Number(stage.dataset.count);
+```
+
+Or inline values directly into the GSAP script when the data is known
+at translation time and doesn't need to vary per render.
+
+## Boolean props
+
+```tsx
+defaultProps={{ darkMode: true }}
+```
+
+Two conventions:
+
+- `data-dark-mode="true"` — read as string, compare `=== "true"`
+- `data-dark-mode` (presence/absence) — `<div data-dark-mode>` for true, omit for false
+
+Pick one and be consistent. The presence/absence form is HTML-idiomatic
+and pairs well with CSS attribute selectors:
+
+```css
+[data-dark-mode] .scene {
+  background: #000;
+}
+```
+
+## Zod runtime validation
+
+Remotion's `schema` validates props at composition load. HF doesn't have
+an equivalent — by the time the HTML is in the renderer, the schema is
+already gone.
+
+Validate at translation time instead. If the user passes invalid data,
+fail with a translation error before emitting HTML. This matches Zod's
+"fail loud" intent without requiring the runtime dependency.
+
+## When the composition uses props for computed prop derivation
+
+```tsx
+const Composition: React.FC<Props> = ({ stats }) => {
+  const total = stats.reduce((acc, s) => acc + s.value, 0);
+  return <div>{total}</div>;
+};
+```
+
+Compute the derived value at translation time and bake it into the HTML
+or a `data-` attribute. Don't try to express the computation in JS in the
+HF composition — that adds runtime overhead and makes the HTML stateful
+in ways that complicate human editing.
+
+If the derivation is non-trivial (involves the array itself, not just
+scalars), materialize it as static text in the HTML.
diff --git a/.claude/skills/remotion-to-hyperframes/references/sequencing.md b/.claude/skills/remotion-to-hyperframes/references/sequencing.md
new file mode 100644
index 0000000..9b82862
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/sequencing.md
@@ -0,0 +1,251 @@
+# Sequencing translation: Sequence, Series, Composition root
+
+How Remotion's nested `Sequence` tree maps to one sub-composition host per
+scene in the root, each with its own paused GSAP timeline in local time.
+
+## The core idea
+
+Remotion's `<Sequence from={F} durationInFrames={D}>` is a coordinate
+transform: it shifts `useCurrentFrame()` by `F` and clips the child
+component to the window `[F, F+D]`. HF doesn't have a per-element
+"current frame" — there's a single composition seek time and the
+runtime hides/shows elements based on their `data-start` / `data-duration`.
+
+Result: the nested tree flattens into a list of scene hosts on the same
+parent, each with its own time window; each scene's content lives in its
+own sub-composition file.
+
+## `<Composition>` → root `#stage`
+
+```tsx
+<Composition
+  id="MyVideo"
+  component={MyVideo}
+  durationInFrames={300}
+  fps={30}
+  width={1280}
+  height={720}
+/>
+```
+
+```html
+<div
+  id="stage"
+  data-composition-id="MyVideo"
+  data-start="0"
+  data-duration="10"      <!-- 300/30 -->
+  data-fps="30"
+  data-width="1280"
+  data-height="720"
+>
+  <!-- composition content -->
+</div>
+```
+
+`data-start="0"` is required on `#stage` (the runtime needs it to anchor
+playback; missing it triggers a lint warning).
+
+## `<AbsoluteFill>` → positioned div
+
+```tsx
+<AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>...children...</AbsoluteFill>
+```
+
+```html
+<div style="position:absolute;inset:0;background-color:#0a0a0a;">...children...</div>
+```
+
+`AbsoluteFill` is just a styled div in Remotion. Translate to a div with
+`position:absolute; inset:0` and copy through any other style props.
+
+## `<Sequence>` → sub-composition host
+
+```tsx
+<Sequence from={0} durationInFrames={90}>
+  <TitleCard />
+</Sequence>
+```
+
+The root `#stage` only holds a host per scene; the scene's markup, styles
+and timeline live in their own sub-composition file, so the Studio timeline
+gets one readable row per scene and the lint has no nested structure to flag.
+
+```html
+<!-- index.html -->
+<div
+  id="scene-1"
+  class="clip"
+  data-composition-id="scene-1"
+  data-composition-src="compositions/scene-1.html"
+  data-start="0"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+```html
+<!-- compositions/scene-1.html: TitleCard children inlined, timeline keyed "scene-1", local time starts at 0 -->
+<template id="scene-1-template">
+  <div data-composition-id="scene-1" data-width="1280" data-height="720" data-duration="3">
+    <!-- TitleCard children -->
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["scene-1"] = tl;
+    </script>
+  </div>
+</template>
+```
+
+Convert frames to seconds: `from/fps`, `durationInFrames/fps`. Pick a
+`data-track-index` per parallel rendering layer (background = 0,
+overlays = 1, audio = 2, etc.). Sequential scenes can share an index.
+Inside the sub-composition, time is local: a tween that started at `F/fps`
+in the root starts at `0` here. Asset paths are relative to the
+sub-composition file (`../assets/x.png`).
+
+## Nested `<Sequence>` flattens
+
+Remotion adds offsets when sequences nest:
+
+```tsx
+<Sequence from={60} durationInFrames={120}>
+  <Sequence from={30} durationInFrames={60}>
+    <ImageScene />
+  </Sequence>
+</Sequence>
+```
+
+The inner sequence's effective window is `[60+30, 60+30+60] = [90, 150]`.
+
+Translate by computing the sum and emitting one host with the resolved
+window; the scene's children go in its sub-composition file:
+
+```html
+<div
+  data-composition-id="image-scene"
+  data-composition-src="compositions/image-scene.html"
+  data-start="3"
+  data-duration="2"
+  data-track-index="0"
+></div>
+```
+
+## `<Series>` → siblings with sequential offsets
+
+```tsx
+<Series>
+  <Series.Sequence durationInFrames={60}>
+    <A />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={120}>
+    <B />
+  </Series.Sequence>
+  <Series.Sequence durationInFrames={90}>
+    <C />
+  </Series.Sequence>
+</Series>
+```
+
+Each `Sequence.Sequence` lives in the next time slot. Emit siblings
+with `data-start` accumulating (each host mounts its scene file):
+
+```html
+<div
+  data-composition-id="a"
+  data-composition-src="compositions/a.html"
+  data-start="0"
+  data-duration="2"
+  data-track-index="0"
+></div>
+<div
+  data-composition-id="b"
+  data-composition-src="compositions/b.html"
+  data-start="2"
+  data-duration="4"
+  data-track-index="0"
+></div>
+<div
+  data-composition-id="c"
+  data-composition-src="compositions/c.html"
+  data-start="6"
+  data-duration="3"
+  data-track-index="0"
+></div>
+```
+
+## Crossfading scene boundaries
+
+Remotion `<Sequence>` shows/hides at hard boundaries by default. HF does
+the same — but if your composition needs a smooth fade between scenes,
+you have to drive opacity explicitly with GSAP at the boundary. A scene can
+hard-cut itself with `gsap.set` at its local end (the corpus fixtures do). A
+fade between two scenes goes on the scene hosts from the root timeline, since
+a scene's own timeline only sees its own file:
+
+```js
+const tl = gsap.timeline({ paused: true });
+tl.set(scene1, { opacity: 1 }, 0);
+tl.set(scene1, { opacity: 0 }, 2); // hard cut at 2s
+tl.set(scene2, { opacity: 1 }, 2);
+```
+
+For a 0.5 s crossfade:
+
+```js
+tl.to(scene1, { opacity: 0, duration: 0.5 }, 1.5);
+tl.to(scene2, { opacity: 1, duration: 0.5 }, 1.5);
+```
+
+For Remotion `<TransitionSeries>` translations see [transitions.md](transitions.md).
+
+## `<Loop>`
+
+```tsx
+<Loop durationInFrames={30}>
+  <Spinner />
+</Loop>
+```
+
+HF doesn't have a `<Loop>` primitive. Translate it to a bounded GSAP timeline using
+the time available at its insertion point:
+
+```js
+const cycleDuration = 1;
+const availableDuration = compositionDuration - 3;
+const repeat = Math.max(0, Math.floor(availableDuration / cycleDuration) - 1);
+const spinTl = gsap.timeline({ paused: true, repeat, repeatRefresh: false });
+spinTl.to(spinner, { rotate: 360, duration: 1.0, ease: "none" });
+// Embed in the main composition timeline at the right offset:
+mainTl.add(spinTl, 3);
+```
+
+This is fragile — Remotion's `<Loop>` resets internal state every iteration,
+which GSAP repeat does too, but if the looped child has its own animation,
+you need to be careful that GSAP's `repeatRefresh` is on or off as needed.
+The finite count is required because HyperFrames seeks a bounded composition frame-by-frame.
+
+## `<Freeze>`
+
+```tsx
+<Freeze frame={30}>
+  <Animated />
+</Freeze>
+```
+
+Drop the wrapper. `<Freeze>` pins `useCurrentFrame()` at a constant for
+the children — but in HF, the children's animation is already driven by
+explicit GSAP tweens, so freeze translates to "don't tween this element".
+
+## Multiple parallel tracks
+
+When you have a background video + overlay text + audio playing
+simultaneously, use distinct `data-track-index` values:
+
+```html
+<div data-track-index="0">background video</div>
+<div data-track-index="1">overlay text</div>
+<audio data-track-index="2" ...></audio>
+```
+
+The runtime picks track ordering from the index. See [media.md](media.md)
+for media-specific track conventions.
diff --git a/.claude/skills/remotion-to-hyperframes/references/timing.md b/.claude/skills/remotion-to-hyperframes/references/timing.md
new file mode 100644
index 0000000..dee32ae
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/timing.md
@@ -0,0 +1,165 @@
+# Timing translation: interpolate, spring, easing
+
+The single highest-leverage reference. Easings and timings are what readers
+notice; getting them wrong costs more SSIM than any other translation choice.
+Empirically validated against tiers T1–T3.
+
+## Conversion: frames → seconds
+
+HF's timeline is in seconds. Remotion is frame-based. Always:
+
+```
+time_seconds = frame / fps
+```
+
+So at fps=30:
+
+- frame 15 → 0.5 s
+- frame 30 → 1.0 s
+- frame 90 → 3.0 s
+
+Do this conversion once when translating, not at runtime.
+
+## interpolate — linear
+
+```tsx
+const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp" });
+```
+
+Translates to:
+
+```js
+gsap.to(target, { opacity: 1, duration: 1.0, ease: "none" }, 0);
+// fromTo if the property starts at 0 and CSS doesn't already set it
+gsap.fromTo(target, { opacity: 0 }, { opacity: 1, duration: 1.0, ease: "none" }, 0);
+```
+
+`ease: "none"` matches Remotion's default linear interpolation. CSS sets the
+`from` value if your initial state is in CSS; otherwise use `fromTo`.
+
+`extrapolateLeft`/`extrapolateRight` defaults to `"extend"` in Remotion but
+`"clamp"` is what the agent will see most often. GSAP doesn't extend — values
+hold at the start and end of the tween. So for `clamp`, GSAP matches; for
+`extend`, you'd need to extend the input range manually before emitting.
+
+## interpolate — multi-segment
+
+```tsx
+const opacity = interpolate(frame, [0, 15, 75, 90], [0, 1, 1, 0]);
+```
+
+Three keyframed tweens at offsets `[0]/fps`, `[1]/fps`, `[2]/fps`:
+
+```js
+const tl = gsap.timeline({ paused: true });
+tl.to(target, { opacity: 1, duration: 0.5, ease: "none" }, 0);
+tl.to(target, { opacity: 1, duration: 2.0, ease: "none" }, 0.5);
+tl.to(target, { opacity: 0, duration: 0.5, ease: "none" }, 2.5);
+```
+
+Validated in T1 — mean SSIM 0.974 against Remotion baseline.
+
+## spring → GSAP back.out
+
+Remotion's `spring()` is the most lossy translation. The mapping is approximate
+but close enough that real-world compositions hold ≥ 0.92 SSIM (T2: 0.985, T3: 0.953).
+
+| Remotion `spring` config                          | GSAP equivalent                                      | Validated in                     |
+| ------------------------------------------------- | ---------------------------------------------------- | -------------------------------- |
+| `{damping: 12, stiffness: 100, mass: 1}` (snappy) | `back.out(1.4)` over ~0.7 s                          | T2, T3 (TitleScene)              |
+| `{damping: 14, stiffness: 90, mass: 1}` (calmer)  | `back.out(1.2)` over ~0.7 s                          | T3 (StatCard)                    |
+| `{damping: 8, stiffness: 200}` (very bouncy)      | `back.out(2.0)` or `elastic.out(1, 0.5)` over ~0.6 s | not validated; budget ~0.05 SSIM |
+| `{overshootClamping: true}`                       | `power3.out` over ~0.6 s (no overshoot)              | not validated                    |
+
+**Rule of thumb**: `back.out(N)` overshoot ratio ≈ `(stiffness / damping^2) * 1.4`. For
+`damping:12, stiffness:100` that gives `1.4 * 100/144 = 0.97`, which is close to
+the validated 1.4 (the formula is rough; tune by visual). Default duration is
+~0.7 s for the typical config.
+
+When the spring's `delay`/`from`/`to` are non-default, scale the duration
+proportionally.
+
+## interpolate with custom easing
+
+```tsx
+import { Easing } from "remotion";
+interpolate(frame, [0, 30], [0, 1], { easing: Easing.out(Easing.cubic) });
+```
+
+| Remotion                     | GSAP                                                                                   |
+| ---------------------------- | -------------------------------------------------------------------------------------- |
+| `Easing.in(Easing.linear)`   | `ease: "none"`                                                                         |
+| `Easing.out(Easing.cubic)`   | `ease: "power3.out"`                                                                   |
+| `Easing.inOut(Easing.cubic)` | `ease: "power3.inOut"`                                                                 |
+| `Easing.out(Easing.poly(N))` | `ease: "power<N>.out"` (N=2 quad, 3 cubic, 4 quart, 5 quint)                           |
+| `Easing.bezier(a,b,c,d)`     | `CustomEase.create("c", "M0,0 C${a},${b} ${c},${d} 1,1")` (requires CustomEase plugin) |
+| `Easing.elastic(bounciness)` | `ease: "elastic.out(${bounciness}, 0.3)"`                                              |
+| `Easing.bounce`              | `ease: "bounce.out"`                                                                   |
+| `Easing.back(overshoot)`     | `ease: "back.out(${overshoot * 1.7})"` (Remotion's overshoot scale differs)            |
+
+## interpolate driving non-numeric properties
+
+```tsx
+const color = interpolateColors(frame, [0, 30], ["#ff0000", "#0000ff"]);
+```
+
+GSAP does color tweens natively:
+
+```js
+gsap.to(target, { color: "#0000ff", duration: 1.0, ease: "none" }, 0);
+```
+
+Same for `backgroundColor`, `borderColor`. The `from` value is read from CSS
+or the inline style.
+
+## Custom count-up / number tweens
+
+When Remotion uses a frame-driven number ramp (`Math.round(value * eased)`):
+
+```tsx
+const t = interpolate(frame, [0, 45], [0, 1]);
+const eased = 1 - (1 - t) ** 3; // cubic ease-out
+const value = Math.round(target * eased);
+return <div>{value.toLocaleString()}</div>;
+```
+
+GSAP equivalent — tween a counter object, write `textContent` on update:
+
+```js
+const counter = { v: 0 };
+tl.to(
+  counter,
+  {
+    v: target,
+    duration: 1.5,
+    ease: "power3.out",
+    onUpdate: () => {
+      el.textContent = Math.round(counter.v).toLocaleString();
+    },
+  },
+  0,
+);
+```
+
+`power3.out` matches `1 - (1-t)^3` exactly. Validated in T3 (mean SSIM 0.953).
+Per-frame digit mismatches occur on sub-frame timing offsets but final values
+converge — no SSIM impact above the noise floor.
+
+## Stagger via per-instance prop
+
+When custom subcomponents take a `delayInFrames` prop:
+
+```tsx
+<StatCard delayInFrames={i * 12} value={...} />
+```
+
+Translate to GSAP timeline offsets:
+
+```js
+cards.forEach((card, i) => {
+  const start = base + i * (12 / fps); // i * 0.4s at fps=30
+  tl.to(card, { ... }, start);
+});
+```
+
+Validated in T3 — three StatCards staggered at 0.0/0.4/0.8 s.
diff --git a/.claude/skills/remotion-to-hyperframes/references/transitions.md b/.claude/skills/remotion-to-hyperframes/references/transitions.md
new file mode 100644
index 0000000..223cc7f
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/references/transitions.md
@@ -0,0 +1,114 @@
+# Transitions translation: @remotion/transitions → HF crossfades / shader-transitions
+
+The `@remotion/transitions` package is Remotion's library of pre-built
+scene-to-scene transitions. HF has two paths to translate them:
+
+1. **Manual GSAP crossfade** — for simple opacity/transform transitions. Free, no extra package.
+2. **HF shader-transitions package** — for visually-rich transitions that match the @remotion/transitions presets.
+
+## Pattern: `<TransitionSeries>` is `<Series>` with overlap
+
+```tsx
+<TransitionSeries>
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneA />
+  </TransitionSeries.Sequence>
+  <TransitionSeries.Transition
+    presentation={fade()}
+    timing={linearTiming({ durationInFrames: 15 })}
+  />
+  <TransitionSeries.Sequence durationInFrames={60}>
+    <SceneB />
+  </TransitionSeries.Sequence>
+</TransitionSeries>
+```
+
+Translates to scenes that overlap by the transition duration:
+
+- SceneA: [0, 60] = `data-start="0" data-duration="2"`
+- SceneB: [60-15, 60-15+60] = `data-start="1.5" data-duration="2"` (the transition window overlaps the end of A and start of B)
+
+Then drive the transition with GSAP:
+
+```js
+// Manual fade (presentation={fade()})
+tl.to(sceneA, { opacity: 0, duration: 0.5, ease: "none" }, 1.5);
+tl.fromTo(sceneB, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "none" }, 1.5);
+```
+
+## Presentation table
+
+| Remotion `presentation`            | HF translation                                                                            |
+| ---------------------------------- | ----------------------------------------------------------------------------------------- |
+| `fade()`                           | manual `gsap.to(opacity)` crossfade                                                       |
+| `slide({direction: "from-right"})` | `gsap.fromTo(translateX: "100%" → 0)` on incoming + `to(translateX: "-100%")` on outgoing |
+| `wipe({direction: "from-left"})`   | `gsap.fromTo(clip-path: inset(0 100% 0 0) → inset(0 0 0 0))` on incoming                  |
+| `clockWipe()`                      | use HF's `sdf-iris` shader-transition (`npx hyperframes add sdf-iris`)                    |
+| `flip()`                           | `gsap.to(rotateY)` 180° split between scenes                                              |
+| `cube()`                           | use HF's `cinematic-zoom` or build manually with `rotateY` + `transform-origin`           |
+| `iris()`                           | use HF's `sdf-iris` shader-transition                                                     |
+| `none()`                           | no transition; hard cut at the boundary                                                   |
+
+## Timing translations
+
+```tsx
+linearTiming({durationInFrames: 15})              → ease: "none"
+linearTiming({durationInFrames: 15, easing: ...}) → ease per the easing table in timing.md
+springTiming({config: {damping: 12}})             → ease: "back.out(1.4)" (~0.7 s)
+```
+
+Convert `durationInFrames` to seconds (`/fps`).
+
+## When to use HF shader-transitions
+
+For transitions Remotion presets that have visually-rich GLSL equivalents
+(iris, ripple, zoom, glitch), use HF's [shader-transitions](https://hyperframes.heygen.com/catalog/blocks)
+package. They produce richer output than manual GSAP transforms.
+
+```bash
+npx hyperframes add sdf-iris
+```
+
+Then in the composition:
+
+```html
+<div id="iris-transition" class="hf-shader-transition" data-start="1.5" data-duration="0.5">
+  <!-- bound scenes via the shader-transition's data-from / data-to -->
+</div>
+```
+
+Each shader-transition has its own data attributes; see the catalog page
+for the specific block.
+
+## When the source uses a custom Presentation
+
+Remotion supports custom `presentation` implementations:
+
+```tsx
+const customPresentation: PresentationComponent = ({
+  children,
+  presentationProgress,
+  presentationDirection,
+}) => {
+  return (
+    <div
+      style={
+        {
+          /* compute transform from progress */
+        }
+      }
+    >
+      {children}
+    </div>
+  );
+};
+```
+
+Translation: extract the math from the `style={...}` block and emit
+equivalent GSAP tweens. Specifically the transform formula maps directly
+to a `gsap.to(target, { transform: ... })` parameterized by `progress`.
+
+If the custom presentation uses `useCurrentFrame()` internally to
+animate something _outside_ the simple progress curve, treat the source
+as untranslatable and bow out to the runtime interop pattern (see
+[escape-hatch.md](escape-hatch.md)).
diff --git a/.claude/skills/remotion-to-hyperframes/scripts/.gitkeep b/.claude/skills/remotion-to-hyperframes/scripts/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/.claude/skills/remotion-to-hyperframes/scripts/frame_strip.sh b/.claude/skills/remotion-to-hyperframes/scripts/frame_strip.sh
new file mode 100755
index 0000000..73264fe
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/scripts/frame_strip.sh
@@ -0,0 +1,107 @@
+#!/usr/bin/env bash
+# frame_strip.sh — produce a side-by-side comparison strip from two videos.
+#
+# Used to debug failing render_diff.sh runs visually: pick a sample timestamp
+# range, extract frames from both videos, lay them out as a grid for review.
+#
+# Usage:
+#   frame_strip.sh <baseline.mp4> <translated.mp4> [output-dir] [samples]
+#
+# Defaults: output-dir=./strip-out, samples=8 (evenly spaced across duration).
+# Output:
+#   strip.png         — single PNG with `samples` rows, each row is
+#                       (baseline frame | translated frame) at one timestamp
+#   timestamps.txt    — the timestamps sampled
+
+set -euo pipefail
+
+if [[ $# -lt 2 || $# -gt 4 ]]; then
+  echo "usage: $0 <baseline.mp4> <translated.mp4> [output-dir] [samples]" >&2
+  exit 2
+fi
+
+BASELINE="$1"
+TRANSLATED="$2"
+OUTDIR="${3:-./strip-out}"
+SAMPLES="${4:-8}"
+
+if ! command -v ffmpeg >/dev/null 2>&1 || ! command -v ffprobe >/dev/null 2>&1; then
+  echo "error: ffmpeg/ffprobe not on PATH" >&2
+  exit 2
+fi
+
+mkdir -p "$OUTDIR"
+
+# Build the strip in a single ffmpeg invocation. Two inputs (baseline and
+# translated) are sampled at N evenly-spaced timestamps via the `select`
+# filter, then assembled with hstack (per-row pairs) + vstack (rows).
+# Earlier versions spawned 3 ffmpeg calls per timestamp + a final vstack;
+# this is one call regardless of N.
+python3 - "$BASELINE" "$TRANSLATED" "$OUTDIR" "$SAMPLES" <<'PY'
+import json
+import shutil
+import subprocess
+import sys
+from pathlib import Path
+
+baseline, translated, outdir, samples = sys.argv[1], sys.argv[2], Path(sys.argv[3]), int(sys.argv[4])
+
+# Read fps + duration from the baseline so we can map timestamps to frame
+# indexes for the `select` filter (frame-accurate, doesn't depend on
+# keyframe alignment).
+probe = subprocess.run(
+    ["ffprobe", "-v", "error", "-select_streams", "v:0",
+     "-show_entries", "stream=r_frame_rate,nb_read_frames,duration",
+     "-show_entries", "format=duration",
+     "-of", "json", "-count_frames", "--", baseline],
+    check=True, capture_output=True, text=True,
+)
+data = json.loads(probe.stdout)
+stream = data["streams"][0]
+num, den = stream["r_frame_rate"].split("/")
+fps = float(num) / float(den)
+nb_frames = int(stream.get("nb_read_frames") or 0)
+if nb_frames <= 0:
+    duration = float(stream.get("duration") or data["format"]["duration"])
+    nb_frames = int(duration * fps)
+
+# Even-spaced sample frames in the 5%-95% window (skip fade-in/out noise).
+start = max(0, int(nb_frames * 0.05))
+end = max(start, int(nb_frames * 0.95) - 1)
+if samples == 1:
+    frames = [start]
+else:
+    step = (end - start) / (samples - 1)
+    frames = [int(start + i * step) for i in range(samples)]
+
+(outdir / "timestamps.txt").write_text(
+    "\n".join(f"{f / fps:.3f}" for f in frames) + "\n"
+)
+
+# select='eq(n,F1)+eq(n,F2)+...' picks exactly the listed frames from each
+# input. We then hstack per-frame pairs and vstack the result.
+select_expr = "+".join(f"eq(n,{f})" for f in frames)
+n = len(frames)
+filter_parts = [
+    f"[0:v]select='{select_expr}',setpts=N/FRAME_RATE/TB,split={n}"
+    + "".join(f"[b{i}]" for i in range(n)),
+    f"[1:v]select='{select_expr}',setpts=N/FRAME_RATE/TB,split={n}"
+    + "".join(f"[t{i}]" for i in range(n)),
+]
+for i in range(n):
+    filter_parts.append(f"[b{i}][t{i}]hstack=inputs=2[row{i}]")
+filter_parts.append(
+    "".join(f"[row{i}]" for i in range(n)) + f"vstack=inputs={n}[out]"
+)
+filter_graph = ";".join(filter_parts)
+
+cmd = [
+    "ffmpeg", "-y", "-hide_banner", "-loglevel", "error",
+    "-i", baseline, "-i", translated,
+    "-filter_complex", filter_graph,
+    "-map", "[out]", "-frames:v", "1",
+    str(outdir / "strip.png"),
+]
+subprocess.run(cmd, check=True)
+print(f"wrote {outdir / 'strip.png'} ({n} samples)")
+PY
diff --git a/.claude/skills/remotion-to-hyperframes/scripts/lint_source.py b/.claude/skills/remotion-to-hyperframes/scripts/lint_source.py
new file mode 100755
index 0000000..5b72eec
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/scripts/lint_source.py
@@ -0,0 +1,370 @@
+#!/usr/bin/env python3
+"""Lint a Remotion project for patterns that don't translate cleanly to HyperFrames.
+
+The skill should run this *before* attempting a translation. If any blocker
+findings come back, the recommendation is to use the runtime interop pattern
+from PR #214 instead of producing broken HTML.
+
+Usage:
+    lint_source.py <path-to-remotion-src> [--json]
+
+Output (default human-readable, --json for machine-readable):
+    For each .ts/.tsx file, a list of findings with:
+      - severity: blocker | warning | info
+      - line, column
+      - rule id
+      - message
+      - recommendation
+
+Blockers (skill should refuse to translate):
+  - r2hf/use-state            React state machine drives animation
+  - r2hf/use-effect-deps      useEffect/useLayoutEffect with non-empty deps (side effects)
+  - r2hf/use-reducer          useReducer drives animation
+  - r2hf/async-metadata       calculateMetadata returns a Promise
+  - r2hf/third-party-react-ui Imports a React UI library (shadcn, mui, antd, mantine, chakra)
+
+Warnings (translate but flag — drop the construct, keep the rest):
+  - r2hf/lambda-import        @remotion/lambda configuration — drop, HF is single-machine
+  - r2hf/delay-render         delayRender() — HF handles asset loading differently
+  - r2hf/use-callback         useCallback — usually decorative, drop
+  - r2hf/use-memo             useMemo — usually decorative, drop
+  - r2hf/custom-hook          Custom hook (use*) defined locally; may need manual rewrite
+
+Info (translate and document):
+  - r2hf/static-file          staticFile("x") — convert to relative path
+  - r2hf/interpolate-colors   interpolateColors — translate to GSAP color tween
+"""
+
+from __future__ import annotations
+
+import argparse
+import json
+import re
+import sys
+from collections.abc import Iterable
+from dataclasses import dataclass, asdict
+from pathlib import Path
+from typing import Callable
+
+# Windows sizes stdio to the ANSI code page (cp1252), which cannot encode every glyph
+# a finding message carries. These scripts emit UTF-8 on every platform; say so. Carry
+# `errors` across: reconfigure() resets it to "strict", and CPython deliberately gives
+# stderr "backslashreplace" so the diagnostic path can never itself raise — this script
+# prints scanned filenames, and an unpaired surrogate in one would otherwise crash the
+# reporter instead of being escaped.
+for _stream in (sys.stdout, sys.stderr):
+    if hasattr(_stream, "reconfigure"):
+        _stream.reconfigure(encoding="utf-8", errors=_stream.errors)
+
+BLOCKER = "blocker"
+WARNING = "warning"
+INFO = "info"
+
+THIRD_PARTY_UI_PACKAGES = {
+    "@mui/material",
+    "@mui/icons-material",
+    "@chakra-ui/react",
+    "@mantine/core",
+    "antd",
+    "@shadcn/ui",
+    "@radix-ui",
+    "@nextui-org/react",
+}
+
+
+@dataclass
+class Finding:
+    file: str
+    line: int
+    column: int
+    severity: str
+    rule: str
+    message: str
+    recommendation: str
+
+
+@dataclass
+class Rule:
+    """A lint rule: a matcher that yields hits, plus the metadata each hit gets.
+
+    A matcher is a function `src -> Iterable[(offset, override_message)]`. If
+    `override_message` is None, the rule's default `message` is used; matchers
+    that need to embed the matched text (custom-hook name, third-party package
+    name) return the customized message instead.
+    """
+
+    rule_id: str
+    severity: str
+    matcher: Callable[[str], Iterable[tuple[int, str | None]]]
+    message: str
+    recommendation: str
+
+
+def _regex_matcher(pattern: re.Pattern[str]) -> Callable[[str], Iterable[tuple[int, str | None]]]:
+    def _match(src: str) -> Iterable[tuple[int, str | None]]:
+        for m in pattern.finditer(src):
+            yield m.start(), None
+
+    return _match
+
+
+def _use_effect_with_deps(src: str) -> Iterable[tuple[int, str | None]]:
+    # Find use(Layout)?Effect(, walk to its matching ), and check if the call
+    # ends with `, [<non-empty>])`. Empty `[]` is mount-only, allowed.
+    for m in re.finditer(r"\buse(?:Layout)?Effect\s*\(", src):
+        end = _find_matching_paren(src, m.end() - 1)
+        if end is None:
+            continue
+        call = src[m.start() : end + 1]
+        m2 = re.search(r",\s*\[([^\]]*)\]\s*$", call[:-1])
+        if m2 and m2.group(1).strip():
+            yield m.start(), None
+
+
+_CUSTOM_HOOK_DECL = re.compile(
+    r"^\s*(?:export\s+(?:default\s+)?)?(?:function|const|let|var)\s+(use[A-Z]\w+)\b",
+    re.MULTILINE,
+)
+_REMOTION_BUILTIN_HOOKS = {"useCurrentFrame", "useVideoConfig"}
+
+
+def _custom_hook(src: str) -> Iterable[tuple[int, str | None]]:
+    for m in _CUSTOM_HOOK_DECL.finditer(src):
+        name = m.group(1)
+        if name in _REMOTION_BUILTIN_HOOKS:
+            continue
+        yield m.start(), f"Custom hook `{name}` defined locally — may need manual rewrite"
+
+
+_IMPORT_FROM = re.compile(r"from\s+['\"]([^'\"]+)['\"]")
+
+
+def _third_party_react_ui(src: str) -> Iterable[tuple[int, str | None]]:
+    for m in _IMPORT_FROM.finditer(src):
+        pkg = m.group(1)
+        if any(pkg.startswith(p) for p in THIRD_PARTY_UI_PACKAGES):
+            yield m.start(), f"Imports `{pkg}` — third-party React UI library has no HF equivalent"
+
+
+RULES: list[Rule] = [
+    Rule(
+        "r2hf/use-state",
+        BLOCKER,
+        _regex_matcher(re.compile(r"\buseState\s*[(<]")),
+        "useState detected — Remotion compositions that drive animation via React state are not deterministic frame-capture targets in HyperFrames",
+        "Use the runtime interop pattern from PR #214 instead of attempting a translation",
+    ),
+    Rule(
+        "r2hf/use-reducer",
+        BLOCKER,
+        _regex_matcher(re.compile(r"\buseReducer\s*[(<]")),
+        "useReducer detected — same issue as useState",
+        "Use the runtime interop pattern from PR #214",
+    ),
+    Rule(
+        "r2hf/use-effect-deps",
+        BLOCKER,
+        _use_effect_with_deps,
+        "useEffect/useLayoutEffect with non-empty deps — side effects don't translate to HF's seek-driven model",
+        "Move the side-effect work into a build step, or use the runtime interop pattern",
+    ),
+    Rule(
+        "r2hf/async-metadata",
+        BLOCKER,
+        _regex_matcher(
+            re.compile(
+                r"calculateMetadata[^=]*=\s*async\b|async\s+calculateMetadata\b|calculateMetadata\s*:\s*async"
+            )
+        ),
+        "calculateMetadata returns a Promise — HF needs composition metadata up front",
+        "Resolve metadata at build time and pass concrete values, or use runtime interop",
+    ),
+    Rule(
+        "r2hf/third-party-react-ui",
+        BLOCKER,
+        _third_party_react_ui,
+        "Imports a third-party React UI library — no HF equivalent",
+        "Use runtime interop, or rewrite the affected components as HTML+CSS",
+    ),
+    # Lambda is a warning, not a blocker: it's deployment config, orthogonal
+    # to the rendered composition. The skill drops the import and translates
+    # the rest. See references/escape-hatch.md.
+    Rule(
+        "r2hf/lambda-import",
+        WARNING,
+        _regex_matcher(re.compile(r"from\s+['\"]@remotion/lambda['\"]")),
+        "@remotion/lambda is Remotion-specific distributed rendering — no HF equivalent today",
+        "Drop the Lambda config; HF runs single-machine. Document the gap in TRANSLATION_NOTES.md.",
+    ),
+    Rule(
+        "r2hf/delay-render",
+        WARNING,
+        _regex_matcher(re.compile(r"\bdelayRender\s*\(")),
+        "delayRender() — HF waits on asset readiness via the Frame Adapter pattern",
+        "Drop the call; HF handles this transparently",
+    ),
+    Rule(
+        "r2hf/use-callback",
+        WARNING,
+        _regex_matcher(re.compile(r"\buseCallback\s*\(")),
+        "useCallback — typically decorative for render performance, no HF equivalent needed",
+        "Drop the wrapper, inline the function",
+    ),
+    Rule(
+        "r2hf/use-memo",
+        WARNING,
+        _regex_matcher(re.compile(r"\buseMemo\s*\(")),
+        "useMemo — typically decorative, no HF equivalent needed",
+        "Drop the wrapper, compute inline",
+    ),
+    Rule(
+        "r2hf/custom-hook",
+        WARNING,
+        _custom_hook,
+        "Custom hook defined locally — may need manual rewrite",
+        "Inline the hook body if pure; bow out to runtime interop if it uses useState/useEffect",
+    ),
+    Rule(
+        "r2hf/static-file",
+        INFO,
+        _regex_matcher(re.compile(r"\bstaticFile\s*\(")),
+        "staticFile() reference — convert to a relative path in the HF composition",
+        "Replace `staticFile(\"x.png\")` with `\"x.png\"` and copy the asset alongside the HTML",
+    ),
+    Rule(
+        "r2hf/interpolate-colors",
+        INFO,
+        _regex_matcher(re.compile(r"\binterpolateColors\s*\(")),
+        "interpolateColors() — translate to a GSAP color tween",
+        "See references/timing.md for the GSAP equivalent",
+    ),
+]
+
+
+def _find_matching_paren(src: str, open_idx: int) -> int | None:
+    """Given the index of an open `(`, return the index of its matching `)`.
+
+    Skips parens that appear inside `'...'`, `"..."`, or `` `...` `` string
+    literals. Returns None if no matching close paren is found.
+
+    This is good enough for hand-written Remotion source. It does not handle
+    template-literal interpolations `${...}` recursively or comments — both
+    are uncommon in Remotion code we expect to lint and would only matter
+    if the unbalanced paren landed inside such a region.
+    """
+    if open_idx >= len(src) or src[open_idx] != "(":
+        return None
+    depth = 0
+    i = open_idx
+    in_str: str | None = None
+    while i < len(src):
+        c = src[i]
+        if in_str is not None:
+            if c == "\\":
+                i += 2
+                continue
+            if c == in_str:
+                in_str = None
+            i += 1
+            continue
+        if c in ("'", '"', "`"):
+            in_str = c
+            i += 1
+            continue
+        if c == "(":
+            depth += 1
+        elif c == ")":
+            depth -= 1
+            if depth == 0:
+                return i
+        i += 1
+    return None
+
+
+def lint_file(path: Path) -> list[Finding]:
+    # Remotion sources are UTF-8. Left to the platform default, a source carrying an
+    # em dash or a curly quote raises UnicodeDecodeError on Windows before any rule runs.
+    src = path.read_text(encoding="utf-8")
+    findings: list[Finding] = []
+
+    def loc(offset: int) -> tuple[int, int]:
+        line = src.count("\n", 0, offset) + 1
+        col = offset - (src.rfind("\n", 0, offset) + 1) + 1
+        return line, col
+
+    for rule in RULES:
+        for offset, override_message in rule.matcher(src):
+            line, col = loc(offset)
+            findings.append(
+                Finding(
+                    str(path),
+                    line,
+                    col,
+                    rule.severity,
+                    rule.rule_id,
+                    override_message or rule.message,
+                    rule.recommendation,
+                )
+            )
+
+    findings.sort(key=lambda f: (f.file, f.line, f.column))
+    return findings
+
+
+def main() -> int:
+    ap = argparse.ArgumentParser()
+    ap.add_argument("path", type=Path, help="Directory or file to lint")
+    ap.add_argument("--json", action="store_true", help="Emit JSON instead of human-readable output")
+    args = ap.parse_args()
+
+    if not args.path.exists():
+        print(f"error: {args.path} does not exist", file=sys.stderr)
+        return 2
+
+    files: list[Path]
+    if args.path.is_file():
+        files = [args.path]
+    else:
+        files = sorted(
+            p
+            for p in args.path.rglob("*")
+            if p.is_file()
+            and p.suffix in {".ts", ".tsx", ".jsx", ".js"}
+            and "node_modules" not in p.parts
+        )
+
+    all_findings: list[Finding] = []
+    for f in files:
+        all_findings.extend(lint_file(f))
+
+    blockers = sum(1 for f in all_findings if f.severity == BLOCKER)
+    warnings = sum(1 for f in all_findings if f.severity == WARNING)
+    infos = sum(1 for f in all_findings if f.severity == INFO)
+
+    if args.json:
+        json.dump(
+            {
+                "files_scanned": len(files),
+                "blockers": blockers,
+                "warnings": warnings,
+                "infos": infos,
+                "findings": [asdict(f) for f in all_findings],
+            },
+            sys.stdout,
+            indent=2,
+        )
+        sys.stdout.write("\n")
+    else:
+        for f in all_findings:
+            print(f"{f.file}:{f.line}:{f.column} [{f.severity}] {f.rule}: {f.message}")
+            print(f"    -> {f.recommendation}")
+        print()
+        print(f"{len(files)} files scanned · {blockers} blocker · {warnings} warning · {infos} info")
+        if blockers:
+            print("RECOMMENDATION: do not attempt translation. Use the runtime interop pattern from PR #214.")
+
+    return 1 if blockers else 0
+
+
+if __name__ == "__main__":
+    sys.exit(main())
diff --git a/.claude/skills/remotion-to-hyperframes/scripts/render_diff.sh b/.claude/skills/remotion-to-hyperframes/scripts/render_diff.sh
new file mode 100755
index 0000000..dc349fd
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/scripts/render_diff.sh
@@ -0,0 +1,103 @@
+#!/usr/bin/env bash
+# render_diff.sh — compute per-frame SSIM between two video files.
+#
+# The eval primitive for the remotion-to-hyperframes skill: given a Remotion
+# render and a HyperFrames render of the same composition, report whether the
+# translation is visually equivalent.
+#
+# Usage:
+#   render_diff.sh <baseline.mp4> <translated.mp4> [output-dir]
+#
+# Output (in output-dir, defaults to ./diff-out):
+#   ssim.log          — per-frame SSIM lines from ffmpeg
+#   summary.json      — { mean, min, p05, p95, frame_count, pass, threshold }
+#
+# Exit codes:
+#   0  — pass (mean SSIM >= threshold)
+#   1  — fail (mean SSIM <  threshold)
+#   2  — usage / setup error
+#
+# Threshold defaults to 0.85 (loose; tier-specific thresholds are applied by
+# the orchestrator). Override with R2HF_SSIM_THRESHOLD=0.95 in the environment.
+
+set -euo pipefail
+
+THRESHOLD="${R2HF_SSIM_THRESHOLD:-0.85}"
+
+if [[ $# -lt 2 || $# -gt 3 ]]; then
+  echo "usage: $0 <baseline.mp4> <translated.mp4> [output-dir]" >&2
+  exit 2
+fi
+
+BASELINE="$1"
+TRANSLATED="$2"
+OUTDIR="${3:-./diff-out}"
+
+if [[ ! -f "$BASELINE" ]]; then
+  echo "error: baseline not found: $BASELINE" >&2
+  exit 2
+fi
+if [[ ! -f "$TRANSLATED" ]]; then
+  echo "error: translated not found: $TRANSLATED" >&2
+  exit 2
+fi
+if ! command -v ffmpeg >/dev/null 2>&1; then
+  echo "error: ffmpeg not on PATH" >&2
+  exit 2
+fi
+
+mkdir -p "$OUTDIR"
+SSIM_LOG="$OUTDIR/ssim.log"
+SUMMARY="$OUTDIR/summary.json"
+
+# ffmpeg's ssim filter writes one line per frame to stats_file and a single
+# Mean SSIM line to stderr. We capture both — per-frame for distribution
+# stats, and the mean for the headline number.
+ffmpeg -hide_banner -nostats -loglevel info \
+  -i "$BASELINE" -i "$TRANSLATED" \
+  -lavfi "[0:v]scale=iw:ih[ref];[1:v]scale=iw:ih[main];[main][ref]ssim=stats_file=$SSIM_LOG" \
+  -f null - 2>"$OUTDIR/ffmpeg.stderr"
+
+# Parse: each line in ssim.log looks like
+#   n:1 Y:0.987655 U:0.992345 V:0.991234 All:0.989012 (19.512345)
+# We want the All:N column.
+python3 - "$SSIM_LOG" "$SUMMARY" "$THRESHOLD" <<'PY'
+import json, math, re, sys
+from pathlib import Path
+
+log_path = Path(sys.argv[1])
+out_path = Path(sys.argv[2])
+threshold = float(sys.argv[3])
+
+values = []
+pattern = re.compile(r"All:([\d.]+)")
+for line in log_path.read_text().splitlines():
+    m = pattern.search(line)
+    if m:
+        try:
+            values.append(float(m.group(1)))
+        except ValueError:
+            pass
+
+if not values:
+    print(f"error: no SSIM samples parsed from {log_path}", file=sys.stderr)
+    sys.exit(2)
+
+values.sort()
+n = len(values)
+mean = sum(values) / n
+p_idx = lambda p: min(n - 1, max(0, int(math.floor(p * n))))
+summary = {
+    "frame_count": n,
+    "mean": round(mean, 6),
+    "min": round(values[0], 6),
+    "max": round(values[-1], 6),
+    "p05": round(values[p_idx(0.05)], 6),
+    "p95": round(values[p_idx(0.95)], 6),
+    "threshold": threshold,
+    "pass": bool(mean >= threshold),
+}
+out_path.write_text(json.dumps(summary, indent=2) + "\n")
+print(json.dumps(summary, indent=2))
+sys.exit(0 if summary["pass"] else 1)
+PY
diff --git a/.claude/skills/remotion-to-hyperframes/scripts/tests/fixtures/blocker.tsx b/.claude/skills/remotion-to-hyperframes/scripts/tests/fixtures/blocker.tsx
new file mode 100644
index 0000000..f036366
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/scripts/tests/fixtures/blocker.tsx
@@ -0,0 +1,50 @@
+import React, { useState, useEffect, useLayoutEffect } from "react";
+import { useCurrentFrame, AbsoluteFill, delayRender, continueRender } from "remotion";
+import { Button } from "@mui/material";
+
+// Custom hook in `export const useFoo = ...` form — earlier custom-hook
+// regex anchored to `^\s*(?:function|const|let)` and missed the `export`
+// prefix. This covers the regression.
+export const useFadeMixed = (n: number) => {
+  const f = useCurrentFrame();
+  return f / n;
+};
+
+export const BadComposition: React.FC = () => {
+  const frame = useCurrentFrame();
+  const [data, setData] = useState<string | null>(null);
+  const [handle] = useState(() => delayRender());
+
+  // Multi-line useEffect body with commas inside (fillRect args) — regression
+  // coverage for r2hf/use-effect-deps. An earlier regex `[^,]+` would stop at
+  // the first comma inside the body and miss the deps array entirely.
+  useEffect(() => {
+    fetch("/api/data")
+      .then((r) => r.json())
+      .then((d) => {
+        const ctx = document.createElement("canvas").getContext("2d");
+        ctx?.fillRect(0, 0, 100, 100);
+        setData(d.text);
+        continueRender(handle);
+      });
+  }, [handle]);
+
+  // Expression-bodied useEffect — the form `useEffect(() => fetch(...), [deps])`
+  // has no closing `}`, which an earlier regex anchored on. This and the
+  // useLayoutEffect below cover the false-negative cases Miguel surfaced.
+  useEffect(() => fetch("/api/heartbeat"), [frame]);
+  useLayoutEffect(() => (document.title = `frame ${frame}`), [frame]);
+
+  return (
+    <AbsoluteFill>
+      <Button>{data ?? "loading"}</Button>
+      <span>{frame}</span>
+    </AbsoluteFill>
+  );
+};
+
+export const calculateMetadata = async () => {
+  const res = await fetch("/api/duration");
+  const { duration } = await res.json();
+  return { durationInFrames: duration };
+};
diff --git a/.claude/skills/remotion-to-hyperframes/scripts/tests/fixtures/clean.tsx b/.claude/skills/remotion-to-hyperframes/scripts/tests/fixtures/clean.tsx
new file mode 100644
index 0000000..73c9b60
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/scripts/tests/fixtures/clean.tsx
@@ -0,0 +1,46 @@
+import React, { useEffect } from "react";
+import {
+  useCurrentFrame,
+  useVideoConfig,
+  AbsoluteFill,
+  interpolate,
+  spring,
+  Sequence,
+  staticFile,
+  Audio,
+  Img,
+} from "remotion";
+
+// Mount-only useEffect with empty deps + a later expression containing a
+// non-empty array — regression coverage for the over-match Miguel reported:
+// the earlier regex spanned past `[]` and matched `[frame]` from `pick(...)`,
+// falsely flagging this clean fixture as having a blocker.
+function pick<T>(_key: string, items: T[]): T {
+  return items[0];
+}
+
+const TitleCard: React.FC = () => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  useEffect(() => {
+    console.log("mounted");
+  }, []);
+  const _picked = pick("x", [frame]);
+  const opacity = interpolate(frame, [0, 15], [0, 1], { extrapolateRight: "clamp" });
+  const scale = spring({ frame, fps, config: { damping: 12 } });
+  return (
+    <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
+      <div style={{ fontSize: 72, opacity, transform: `scale(${scale})` }}>Hello</div>
+      <Img src={staticFile("logo.png")} />
+    </AbsoluteFill>
+  );
+};
+
+export const MyComposition: React.FC = () => (
+  <AbsoluteFill>
+    <Sequence from={0} durationInFrames={90}>
+      <TitleCard />
+    </Sequence>
+    <Audio src={staticFile("music.mp3")} volume={0.5} />
+  </AbsoluteFill>
+);
diff --git a/.claude/skills/remotion-to-hyperframes/scripts/tests/smoke.sh b/.claude/skills/remotion-to-hyperframes/scripts/tests/smoke.sh
new file mode 100755
index 0000000..3a13c28
--- /dev/null
+++ b/.claude/skills/remotion-to-hyperframes/scripts/tests/smoke.sh
@@ -0,0 +1,90 @@
+#!/usr/bin/env bash
+# smoke.sh — exercise the eval harness scripts against synthetic inputs.
+#
+# Generates two synthetic videos with ffmpeg's testsrc filter, runs render_diff
+# and frame_strip against them, and runs lint_source against fixture .tsx files.
+# Asserts the harness produces sensible output without depending on a real
+# Remotion or HyperFrames render pipeline being installed.
+#
+# Usage: ./smoke.sh
+# Exit 0 on pass.
+
+set -euo pipefail
+
+THIS_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+SCRIPTS_DIR="$(cd "$THIS_DIR/.." && pwd)"
+WORK="$(mktemp -d)"
+trap 'rm -rf "$WORK"' EXIT
+
+echo "==> smoke: render_diff.sh against identical inputs"
+# Generate the same test pattern twice. Identical inputs → SSIM should be ~1.0.
+ffmpeg -y -hide_banner -loglevel error \
+  -f lavfi -i "testsrc=duration=2:size=320x240:rate=30" \
+  -pix_fmt yuv420p "$WORK/baseline.mp4"
+cp "$WORK/baseline.mp4" "$WORK/translated.mp4"
+
+R2HF_SSIM_THRESHOLD=0.99 "$SCRIPTS_DIR/render_diff.sh" \
+  "$WORK/baseline.mp4" "$WORK/translated.mp4" "$WORK/diff" >/dev/null
+
+MEAN=$(python3 -c "import json,sys; print(json.load(open('$WORK/diff/summary.json'))['mean'])")
+PASS=$(python3 -c "import json,sys; print(json.load(open('$WORK/diff/summary.json'))['pass'])")
+if [[ "$PASS" != "True" ]]; then
+  echo "FAIL: identical inputs failed pass check (mean=$MEAN)"
+  exit 1
+fi
+echo "    identical inputs → mean SSIM=$MEAN (pass=True)"
+
+echo "==> smoke: render_diff.sh against different inputs"
+# Different test pattern → SSIM should be lower. With a high threshold it should fail.
+ffmpeg -y -hide_banner -loglevel error \
+  -f lavfi -i "testsrc2=duration=2:size=320x240:rate=30" \
+  -pix_fmt yuv420p "$WORK/different.mp4"
+
+set +e
+R2HF_SSIM_THRESHOLD=0.99 "$SCRIPTS_DIR/render_diff.sh" \
+  "$WORK/baseline.mp4" "$WORK/different.mp4" "$WORK/diff2" >/dev/null
+RC=$?
+set -e
+if [[ "$RC" -eq 0 ]]; then
+  echo "FAIL: different inputs unexpectedly passed at threshold 0.99"
+  exit 1
+fi
+DIFF_MEAN=$(python3 -c "import json; print(json.load(open('$WORK/diff2/summary.json'))['mean'])")
+echo "    different inputs → mean SSIM=$DIFF_MEAN (correctly failed at 0.99)"
+
+echo "==> smoke: frame_strip.sh produces a strip"
+"$SCRIPTS_DIR/frame_strip.sh" "$WORK/baseline.mp4" "$WORK/different.mp4" "$WORK/strip" 4 >/dev/null
+if [[ ! -f "$WORK/strip/strip.png" ]]; then
+  echo "FAIL: frame_strip.sh did not produce strip.png"
+  exit 1
+fi
+echo "    strip.png written ($(stat -c%s "$WORK/strip/strip.png" 2>/dev/null || stat -f%z "$WORK/strip/strip.png") bytes)"
+
+echo "==> smoke: lint_source.py on clean fixture (expect exit 0)"
+set +e
+python3 "$SCRIPTS_DIR/lint_source.py" "$THIS_DIR/fixtures/clean.tsx" --json >"$WORK/clean.json"
+RC=$?
+set -e
+BLOCKERS=$(python3 -c "import json; print(json.load(open('$WORK/clean.json'))['blockers'])")
+if [[ "$RC" -ne 0 || "$BLOCKERS" -ne 0 ]]; then
+  echo "FAIL: clean fixture reported $BLOCKERS blockers (rc=$RC)"
+  exit 1
+fi
+INFOS=$(python3 -c "import json; print(json.load(open('$WORK/clean.json'))['infos'])")
+echo "    clean.tsx → 0 blockers, $INFOS info findings"
+
+echo "==> smoke: lint_source.py on blocker fixture (expect exit 1)"
+set +e
+python3 "$SCRIPTS_DIR/lint_source.py" "$THIS_DIR/fixtures/blocker.tsx" --json >"$WORK/blocker.json"
+RC=$?
+set -e
+BLOCKERS=$(python3 -c "import json; print(json.load(open('$WORK/blocker.json'))['blockers'])")
+if [[ "$RC" -eq 0 || "$BLOCKERS" -lt 3 ]]; then
+  echo "FAIL: blocker fixture reported $BLOCKERS blockers, expected >=3 (rc=$RC)"
+  cat "$WORK/blocker.json"
+  exit 1
+fi
+echo "    blocker.tsx → $BLOCKERS blockers detected (correctly refused)"
+
+echo
+echo "✅ smoke tests passed"
diff --git a/.claude/skills/reverse-engineer-anything/SKILL.md b/.claude/skills/reverse-engineer-anything/SKILL.md
new file mode 100644
index 0000000..3a8ae41
--- /dev/null
+++ b/.claude/skills/reverse-engineer-anything/SKILL.md
@@ -0,0 +1,356 @@
+---
+name: reverse-engineer-anything
+description: Reverse engineer native, managed, Electron/JavaScript, packaged, firmware, and browser targets with REA. Use shipped-artifact or requested runtime evidence to explain features, compare versions, decompile code, or guide a reconstruction. Skip REA for ordinary source-repository architecture analysis.
+metadata:
+  version: "42"
+  tool_count: 207
+---
+
+# REA
+
+Use REA when a claim depends on a shipped binary or package, decompilation,
+passive application runtime evidence, or comparison with
+behavior not established by available source. For ordinary analysis of a
+complete source repository, use normal repository tools and do not run REA
+readiness or provider commands.
+
+## Connect only when needed
+
+Installing this skill supplies instructions; it does not register the REA MCP
+server, install analysis engines, or add tools to an already-running agent.
+
+If REA tools are available and their registration is not known to be stale,
+proceed directly to the target. Do not run diagnostics or setup before every
+investigation. Use the connected server's actual tool list and input schemas;
+a skill installed from repository main may describe capabilities absent from
+an older npm release. Keep complete inline Evidence when that server does not
+advertise retained references.
+
+If tools are absent, a call is blocked by the client, or a required provider is
+unavailable, read [connection and recovery](references/connection-and-recovery.md).
+Diagnose the observed blocker, continue useful supported work, and resume the
+original task after repair. Client approval, shell PATH, registration and engine
+availability have different remedies; avoid repeating setup for all of them.
+
+1. Diagnose without changing REA or client configuration. `npx` may download
+   the package and write to npm's cache. For Codex, run
+   `npx -y rea-agents@6.7.0 doctor --client codex --json`. Substitute the current
+   supported client: `claude_code`, `claude_desktop`, `codex`, `cursor`,
+   `gemini_cli`, `windsurf`, `devin`, `opencode`, `antigravity`, `copilot_cli`,
+   `commandcode`, `vscode`, `grok_build`, `omp`, or `grok_bot`. `grok_bot` has no local
+   file registration: doctor reports the Grok Bot chat step, and setup does not
+   write `mcp.json`. If the client is unknown, use `doctor --json` and
+   inspect its registration results before choosing a setup scope.
+2. Distinguish the reason. Missing, malformed, or stale registration needs a
+   scoped configuration repair. An aligned registration with no tools in the
+   active session needs a restart/reconnection; doctor cannot prove that the
+   current agent has connected. A missing provider affects only tasks requiring
+   that provider: static JavaScript inspection needs neither Hopper nor Ghidra,
+   and Android inspection has separate bring-your-own JADX/Java prerequisites.
+3. For a configuration repair, prepare the read-only plan:
+   `npx -y rea-agents@6.7.0 setup --client codex --dry-run --json`.
+   Use the current client's ID, show its exact proposed paths, backups, and
+   changes, and obtain approval before setup writes configuration or installs
+   Hopper. Setup normally installs the matching bundled skill too; include that
+   replacement in the reviewed plan. After approval, apply the same scope with
+   `npx -y rea-agents@6.7.0 setup --client codex --yes`. Add `--install-hopper`
+   only if that separate installation was needed and explicitly approved.
+4. Restart/reconnect the affected agent. Verify that REA tools actually appear
+   in the session, then resume the original investigation. If they remain
+   absent, inspect the client's MCP launch error rather than repeating setup.
+
+REA setup never installs or upgrades Node.js, npm, Homebrew, Java, Ghidra, IDA,
+JADX, Kuna, Binwalk, or Unblob. Use existing prerequisites; do not install unrelated
+software to repair
+MCP registration. For an unsupported client, use manual stdio registration
+with a version-pinned `rea-agents` package or continue through the CLI.
+
+A concrete CLI fallback for an operator-supplied JavaScript tree or ASAR is:
+
+```bash
+npx -y rea-agents@6.7.0 analyze-javascript-application /absolute/path/to/app --json
+```
+
+No MCP registration or native engine is required. Read the returned Evidence,
+graph, limitations, and unknowns with the same care as an MCP result; the CLI
+returns the Evidence record directly. This fallback does not establish that
+MCP is configured. Native CLI tasks still require their selected engine.
+Prefer an existing `rea` CLI. When none is installed and REA package acquisition
+is within the authorized scope, use `npx -y rea-agents@6.7.0` in its place.
+Configuration repair starts with a read-only setup plan; show paths, backups and
+skill replacement before applying authorized changes. Preserve existing approval
+and target-execution boundaries. REA setup never installs or upgrades unrelated
+software, including Node.js, npm, Homebrew, Java, Ghidra, IDA, JADX, Kuna, Binwalk or Unblob.
+
+## Route the target first
+
+Choose the first tool from the target the user supplied. Use `open_binary` for
+active-target native or archive workflows; target-free tools take their own
+explicit path or endpoint and do not need it.
+
+- ASAR or extracted JavaScript/Electron tree:
+  `analyze_javascript_application`.
+- Archive/package member inventory (ZIP/APK/IPA/MSIX/AppX or DMG):
+  `open_binary` with the supplied local path; use `inspect_artifact` when its
+  graph and findings help answer the question.
+- Android APK code, classes, methods, or incoming references:
+  `inspect_android_package`, then focused Android tools when advertised.
+  Archive member inventory still uses the archive route above.
+- Managed PE/CLI assembly: `inspect_managed_artifact`.
+- Firmware image: `inspect_firmware_regions` when advertised. Use
+  `extract_firmware` when extraction is requested, with a caller-selected new
+  absolute output directory. These tools use caller-supplied Binwalk/Unblob on
+  Linux; see the [firmware guide](https://github.com/morluto/rea/blob/main/docs/firmware-analysis.md).
+- .NET NativeAOT PE/ELF: native Ghidra analysis. Native code can yield pseudocode;
+  consult the NativeAOT workflow in `references/native-and-artifacts.md` for
+  optional metadata recovery and its supported host/layout boundary.
+- User-owned browser page already open: `list_browser_targets`.
+- Browser action the agent must perform (click, type, navigate):
+  `capture_browser_scenario` with declared actions. See
+  [runtime observation](references/runtime-observation.md) for connect/launch
+  and the focused follow-up browser tools.
+- Fiddler Everywhere traffic or a native `.saz` capture: read the
+  [Fiddler workflow](references/runtime-observation.md#fiddler-everywhere-traffic-debugging).
+  Inspect saved SAZ with `inspect_web_network_capture` and `format: "saz"`;
+  connect Everywhere's separate MCP server for live traffic.
+- Retained HAR/SAZ/native mitmproxy/aioquic qlog capture: `inspect_web_network_capture`. Select
+  original record ordinals when useful; inspect producer fields and byte/number
+  sidecars without fetching recorded URLs or claiming live attribution. See
+  [historical captures](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md) for the exact upstream
+  profile and credential exclusions. Qlog support starts with aioquic 1.5.0
+  JSON 0.3; stream coverage and endpoint loss declarations do not recover bodies
+  or establish network loss. Prefer detail summary, then kind qlog trace/stream
+  pages; select one trace, stream ID and direction for contribution/range pages.
+  Facts retain all-recorded-events-before-selection scope. Other qlog layouts
+  and PCAP correlation are unsupported.
+- User-owned Electron runtime already open: `list_electron_targets`. Before an electron-main Inspector attempt, check packaged fuses with `inspect_electron_fuses`; disabled `EnableNodeCliInspectArguments` means the app ignores `--inspect`.
+- Packet-field discovery: `inspect_packet_fields` searches installed protocols
+  and field names/types before choosing fields for `inspect_packet_capture`.
+  Query/page the relevant records; registrations do not establish observed traffic.
+- Recorded packet captures: `inspect_packet_capture` with selected TShark fields,
+  display filters and decode-as rules. Requires Linux, util-linux prlimit and `REA_TSHARK_COMMAND`; see
+  [capture guide](https://github.com/morluto/rea/blob/main/docs/packet-captures.md).
+  Packet limits count input packets before filtering. Output defaults to 50 matching
+  frames; use `match_offset` / `match_limit` for later pages, or explicit null
+  limit for complete matching output. Preserve the source digest across pages.
+  This does not perform live capture.
+  For address/DNS/SNI/protocol summaries use `inspect_pcap_capture` with MCP
+  detail summary, then retained kind pcap pages. Requires Wireshark 4.x tshark
+  and capinfos, with Linux prlimit or Windows Job Objects; see
+  [packet summaries](https://github.com/morluto/rea/blob/main/docs/pcap-analysis.md).
+  Select an exact DNS question for address pages; page exhaustion does not prove
+  network completeness. This reads recordings and does not acquire traffic.
+- Decoder discovery: `inspect_signal_decoders` searches installed decoder IDs
+  or selected decoder help, including channels and options. Query and page the
+  relevant details before choosing settings; this does not scan hardware.
+- Recorded logic/signal traces: `decode_signal_recording` with explicit decoder,
+  channel and protocol settings. On Linux with util-linux prlimit, supply sigrok-cli 0.7.2 through
+  `REA_SIGROK_COMMAND`; see [recording guide](https://github.com/morluto/rea/blob/main/docs/signal-recordings.md).
+  Output defaults to 50 literal lines; select annotation classes and page with
+  `line_offset` / `line_limit`, or explicit null for all remaining output.
+  Window counts are display lines, not annotations or samples. Preserve source digests across pages.
+  This reads existing files; it does not acquire hardware signals.
+- Explicit local WebAssembly artifact: `inspect_wasm_artifact`. Supply WABT 1.0.42
+  through `REA_WABT_BIN_DIRECTORY`; retain exact byte/tool identity and decoded WAT.
+  Select JavaScript glue and candidate paths explicitly and preserve URL/path
+  ambiguity. No implicit fetch or target execution; WAT is not original source.
+  See the [WASM guide](https://github.com/morluto/rea/blob/main/docs/wasm-artifacts.md).
+- Explicit local EVM bytecode carrier: `inspect_evm_interface` with caller-selected
+  `raw` or `hex` encoding. Preserve carrier/decoded digests and treat selectors,
+  argument strings and mutability as inferred candidates; this performs no chain
+  lookup or target execution. For the complete inferred interface without hex or
+  duplicate stdout, discover support and select `detail: "summary"`; complete
+  Evidence stays retained under its original identity. Use the returned
+  `parent_evidence_id` for exact function or `bytecode_hex`/stdout/stderr pages.
+  Candidate coverage does not establish interface completeness. See the
+  [EVM bytecode guide](https://github.com/morluto/rea/blob/main/docs/evm-bytecode.md).
+- Embedded Go compiler, module or build-setting metadata: `inspect_go_binary`
+  with the explicit local file. This built-in target-free inspection requires no
+  Go installation or disassembler. Preserve raw module bytes and source ranges;
+  absent metadata does not prove a binary is not Go, and unparsed text records
+  remain explicit. See the
+  [Go binary guide](https://github.com/morluto/rea/blob/main/docs/go-binaries.md).
+- Embedded cargo-auditable Rust dependency metadata: `inspect_rust_binary`
+  with the explicit local ELF, PE, or thin Mach-O file. This built-in
+  target-free inspection requires no Rust installation or disassembler. Preserve
+  package order, dependency indices, and the section file range. A missing
+  `.dep-v0` section is null metadata, not proof the binary has no dependencies.
+  A rustc commit hash is an inference from a read-only `/rustc/<40-hex>/` path.
+  See the
+  [Rust binary guide](https://github.com/morluto/rea/blob/main/docs/rust-binaries.md).
+
+- Explicit local SQLite database snapshot: `inspect_sqlite_database`. Inspect
+  with Node.js 24.x >=24.15 or 26+ providing native SQLite limits. Read schema
+  first (compact inventory by default), or select an exact ordinary table
+  and `columns` when rows are needed. Defaults are selected-table schema and
+  20 rows; request `schema_scope: "database"` for the complete stored schema. Preserve both database and existing sibling WAL identity; row samples
+  report truncation and have unspecified order. Use a quiescent snapshot rather
+  than assuming a live database/WAL pair was copied atomically. See the
+  [SQLite guide](https://github.com/morluto/rea/blob/main/docs/sqlite-databases.md).
+- Explicit Linux ELF file for offline layout, symbols, relocations or static
+  mitigation evidence: `inspect_binary_layout`. This target-free operation uses
+  caller-supplied pwntools without opening a disassembler database. Preserve its
+  raw locations and inference/coverage limits; see the
+  [offline binary guide](https://github.com/morluto/rea/blob/main/docs/binary-diagnostics.md).
+- Supplied Linux x86-64 ELF core: `inspect_recorded_crash`. Read every recorded
+  thread, raw note and source-bound register without opening a live target.
+  Historical PIDs do not select live processes. Request `include_debugger_context`
+  only when core-only mapping candidates help; see the
+  [recorded crash guide](https://github.com/morluto/rea/blob/main/docs/recorded-crashes.md).
+- PE resource type/name/language trees and static icon group references:
+  `inspect_pe_resources` with an explicit path. This portable operation requires
+  no active target or engine; opaque payloads retain file ranges and SHA-256.
+- Native executable, library, or analysis database: `open_binary`, then
+  use focused analysis tools directly; call `binary_overview` when metadata or
+  inventory context is useful and available from the selected provider.
+
+For an existing IDA MCP configuration, use `open_binary` with the original
+input binary and `provider_id: "ida"`; do not pass an `.idb` or `.i64` database.
+The legacy attached profile binds the already-open GUI input by SHA-256 and
+leaves its database open. The modern headless profile creates and closes an
+owned private database without saving. Installation and registration reuse
+[mrexodia/ida-pro-mcp](https://github.com/mrexodia/ida-pro-mcp); see the
+[IDA provider guide](https://github.com/morluto/rea/blob/main/docs/ida-provider.md).
+Proceed directly to `analyze_function`, pseudocode, or function/string searches
+after opening; IDA does not supply `binary_overview`. Consult session availability
+when composing broader workflows. Modern direct callers and unsupported dossier
+facets remain unknown; live IDA results are not replayed from snapshots.
+
+With `REA_KUNA_COMMAND` configured, `provider_id: "kuna"` answers procedure
+lists, lookups, pseudocode, assembly and `analyze_function` from Kuna's cached
+whole-program export. Callers/callees use a separate body-free graph shared by
+the session; `xrefs` returns exact-address incoming sites and filters forwarding
+aliases. These queries and inventory lookups do not trigger a C export. Indirect
+targets remain unknown and can make relationship coverage partial. Reference
+caches expire on close; a fresh CLI process repeats the native reference walk.
+Typed references, CFG, raw-memory tools and annotations remain unsupported. A cold first
+answer can come from a single-function run (its limitations say so); assembly
+waits for the export. For pseudocode and assembly, `raw_result.source` names the
+cached `.c`/`.asm` file and byte span, which you may search directly instead of
+calling per function. See the
+[Kuna provider guide](https://github.com/morluto/rea/blob/main/docs/kuna-provider.md).
+
+If the user says only "my app" without a name, path, or target already selected
+for this task, ask which app before searching for artifacts. Paths in unrelated
+saved reports and nearby test fixtures do not select the user's target. Resolve
+an actual human-readable app name to one clear installed artifact when possible;
+ask when matches are ambiguous. Never choose an example app on the user's behalf.
+
+In a target-free session, use `open_binary` to bind any archive/package or
+native target whose analysis tool operates on the active target. Do not call an
+unadvertised tool; inspect `binary_session` with `{}` and its
+`result.tool_availability` for availability reasons and remediation. Expand each
+group's `names` into entries, inheriting the inventory-level client requirements
+unless the group overrides them. In its closed effect and annotation vocabularies,
+listed flags are true and omitted known flags are false. The grouped name union
+is the complete tool inventory; use `tools/list` for canonical tool schemas.
+Provider candidate facts describe possible providers, while top-level session
+capabilities describe the current route and `analysis_provider_binding` names the
+selected provider. Do not treat those scopes as interchangeable.
+
+## Work summary-first
+
+Start with the default result and use its inline Evidence and graph context.
+For a JavaScript application or ELF layout whose size is unknown or large,
+call `analyze_javascript_application` or `inspect_binary_layout` with
+`"detail": "summary"`, then inspect the retained `parent_evidence_id` with
+`inspect_analysis_view`.
+Page module identities and select the returned `node_id` before requesting an
+item; a single file path can represent several graph roles. Do not repeat an
+identical analysis or rejected call without a changed input or resolved blocker.
+Recheck session state when a lifecycle change makes that status useful.
+Make a focused follow-up only when the
+returned result leaves a specific question unanswered.
+
+If MCP reports `resource_constraint` with `details.resource: "transport"`, call
+`inspect_analysis_view` with its reported same-session Evidence reference for a
+summary, one section/module, or a stable page. Use `trace_application_feature`
+once a seed is known, or call `export_evidence_bundle` to write the complete
+session to a selected path. The analysis remains complete in the ledger; avoid
+repeating it merely to request the same oversized response. Complete CLI JSON
+output also streams without a single MCP frame.
+
+When the retained parent ID is unknown, use `get_evidence_bundle` with
+`detail: "summary"` and exact filters for operation, target SHA-256,
+analysis-profile digest or canonical procedure address. Select its returned
+Evidence ID for the next view instead of requesting the complete bundle.
+`retention: "complete-record"` means the whole record is stored; native
+value-flow truncation and unknown metadata remain separate. For an exported
+portable bundle, use `rea inspect-evidence-bundle` with JSON containing `path`,
+`detail: "summary"` and the same `filters`. Reading that file still requires
+validating its full contents within the local memory budget.
+
+A client can also truncate a successful tool result without a REA transport
+error. Treat that preview as incomplete; use the retained parent ID for smaller
+views or export when the full record is needed. Do not parse the preview as
+canonical JSON or repeat the producer. For JavaScript, read the
+[module-view and trace recipes](references/javascript-applications.md) before
+drilling into a large graph; a broad bidirectional trace can expand unrelated
+containment relationships even after summary analysis.
+
+Every conclusion must distinguish observations, inferences, and unknowns. Cite
+Evidence IDs, preserve limitations and incomplete coverage, and never imply
+that static analysis observed execution. Runtime requests execute the declared
+target and lifecycle; do not broaden the target or action beyond those fields.
+
+Within the user's requested investigation, call available analysis tools
+directly. REA does not require permission grants or per-call approval flags.
+The agent client can independently require approval. Follow the declared request
+scope and the host's actual access requirements; use the recovery guide for an
+observed client-policy rejection.
+
+## Plan broader investigations
+
+For requests that span multiple features or subsystems, use a staged workflow:
+
+1. Turn the request into a checklist of questions and the evidence each answer
+   needs. Resolve target identity and constraints from the conversation and
+   workspace before asking for information again.
+2. Inspect the current REA session, artifact identity, saved analysis database,
+   bookmarks, and prior evidence. Reuse matching state; do not open duplicate
+   sessions or repeat identical analysis.
+3. Start with the smallest useful overview or inventory. Follow each question
+   from its entry point through relevant data and state changes to its result.
+   Batch related operations around a specific hypothesis, then expand only when
+   the returned evidence leaves a concrete gap.
+4. Inspect relevant packaged resources and configuration alongside code when
+   they affect the question. Use format-aware inventory and parsers; do not
+   infer behavior from filenames, strings, or layout alone.
+5. Corroborate a conclusion with the evidence type it requires. Use runtime
+   observation only when static evidence cannot answer the question and the
+   required host runtime and OS access are available. For JavaScript behavior,
+   run probes against the actual app through the available browser, Electron,
+   or process capture workflow.
+6. Decompose work into independent questions. When parallel workers are
+   available and the questions do not depend on one another, assign distinct
+   scopes, point workers to existing evidence, and ask them to return sources,
+   conclusions, and unresolved gaps. Otherwise, work sequentially.
+7. Keep a concise finding ledger linking each conclusion to Evidence IDs,
+   confidence/evidence type, search boundary, and remaining unknowns. Update
+   the shared index or investigation report so later passes can reuse results.
+
+Before finishing, revisit the original checklist. Mark each question as
+answered, partially answered, or unresolved based on its evidence; keep
+bounded negative searches bounded, and do not describe a broad investigation
+as complete while required questions remain open.
+
+## Read only the relevant guide
+
+- Native binaries, managed assemblies, archives, and extraction:
+  [references/native-and-artifacts.md](references/native-and-artifacts.md)
+- ASARs, extracted JavaScript, feature tracing, and version comparison:
+  [references/javascript-applications.md](references/javascript-applications.md)
+- Android APK declarations, classes, methods, and static references:
+  [references/android-applications.md](references/android-applications.md)
+- Browser/Electron observation (passive and scenario) and static/runtime
+  reconciliation:
+  [references/runtime-observation.md](references/runtime-observation.md)
+- Evidence paging, comparisons, residual unknowns, and verification:
+  [references/evidence-workflows.md](references/evidence-workflows.md)
+
+## Finish the task
+
+Explain findings in plain language and tie them to returned evidence. When the
+user asks to build something, use normal coding tools and separate observed
+behavior from design choices. Close an opened native session with
+`close_binary` when the investigation is complete.
diff --git a/.claude/skills/reverse-engineer-anything/references/android-applications.md b/.claude/skills/reverse-engineer-anything/references/android-applications.md
new file mode 100644
index 0000000..912a42f
--- /dev/null
+++ b/.claude/skills/reverse-engineer-anything/references/android-applications.md
@@ -0,0 +1,36 @@
+# Android application artifacts
+
+Use the connected server's advertised Android tools. Repository main and npm
+4.1.0 include this family. A skill installation alone cannot add it to an
+older server.
+
+Start with `inspect_android_package` on the caller's APK path for package
+identity, manifest declarations, coverage, and inline Evidence. Use
+`search_android_classes` to find candidates, `inspect_android_class` for one
+class's members, `inspect_android_method` for decompilation, and
+`trace_android_references` for incoming static references. Each call takes its
+own APK path and explicit selectors; do not open a native session first.
+Choose an `overload_index` from the class inventory when methods are ambiguous
+instead of guessing.
+
+The provider requires a separately supplied headless JADX MCP JAR 0.7.1 and
+Java 17 or newer. `REA_JADX_MCP_JAR` selects the absolute JAR path; `JAVA_HOME`
+can select Java. REA setup does not install or configure that JAR, and doctor
+provider scopes cover Hopper/Ghidra rather than JADX. Use existing tools and
+report missing prerequisites for the Android task specifically.
+
+Linux and macOS use the POSIX owned-process boundary. Windows x64 requires the
+matching bundled native controls and uses an owned Job Object with bidirectional
+stdio. A full JDK, including `jdk.compiler`, is required on every host; Windows
+`JAVA_HOME` selects `bin\java.exe`. Consult the Android guide for actual host
+verification coverage. Calls use one worker and provider deadlines; optional
+`REA_JADX_HEAP_MIB` selects the JVM heap and `REA_JADX_OPERATION_TIMEOUT_MS`
+the per-operation deadline (default 120000 ms; the MCP client's tool timeout
+must also allow it). The APK is never launched,
+and no emulator is required.
+
+Manifest entries and decompiled text are static observations, not execution or
+policy enforcement. Incoming references are recovered static relationships;
+reflection, dynamic loading, and unresolved calls remain unknown. Preserve
+artifact digests, locations, diagnostics, and incomplete coverage. For archive
+members rather than code analysis, use `open_binary` and `inspect_artifact`.
diff --git a/.claude/skills/reverse-engineer-anything/references/connection-and-recovery.md b/.claude/skills/reverse-engineer-anything/references/connection-and-recovery.md
new file mode 100644
index 0000000..0feae3a
--- /dev/null
+++ b/.claude/skills/reverse-engineer-anything/references/connection-and-recovery.md
@@ -0,0 +1,127 @@
+# Connection and task recovery
+
+Read this guide only for an observed connection, command, approval or provider
+blocker. Keep the user's target and question in view. Explain what prevented the
+operation and the next useful step; after repair, continue the investigation.
+
+Commands below use an installed `rea`. If none is available, use the package
+invocation in `SKILL.md` when acquiring REA is authorized. Follow the connected
+server's schemas and the installed CLI's help rather than assuming repository
+main and an older release expose the same arguments.
+
+## Choose the remedy from the observed failure
+
+| Observation                                                     | Meaning and next step                                                                                                                                                                                                                                                                                                 |
+| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| No REA tools in the active session                              | Inspect registration with `rea doctor --client codex --json`. A skill installation alone does not register MCP.                                                                                                                                                                                                       |
+| Missing, malformed or stale registration                        | Prepare a scoped setup plan; apply only authorized changes with backups.                                                                                                                                                                                                                                              |
+| Aligned registration, but no connected tools                    | Restart/reconnect the client. Doctor checks registration; it cannot establish the current agent's connection. Inspect the client's launch error if reconnection fails.                                                                                                                                                |
+| `MCP tool call requires approval, but approval policy is never` | Codex rejected the call before REA executed it. Do not install an engine or repeat setup to solve this client-policy decision. See the approval section below.                                                                                                                                                        |
+| REA returns `provider_unavailable` or an unavailable tool entry | Read that operation's provider diagnostics or `binary_session.result.tool_availability`. Expand each group's tool names and inherit the shared client requirements unless overridden. Use the operation's availability, reason, and remediation; a complete tool catalog does not imply every operation is available. |
+| `rea` is missing in a child shell, or Node is incompatible      | Inspect the actual shell PATH and launcher/runtime. A prefix installation may be absent from a login shell's PATH; this does not establish a broken MCP registration.                                                                                                                                                 |
+
+If the client cannot launch its shell/sandbox helper or read the installed skill,
+inspect its launch diagnostic. For example, Codex can refuse helper aliases when
+CODEX_HOME is under `/tmp`; use an authorized profile outside the OS temporary
+directory. REA setup cannot repair the client's executor. Preserve the sandbox
+instead of silently disabling it to make an analysis command work.
+
+Static JavaScript and ordinary ZIP inventory need neither Hopper nor Ghidra.
+HAR inspection is offline and does not require a live browser. Native
+decompilation, Android analysis and firmware extraction have their own
+bring-your-own prerequisites. Use supported inventory/static evidence when it
+answers part of the question, and name the unavailable evidence separately.
+Do not substitute another target. Label observations from ordinary shell tools
+as such; only actual REA output supplies REA Evidence.
+
+## Repair registration when needed
+
+For Codex:
+
+```bash
+rea doctor --client codex --json
+rea setup --client codex --dry-run --json
+```
+
+Use the current supported client's ID: `claude_code`, `claude_desktop`, `codex`,
+`cursor`, `gemini_cli`, `windsurf`, `devin`, `opencode`, `antigravity`,
+`copilot_cli`, `commandcode`, `qwen_code`, `vscode`, `trae`, `grok_build`, `omp`, `pi`,
+`hermes`, `qoder`, `droid`, `zcode`, `dsh`, or `grok_bot`. If unknown, inspect `doctor --json` before choosing a
+scope. `grok_bot` uses a chat registration step rather than local `mcp.json`.
+For unsupported clients, use version-pinned manual stdio registration or CLI.
+
+Show the plan's exact paths, backups, changes and bundled-skill replacement.
+Obtain approval for writes when that concrete scope is not already authorized,
+then apply the same scope with `rea setup --client codex --yes`. Add
+`--install-hopper` only when separately needed and explicitly approved. Do not
+install or upgrade unrelated prerequisites. Restart/reconnect, verify tools
+actually appear, and resume the original task. If they remain absent, inspect
+the launch failure rather than looping through setup.
+
+## Codex tool approval is separate from REA readiness
+
+REA tools have no permission-grant handshake. Codex can still require approval
+because an operation creates owned resources, launches a helper or has cleanup
+effects. An advertised tool or successful doctor result does not override that
+client policy. `workspace-write` alone does not resolve an MCP approval
+rejection, and `approval_policy = "never"` does not mean every MCP tool is
+preapproved.
+
+When interactive approval is available, use the client's approval flow for the
+requested operation. In an unattended run, continue through an authorized CLI
+workflow if the execution environment permits it, or report the blocked
+operation and the approval needed to proceed. Do not retry the same rejected
+call, silently broaden approvals, or rewrite MCP effects as read-only.
+
+For an operator who explicitly wants to preapprove named operations in a
+disposable Codex profile, current Codex supports per-tool configuration. For
+example, opening and closing an analysis session can be scoped independently:
+
+```toml
+[mcp_servers.rea.tools.open_binary]
+approval_mode = "approve"
+
+[mcp_servers.rea.tools.close_binary]
+approval_mode = "approve"
+```
+
+Use the actual server ID and only the operations whose effects were approved;
+this example does not approve inspection, extraction or runtime execution.
+Show the proposed config edit and preserve unrelated entries and backups before
+writing. Managed policy can constrain client settings. Consult the
+[Codex configuration reference](https://learn.chatgpt.com/docs/config-file/config-reference)
+for the installed client's supported settings. This is an optional recovery
+choice, not a prerequisite for every REA task.
+
+## Continue through an installed CLI
+
+Check the command environment only if the launcher fails:
+
+```bash
+command -v rea
+command -v node
+node --version
+rea --version
+```
+
+Use the public launcher at its known installation path with a supported existing
+Node on PATH when the child shell loses a prefix installation. Avoid internal
+`dist/cli.js` entrypoints or global toolchain changes. MCP may have its own valid
+launcher even when a shell cannot resolve `rea`.
+
+For a user-supplied JavaScript tree or ASAR, select output files in the authorized
+workspace and save complete Evidence before reading a view:
+
+```bash
+rea analyze-javascript-application /absolute/path/to/app --json > app-evidence.json
+jq -c '{source: {kind: "inline", evidence: .}, view: {kind: "summary"}}' app-evidence.json > app-view.json
+rea inspect-analysis-view app-view.json
+```
+
+These commands do not register MCP or install an analysis engine. CLI JavaScript
+JSON is complete and can be very large; redirect it rather than loading it into
+context. Use an existing JSON processor if `jq` is absent, without installing
+one just for this recipe. Inspect a module page or item using the same inline
+source and the [JavaScript recipes](javascript-applications.md). Preserve graph
+coverage, limitations and unknowns. Native CLI analysis still requires its
+selected engine, and all CLI operations retain the host's execution permissions.
diff --git a/.claude/skills/reverse-engineer-anything/references/evidence-workflows.md b/.claude/skills/reverse-engineer-anything/references/evidence-workflows.md
new file mode 100644
index 0000000..539bfb6
--- /dev/null
+++ b/.claude/skills/reverse-engineer-anything/references/evidence-workflows.md
@@ -0,0 +1,71 @@
+# Evidence, comparison, and verification workflows
+
+Evidence-producing tools return the complete Evidence record directly in MCP
+`structuredContent` and CLI JSON. Read `normalized_result` for operation data,
+and cite `evidence_id` when another tool or your explanation needs a stable
+reference. Preserve authority, limitations, coverage, and residual unknowns. If a result
+is incomplete or paginated, continue only when the remaining data matters to
+the task; do not fetch a bundle or resource merely to read a result already
+returned inline. When complete `inspect_binary_layout` or
+`analyze_javascript_application` Evidence is already retained, call
+`inspect_analysis_view` for a summary, one section/symbol/module, or a stable
+page instead of repeating the producer.
+
+Completed `inspect_artifact` inventory also supports a summary and
+`view: {kind: "inventory", collection: "occurrences", logical_paths: ["package.json", "main.js"]}`.
+Omit `logical_paths` to page all available occurrences; `[]` selects none.
+Other inventory collections are `nodes`, `edges` and
+`integrity_contradictions`. Keep `source_complete` separate from page exhaustion:
+a missing match in partial source Evidence does not establish absence. Use the
+returned parent Evidence ID for subsequent views and export before closing the
+session when the source must survive it.
+When `tools/list` advertises `inspect_artifact.detail`, request `"summary"` to
+retain its complete source and receive that view immediately. Without that
+advertised choice, keep the existing complete call. CLI inspection returns
+portable complete Evidence; save it before projecting a selected inline view.
+
+Use `record_unknown` to track unresolved questions in the user's investigation
+and name the authority or environment still required. Supply supporting and
+contradicting evidence IDs. It updates the session registry directly.
+Use `update_unknown` with the current revision; reread after a stale revision
+instead of retrying blindly. Only qualifying observed evidence can verify a
+resolution.
+
+Use comparisons with complete, compatible page sets when claiming equivalence
+or absence:
+
+- `compare_artifacts` compares inventory pages by occurrence path, content,
+  metadata, and graph relations.
+- `compare_functions` compares explicit function Evidence, not fuzzy
+  whole-binary matches.
+- `compare_bundles` compares canonical bundle membership and unknown history.
+- `find_changed_behavior` combines existing comparisons; static differences
+  remain candidates, not causal proof.
+- `build_call_path` needs explicit function dossiers from one artifact/provider;
+  an incomplete frontier makes absence unknown.
+- `correlate_static_and_runtime` uses explicit mappings; matching patterns are
+  hypotheses, not causality.
+- `verify_reconstruction` evaluates a finite typed specification. A pass covers
+  only declared comparable claims, not global equivalence.
+
+Process captures are opt-in behavioral evidence, not a security sandbox. V3
+captures cannot be upgraded to V4; rerun the original scenario. Distinguish root
+exit from descendant settlement and require freshness when the task needs it.
+A timed-out target that must write a final report needs `finalization_ms`: REA
+sends SIGTERM to the captured root, keeps observing, and sends SIGKILL once
+only if the target has not exited by the end of the interval.
+`exit.finalization.signals` lists each attempt with its delivery result; the
+observed exit signal stays in `exit.signal`, `exit.code` is null for every
+deadline exit, and the code of a finalizer that exited on its own is in
+`exit.finalization.exit_code` (null on a signal exit or when no exit was
+observed).
+
+Use `inspect_analysis_view` with `view: {kind: "api-surface"}` on retained
+`inspect_web_network_capture` HAR Evidence to group observed request lines by
+method, origin and path template. Format matches are inferences, not handler
+identity or schemas. Group pages cite parent record ordinals; consult record
+coverage and exclusions before claiming completeness. No requests are replayed.
+When the connected schema advertises `include_query_parameter_names`, select
+it in the view for distinct observed names with original record ordinals. Query
+values are omitted; the names establish neither required parameters nor a
+complete server schema. Keep the original parent Evidence for exact URLs.
diff --git a/.claude/skills/reverse-engineer-anything/references/javascript-applications.md b/.claude/skills/reverse-engineer-anything/references/javascript-applications.md
new file mode 100644
index 0000000..d1f82e1
--- /dev/null
+++ b/.claude/skills/reverse-engineer-anything/references/javascript-applications.md
@@ -0,0 +1,218 @@
+# JavaScript and Electron application artifacts
+
+For captured or bundled JavaScript that needs readable source recovery, use
+`recover_javascript_sources` with an absolute `path` and absent
+`output_directory`. Supply related runtime/shared/lazy files in
+`additional_paths` when advertised, then analyze the returned `analysis_input`
+directory together. Each input retains its own snapshot, digest and byte-range
+provenance; inputs and recovered code are never executed. Recovery requires a
+caller-supplied Wakaru on Linux x64; see [the recovery guide](https://github.com/morluto/rea/blob/main/docs/javascript-recovery.md).
+
+Use `analyze_javascript_application` directly on the operator-supplied ASAR or
+extracted tree. When the question concerns known source paths and the connected
+schema advertises `source_paths`, select exact inventoried paths such as
+`["package.json", "main.js", "preload.js"]`. Include supporting manifests or
+source maps explicitly; dependencies are not implicitly analyzed. REA retains
+the complete artifact inventory and identity but reads source text and analyzes
+only selected files. The result and summary record `source_selection`; files
+outside scope and their relationships remain unknown, so partial application
+coverage does not mean the selected source failed. Use repeated `--source-path`
+on either static application CLI route. Omit the selection when the question
+requires complete application analysis. `detail: "summary"` reduces delivery
+and does not by itself reduce analysis work.
+
+Exact `#alias` specifiers resolve through the importer's
+enclosing package `imports` map to package-local files; nested `node_modules`
+packages use their own map. Wildcard, recursive, and external-package import
+targets stay unresolved with that limitation. When size is unknown or large and the connected schema advertises
+`detail`, request `detail: "summary"`. This returns an `inspect_analysis_view`
+Evidence record with a distinct ID and a `normalized_result.parent_evidence_id`
+for the complete retained application analysis. Source-map contents are part of
+that static analysis. Read findings, coverage, limitations and unknowns, then
+follow a specific unanswered question. Older servers without `detail` return
+the complete application Evidence inline when it fits.
+
+When the connected schema advertises `max_heap_mb` and `analysis_timeout_ms`,
+these select the isolated source analyzer's old-space heap and per-source
+deadline. Defaults are 1024 MiB and 300000 ms. They do not change the MCP
+process heap. A Bun-hosted REA does not enforce the heap choice; on Windows it
+instead limits the analyzer's committed memory to that choice plus a 512 MiB
+runtime reserve.
+Resource-limited analyses preserve completed static facts and
+report partial semantic coverage with specific unknown scopes; this does not
+mean the source is malformed. Inspect those limits before retrying a source.
+When expanded relationships exceed the parent's available memory, inspect the
+file's modules item view for retained `static_analysis` and
+`semantic_module_analysis`. Their facts remain available even when graph links
+are unknown. Cumulative result exhaustion can stop analysis before every file
+is examined; the inventory and remaining unknown scopes distinguish that case.
+Timeout or cancellation after source analysis begins retains partial Evidence
+in the same session. A returned `error.details.partial_observation` reference
+can be supplied directly to `inspect_analysis_view`. If the SDK cancels locally, retrieve its recorded ID from
+the Evidence bundle before inspecting the partial analysis.
+
+## Read a module without repeating analysis
+
+Use the actual returned parent ID, on the same connection, as `source.evidence_id`.
+The following IDs are placeholders to replace with returned values. When the
+module's node ID is not already known, page identities before selecting an item.
+Pages return only node IDs, paths and roles; choose a useful page size and follow
+`coverage.next_offset` when another page matters:
+
+```json
+{
+  "source": {
+    "kind": "retained-evidence",
+    "evidence_id": "ev_ACTUAL_PARENT_ID"
+  },
+  "view": { "kind": "page", "collection": "modules", "offset": 0, "limit": 16 }
+}
+```
+
+Select the relevant page entry by its exact `node_id` and recorded role:
+
+```json
+{
+  "source": {
+    "kind": "retained-evidence",
+    "evidence_id": "ev_ACTUAL_PARENT_ID"
+  },
+  "view": {
+    "kind": "item",
+    "collection": "modules",
+    "selector": { "node_id": "jag_node_ACTUAL_NODE_ID" }
+  }
+}
+```
+
+Module pages include asset, bundled and source module roles, so one path can
+identify several entries. Use `selector.path` only when uniqueness is established;
+the returned node ID avoids needing a complete inventory to prove uniqueness. On ambiguity,
+select the matching node ID from the page or the error's candidates. Follow
+`next_offset` when another page matters. An item exposes that module node's
+recorded observations, identity, hashes, exports and source ranges; it does not
+include every child syntax observation, related edge or original source file.
+An absent item fact is not evidence of absence from the whole application.
+
+For canonical identities and retained source-range counts, use a typed reference
+page instead of reading every full item:
+
+```json
+{
+  "source": {
+    "kind": "retained-evidence",
+    "evidence_id": "ev_ACTUAL_PARENT_ID"
+  },
+  "view": {
+    "kind": "javascript",
+    "collection": "modules",
+    "projection": "references",
+    "where": { "path": "main.js", "kind": "javascript-module" },
+    "offset": 0,
+    "limit": 16
+  }
+}
+```
+
+Filters match exact retained strings; omit a filter to include all values, use
+`path: null` for unavailable paths, and `path: ""` for a recorded empty path.
+Rows preserve canonical `identity` and distinct observation support states in
+`basis`. `retained_source_range_count` counts retained source-range observations,
+not runtime imports or unique reference sites. Use a row's `node_id` with the item
+view above for exact locations and full supporting observations. Follow
+`coverage.next_offset`; page exhaustion describes matching retained rows only.
+Check `source_coverage` for source selection, partial/unknown graph coverage and
+unknown counts before drawing a negative conclusion.
+
+## Trace only the remaining question
+
+Use `trace_application_feature` on the parent application Evidence for one
+literal node ID, route, string, API, IPC channel, module, or native export.
+Select `incoming` for relationships leading to the seed, `outgoing` for those
+leaving it, and `both` when the question needs both. Trace traversal includes
+containment relationships, so even a narrow seed can expand many nodes; a
+bidirectional trace can reach unrelated sibling modules. A module item or page
+is preferable when its observations already answer the question. Do not treat
+all reached nodes as participants in the feature.
+
+Reuse retained parent Evidence when the server advertises it, or supply complete
+Evidence inline. Include Hopper or Ghidra Evidence only when its artifact digest
+matches exactly.
+
+## Recover an oversized display
+
+An oversized response reports `resource_constraint` and
+`details.resource: "transport"`. Reuse
+`details.reported_limits.evidence_reference` with `inspect_analysis_view` for a
+summary, one module, or a stable page of module identities.
+`export_evidence_bundle` writes the complete canonical session to a
+caller-selected file. These workflows keep the original Evidence and coverage;
+a broad follow-up can also exceed framing.
+
+A client can truncate a successful result inside its text envelope without a
+REA `resource_constraint`. Treat a truncation notice or incomplete JSON as a
+display limitation; do not claim the full record was examined. Reuse the known
+parent ID for smaller views, or export complete Evidence to a selected file
+while the session remains open. If the parent ID was lost from the preview,
+use the prior analysis summary or explicit ledger entries to recover it; do
+not invent an ID or rerun analysis just to reproduce the same display.
+
+BrowserWindow preferences, preload and contextBridge surfaces, IPC
+registrations, utility processes, and native binding requests are static syntax
+observations. Only a unique exact literal IPC channel match supports an inferred
+pairing. Dynamic or ambiguous channels remain unresolved. A requested `.node`
+member is not a verified native export. Never claim runtime reachability,
+registration, defaults, or policy enforcement from static analysis.
+
+For version comparison, analyze each version once, then call
+`compare_application_versions`. Accept only its digest, source-map, structural
+fingerprint, or non-module semantic matches. Module ordinals and minified names
+are not persistent identity. Report added or removed only with complete
+opposite-side coverage; otherwise report unknown.
+
+When the question asks how one exact exported callable's returned object shape
+changed, analyze each version once and then call
+`compare_javascript_export_shapes` with explicit module paths and export names.
+Use the returned IDs on the same connection, or complete inline Evidence
+records, from both analysis calls. Accept variant
+pairing only through the tool's unique exact literal discriminant. Read
+`property_inventories` and each change's `presence` before treating `unknown` as
+"the name was not observed": inventories list observed property names even when
+values stay unknown, with a `source_range` for each paired or unpaired variant.
+Array holes and mutation-invalidated slots are not observed properties.
+Complete parent coverage reports presence-only
+`added`/`removed` independently of unresolved values. Cite the
+comparison Evidence and report JSON Pointer changes; dynamic values, ambiguous
+variants, and incomplete parent-property coverage stay unknown. This is static
+inference, not runtime behavior. When runtime semantics are needed, run
+behavioral probes against the relevant application versions and capture them
+through the available browser, Electron, or process workflows.
+
+## Reusing application Evidence
+
+When advertised by the connected server, application trace and compare tools
+accept complete inline Evidence or
+`{"kind":"retained-evidence","evidence_id":"ev_<64 lowercase hex characters>"}`
+for their application input (`application`, or `left`/`right`). `inspect_analysis_view`
+uses the same retained-reference form in `source`, or portable inline Evidence,
+to project a summary, module page, or one module with its recorded observations.
+This notation is
+a template: replace it with the actual returned ID. Versions before 4.1.0 accept only full
+inline Evidence. Use the exact ID
+returned by the producer on the same MCP connection. Resolution does not run
+analysis or select a provider; findings remain inline. Native observation
+arrays still take full Evidence. `close_binary` clears retained references;
+export a bundle before closing, or supply portable inline Evidence in another
+connection. A missing reference includes its ID and recovery guidance.
+
+For exact file/native metadata or processing gaps, use
+`view: {kind: "javascript-facts", where: {paths: ["package.json"]}, property_keys: ["name", "operation", "analysis_status"], limit: 32}`.
+Rows retain canonical node/observation identity and original Evidence. Paths
+match Evidence artifact-path/source-range locations; missing properties remain
+omitted and source coverage stays separate from page exhaustion. Batch paths and
+select only needed property keys; complete Evidence remains accessible by export.
+If names are unknown, opt into `include_available_property_keys: true`; it lists
+the original keys per returned observation without unselected values. Keep each
+row's node/observation identity paired when composing facts.
+These rows select application-graph observations; semantic relationships and
+semantic unknown records remain in the complete parent Evidence and trace tools.
diff --git a/.claude/skills/reverse-engineer-anything/references/native-and-artifacts.md b/.claude/skills/reverse-engineer-anything/references/native-and-artifacts.md
new file mode 100644
index 0000000..d3926ec
--- /dev/null
+++ b/.claude/skills/reverse-engineer-anything/references/native-and-artifacts.md
@@ -0,0 +1,297 @@
+# Native, managed, and packaged artifacts
+
+## Go build metadata
+
+Use `inspect_go_binary` for an explicit local ELF, PE or thin Mach-O when the
+question concerns the embedded compiler version, module/dependency versions,
+local replacements or build settings. No `open_binary`, Go installation or
+target execution is required. The CLI equivalent is `inspect-go-binary PATH`.
+Preserve artifact SHA-256, original file ranges, framed module bytes and every
+unparsed module-text line. A missing record is an unknown, not proof of a
+non-Go binary; observed metadata does not authenticate its claims. Function,
+source and type recovery remain a separate native-analysis question.
+
+## Rust dependency metadata
+
+Use `inspect_rust_binary` for an explicit local ELF, PE, or thin Mach-O when
+the question concerns the cargo-auditable crate list embedded in `.dep-v0`
+(Mach-O: `__DATA,.dep-v0`). No `open_binary`, Rust installation, or target
+execution is required. The CLI equivalent is `inspect-rust-binary PATH`.
+Preserve artifact SHA-256, package order, dependency indices, and the section
+file range. A missing section is null metadata, not proof the binary has no
+dependencies. An omitted package kind stays null. A rustc commit hash is
+inferred from a read-only `/rustc/<40-hex>/` path and does not by itself
+identify the compiler. See [Rust binaries](https://github.com/morluto/rea/blob/main/docs/rust-binaries.md).
+
+## SQLite snapshots
+
+Use `inspect_sqlite_database` with an explicit local database snapshot for its
+schema and optional rows from one exact ordinary table. It requires Node.js
+24.x >=24.15 or 26+ with the native `DatabaseSync.limits` API. It also consumes the
+existing sibling `-wal`; retain both original digests when citing its result.
+Default output is a compact inventory; a selected table expands only its own
+schema and samples 20 rows. Select `columns` to avoid irrelevant or large cells,
+and request `schema_scope: "database"` only for complete schema details.
+Choose `row_limit` when a finite sample is useful and keep truncation and
+unspecified row order explicit. Virtual tables, shadow tables and views are
+schema facts, not row-read targets. REA inspects private copies and leaves
+the source files untouched; obtain a coherent quiescent database/WAL snapshot
+before inspection. See [SQLite snapshots](https://github.com/morluto/rea/blob/main/docs/sqlite-databases.md).
+
+## Recorded Linux crashes
+
+Use `inspect_recorded_crash` with an explicit Linux x86-64 ELF core path to
+inspect historical thread registers, signals, raw notes and original file
+ranges. It is independent of the active disassembler target. Source-bound
+register values and note bytes are observations; missing notes, signal-thread
+association and current executable/library identity remain unknown. PIDs are
+historical metadata and never authorize live attach or control.
+
+The optional `include_debugger_context` facet adds mapping candidates through
+caller-supplied GDB/pwndbg in an owned core-only session. Display names do not
+establish current file identity; zero reported flags leave permissions unknown.
+Requested unavailable context fails with setup guidance. See
+[recorded crashes](https://github.com/morluto/rea/blob/main/docs/recorded-crashes.md)
+for exact upstream profiles, bounds and verification coverage.
+
+## Offline ELF layout
+
+Use `inspect_binary_layout` with an explicit local ELF path for file-backed
+sections, symbols, relocations, linkage names, and static mitigation inferences
+without opening a disassembler target. When that complete record is already
+retained, call `inspect_analysis_view` for a summary, mitigations or linkage
+facet, one section or symbol, or a stable page. Do not re-run the decoder to
+read a single object.
+
+## Offline WASM
+
+Use `inspect_wasm_artifact` with caller-supplied WABT for selected local bytes.
+For counts, validation and WAT identity, select `detail: "summary"` on the first
+MCP call. The complete original Evidence stays retained; use
+`normalized_result.parent_evidence_id` for exact exports or text pages. Omitted
+or complete detail keeps the existing complete result.
+For a completed result, use `inspect_analysis_view` with its reported retained
+reference for a summary or `view: {kind: "wasm", facet: "exports", offset: 0, limit: 32}`.
+Facets also include sections, imports, candidates, glue, WAT, headers, details
+and tool profile. Text offsets count UTF-16 code units; follow `next_offset`.
+The complete source remains retained after an oversized MCP reply. No target
+execution or network acquisition is implied, and WAT is decoded representation.
+
+## Native targets
+
+After `open_binary`, use focused search, procedure, or function tools directly.
+Use `binary_overview` when target metadata or inventory context helps answer the
+question. Prefer literal search, names, decompilation, callers, callees, and
+cross-references. Addresses and recovered pseudocode are analysis observations,
+not original source. Provider unavailability and unsupported metadata remain
+unknown rather than false.
+
+For a completed `analyze_function` dossier, use `inspect_analysis_view` with
+`view: {kind: "native", facet: "value_flow_operations", offset: 0, limit: 32}`
+and the exact retained Evidence ID to read selected facts without reanalysis.
+Native facets also include procedure, pseudocode, assembly, basic blocks,
+comments, callers/callees, references, unresolved calls, referenced strings and
+names, the native API record, and value-flow summaries. Pseudocode offsets and limits count UTF-16
+code units; use the returned `next_offset` for continuation. Provider limitations
+and unavailable facts remain explicit; the complete parent Evidence is retained.
+
+`inspect_macho` on a large framework returns megabytes of imports and exports.
+Select `detail: "summary"` for slice identity, UUID and per-collection counts,
+then page rows with `view: {kind: "macho", facet: "exports", offset: 0, limit: 64}`
+and `normalized_result.parent_evidence_id`. Facets are entrypoints,
+architectures, build_metadata, load_commands, dependencies, imports, exports,
+segments and provenance. `source_exhaustive: false` means unreturned symbols
+may exist.
+
+To see which functions or Objective-C methods a Mach-O actually calls in one
+run, use `observe_native_calls` with explicit breakpoints and a bounded
+`duration_ms`/`max_events`. It launches a new process under LLDB, so the target
+runs and may change files or use the network. Hardened-runtime targets need the
+`get-task-allow` entitlement.
+
+Use `binary_session` with no arguments to check the open target, selected
+provider, and alignment. Its default `result.tool_availability` carries a
+complete inventory grouped by shared facts. Expand each group's `names` and
+inherit the inventory-level client requirements unless a group overrides them;
+availability, reasons, remediation, modes, and flags remain inline. The
+`effects` and `annotations` arrays name true flags from fixed vocabularies, so an
+omitted known flag is false. `tools/list` remains the canonical source for full
+tool schemas when target or provider state changes.
+
+Provider capability groups carry provider identity and ordered limitations.
+Prepend each set's `shared_limitations` to a group's `limitations` to recover the
+operation's full ordered list. Candidate capabilities describe possible
+providers. Top-level session capabilities describe the current route, and
+`analysis_provider_binding` identifies the selected provider.
+
+## Static memory and original file bytes
+
+For Ghidra, `read_bytes` reads initialized analysis memory, including loader
+fixups; it does not read a running process. Check `returned_bytes` and `complete`
+before decoding a table. An incomplete read is missing coverage, not a zero-filled
+tail. Use `list_segments` to inspect the selected block's initialization and address-space
+facts, and retain unavailable facts as unknown.
+
+Use `address_to_file_offset` to anchor one observed address to original file
+bytes. A mapping for the first address does not establish a contiguous mapping
+for an entire table, and loader fixups can make analysis bytes differ from source
+bytes. Keep source ranges and analysis-memory observations separate.
+
+A pointer table can refer to writable slots populated by a constructor rather
+than directly to immutable resources. An uninitialized block or an observed zero
+does not establish the slot's later runtime value. Follow `xrefs` and the relevant
+writer's assembly or pseudocode; distinguish recorded assignments from inferred
+execution order. Do not replace unreadable bytes with zeros or conclude that a
+resource is absent without the necessary initialization evidence.
+
+## DOS MZ with Ghidra
+
+For an admitted DOS MZ target, use `inspect_native_load_image` to check measured
+loaded bytes, file mappings, relocations and the entry against the immutable
+snapshot. Keep `mismatch` and `unsupported` explicit. Verified import covers the
+reported static image, not runtime DOS or PC-98 hardware behavior.
+
+For Ghidra decompilation, `procedure_pseudo_code` also accepts `procedure: "file-offset:0x..."`; CLI `rea decompile <path> --file-offset=0x... --provider ghidra` resolves the source byte offset internally. An unresolved 0x-prefixed numeric procedure selector also falls back to a unique file mapping. Existing symbols and analysis addresses win; multiple mappings fail as ambiguous. Preserve the returned file-offset and address locations and raw selection observations. ELF virtual addresses are distinct from file offsets; never assume an arbitrary offset plus image base is an analysis address.
+
+Complete function body ranges use inclusive ends and can contain gaps. Do not
+treat the enclosing span as code.
+For packed targets, retain the original and separately derived artifact identities;
+decompiling an unpacking stub does not recover the unpacked program.
+
+When reading Objective-C dispatch metadata, distinguish class implementation
+methods from protocol requirements: class methods report null requirement
+flags, while decoded protocol declarations retain required and optional facts.
+Property attributes remain raw name/value tokens; use the property's
+`atomicity` field for the decoded `N` marker or the default atomic behavior.
+Null class/meta flags, ivar counts, atomicity, or read-only values mean the
+selected provider did not establish that fact. Symbol names alone do not prove
+that a class is a root class or has no ivars.
+
+## Managed PE/CLI
+
+Start with `inspect_managed_artifact`. REA's canonical managed inspection is
+execution-free: do not claim it loaded, reflected, executed, or resolved the
+assembly. Keep managed/native boundaries and unavailable reconstruction facts
+explicit. A bring-your-own reconstruction oracle is separate from the canonical
+parser and must not become an implicit setup dependency.
+
+For identity/classification questions, `inspect_managed_artifact` can explicitly
+select `detail: "summary"` on the first MCP call. It retains complete metadata
+and returns a linked overview with full classification/evidence, nullable
+module/MVID, frameworks, metadata coverage/issues/limitations and returned-row
+counts. Default complete requests remain unchanged. Read original rows with
+`inspect_analysis_view`, source `normalized_result.parent_evidence_id`, and
+`view: {kind: "managed", collection: "attributes", offset: 0, limit: 16}`.
+Collections are `references`, `resources` and `attributes`. Paging does not
+repeat parsing. Returned-row exhaustion
+does not prove complete metadata or absence under partial/unavailable coverage;
+preserve build-local tokens and their artifact/MVID scope.
+
+`inspect_managed_members` always returns the assembly-wide `member_refs`, even
+for one selected type. For questions about a selected type, select
+`detail: "summary"` with `type_names`; it returns the selection (with unmatched
+names), coverage and per-collection counts. Page rows with
+`view: {kind: "managed-members", collection: "call_edges", offset: 0, limit: 64}`
+over `types`, `exported_types`, `fields`, `methods`, `member_refs`, `call_edges`,
+`field_accesses` or `user_strings`.
+
+### .NET NativeAOT
+
+NativeAOT binaries contain native machine code, so ordinary CIL decompilers
+cannot recover the original method bodies. When managed metadata/CIL is absent,
+classify that as a native-analysis route rather than claiming source recovery.
+Open the native image with the selected deep provider and inspect functions,
+strings, calls, and references; describe decompiler output as pseudocode and
+inference.
+
+NativeAOT images can be PE/COFF, ELF, or Mach-O executables and shared
+libraries. Use file bytes and loader metadata rather than suffixes to identify
+them. For packaged apps, inventory/extract with REA's artifact tools and retain
+the exact contained image identity. PDB, ELF debug, or dSYM sidecars are
+additional evidence only when the provider accepts and matches them.
+
+REA has a built-in read-only snapshot parser for x64 PE targets with .NET 8 RTR
+9.1 metadata. An optional headless Ghidra adapter adds database annotations and
+broader metadata recovery on Linux; it requires an explicitly configured
+NativeAOT JAR. These are separate routes. The built-in parser also runs on
+Windows Ghidra P0; read frozen literals from its report, because
+`search_strings` does not include them. See the
+[NativeAOT guide](https://github.com/morluto/rea/blob/main/docs/ghidra-nativeaot.md)
+for setup, supported layouts, and host restrictions. Preserve binary identity
+and distinguish derived metadata from Ghidra database observations. Recovered
+types and native pseudocode are not original C# source. Windows Ghidra P0 has
+no database mutation authority.
+
+## Packages and extraction
+
+Use `inspect_artifact` for application bundles, archives, ZIP/APK/IPA/MSIX/AppX,
+ASAR, or DMG inputs when the artifact graph and findings help answer the
+question. It returns the complete artifact graph inline. Cite graph manifest
+IDs when using them.
+
+For an IPA or a macOS `.app`, ZIP, or DMG, pass the inventory Evidence to
+`project_apple_application_graph`. It reports application roots and nested
+bundles by path convention: app extensions, XPC services, frameworks, login
+items, system and driver extensions, and plug-ins. It also lists privileged
+helpers, launchd plists, symlinks, and each bundle's `info_plist_path` and
+executable candidates. Roles are path conventions, not parsed plists; read the
+listed plists with `inspect_plist`.
+
+After `open_binary` on a `.app` or Mach-O, use `trace_dylib_resolution` to see
+which file each `@rpath`, `@loader_path` and `@executable_path` load reaches for
+every executable in the bundle. It also lists missing or weak loads and earlier
+`@rpath` candidates that are absent. Narrow large bundles with `roots` or
+`architecture`. System paths stay undetermined because the dyld shared cache
+provides them.
+
+Use `extract_artifact` when materialized files are needed. It extracts the active
+target and accepts optional `integrity_policy`; see the [MCP contracts](https://github.com/morluto/rea/blob/main/docs/mcp-contracts.md).
+It materializes all regular files into a fresh temporary directory chosen by
+REA. Symlinks and encrypted entries are inventory facts, not extractable files.
+The result reports the materialized directory; callers do not choose the
+destination. No separate permission grant is needed.
+
+Native DMG traversal automatically uses a read-only mount on supported macOS
+hosts, with an owned temporary mount directory and cleanup. It needs no approval
+flag. Unsupported hosts or mount failures remain explicit limitations; do not
+claim child inventory when only root identity is available. Extraction is a
+separate filesystem-writing operation.
+
+For headerless DOS COM, explicitly open with `format: "dos-com"` (CLI
+`--target-format dos-com`). Inspect the load image before trusting function
+analysis: the entry is `0x10100`, file offset zero, with imposed real-mode segment
+context. PSP/stack/device state remains unmodeled. See [DOS guide](https://github.com/morluto/rea/blob/main/docs/ghidra-dos.md).
+
+For other headerless images (embedded firmware without ELF/Mach-O/PE/MZ
+headers), open with `format: "raw-binary"`, `architecture` (`x86`, `x86_64`,
+`arm`, `arm64`, `6502`, or `m68k`), and `entry_point` (`0x` hex). File offset 0 is mapped at
+that address. Hopper and IDA refuse this interpretation; Ghidra uses
+`BinaryLoader` with a generic language: big-endian for `m68k`, little-endian
+otherwise. Big-endian ARM, Thumb-only, and Cortex-M variants are unsupported.
+`6502` selects NMOS 6502; the entry and complete file mapping must fit within
+`0x0000..0xffff`. 65C02, 65816, cartridge containers, bank switching, and mapper
+semantics are unsupported. `m68k` requires an even entry and decodes the 68040
+superset of the 68000 family; Amiga/Atari containers and vector-table entry
+discovery are unsupported. Windows Ghidra P0 admits raw images only for `6502`. See [raw binary guide](https://github.com/morluto/rea/blob/main/docs/raw-binary.md).
+
+### Function annotations in Ghidra
+
+Use `annotate_native_function` for one function name and/or entry comments, with at least one explicit change. Review its annotation readback and refreshed dossier inline. Changes are atomic and session-scoped; empty comments clear them, omitted fields preserve them. Later MCP calls observe edits until close. CLI `annotate-native-function` returns the updated analysis before discarding the session. Original executable bytes are unchanged; edits invalidate immutable snapshots. Windows P0 does not admit database mutations. For naming only, `set_address_name` / `set_addresses_names` also work with Ghidra: they name function entries or data addresses (primary labels) and return compact per-address success booleans instead of a dossier.
+
+## Offline PE resource inventory
+
+Use `inspect_pe_resources` with an absolute `path`, or
+`rea inspect-pe-resources ./selected.exe --json`, for portable PE32/PE32+
+resource inspection without opening a native target. Preserve returned Evidence:
+type/name/language IDs and UTF-16 names, original directory/data/payload ranges,
+code pages, payload hashes and static icon-group references. Same-language icon
+resolution is explicit; missing references and size mismatch remain visible.
+Other payloads are opaque, and this operation does not decode images or simulate
+Windows resource loading. Consult the budgets and supported tree profile in
+[offline binary diagnostics](https://github.com/morluto/rea/blob/main/docs/binary-diagnostics.md).
+
+For exact core-module import/export differences, use `compare_wasm_interfaces`
+with two complete inspection Evidence records (or current-session retained
+references) and explicit scope. Preserve unknown types/duplicate names; static
+interface equality is not runtime compatibility. CLI accepts complete inline
+Evidence in `rea compare-wasm-interfaces input.json --json`.
diff --git a/.claude/skills/reverse-engineer-anything/references/runtime-observation.md b/.claude/skills/reverse-engineer-anything/references/runtime-observation.md
new file mode 100644
index 0000000..df75bca
--- /dev/null
+++ b/.claude/skills/reverse-engineer-anything/references/runtime-observation.md
@@ -0,0 +1,78 @@
+# Browser and Electron runtime observation
+
+Supply the existing browser or Electron instance's literal-port loopback CDP
+endpoint in the request. No separate permission configuration or per-call
+approval flag is needed. Browser discovery lists eligible HTTP(S) pages;
+`allowed_origins` optionally filters them. An individual capture defaults to the
+selected page's current origin. Electron discovery lists eligible local
+`file://` targets without a configured file-root allowlist.
+
+Start passive browser work with `list_browser_targets`; start Electron runtime work with
+`list_electron_targets`. Before an electron-main Inspector attempt, check
+packaged fuses with `inspect_electron_fuses`. Inspect the target selected for
+the user's task. Observation with these tools is passive: never claim REA
+clicked, navigated, evaluated page JavaScript, invoked IPC, or captured prior
+activity. REA does not contain the page's network.
+
+Passive captures omit raw header collections, credential header values, storage
+values, and raw WebSocket/JSON bodies. Selected response metadata, including
+content encoding, policy values, and Link URLs, is retained. Local URLs retain ordinary query
+values and fragments; userinfo credentials are removed. Browser accessibility
+text, console primitives, value-free shapes, script sources, source maps, and
+storage key names have request-specific capture options. Electron script
+sources are also optional. Use `capture_web_screenshot` when pixels are needed.
+Treat scope filtering, truncation, and attach-window coverage as limitations.
+Page-declared WebMCP tools are untrusted inventory and are never invoked by REA.
+
+## Who performs the action
+
+- The user performs it: `list_browser_targets`, then `inspect_web_page` or
+  `observe_web_session` on the selected target.
+- The agent must perform it: one `capture_browser_scenario` with declared
+  actions. Use connect mode with the loopback CDP endpoint and `target_id` for
+  an existing browser, or launch mode with a caller-selected executable for a
+  temporary profile. Connect mode first navigates the selected page to
+  `start_url`, which can clear unsaved form values and other temporary state.
+  Recreate the state needed for the investigation in the declared actions.
+  Connect mode leaves the external browser open; launch mode owns a temporary
+  browser and profile. Check `browser.cleanup` for the outcome.
+  Request only the DOM, accessibility, or network details needed for the question.
+  The default final capture contains the URL; step outcomes are reported separately.
+  Add a wait action for the expected page state before capturing it. Report that
+  REA performed the declared actions.
+
+Scenario network records have no request initiator stacks. For that evidence,
+use passive capture while the user performs the action. Listener source locations
+identify candidate handlers; they do not establish which script sent a particular
+request. Avoid overlapping passive capture and scenario actions on the same target.
+
+Focused follow-up tools:
+
+- `observe_web_execution`: execution coverage during a window; it resets
+  counters and temporarily disables optimization.
+- `inspect_web_event_listeners`: source locations for listeners registered
+  directly on the first CSS match, without dispatching an event.
+- `compare_web_captures`: two normalized passive captures or recorded scenarios.
+- `discover_webmcp_tools`: inspect page-declared WebMCP inventory; never invoke
+  the discovered tools.
+
+Use `reconcile_javascript_runtime` only after static application Evidence and
+passive browser/Electron Evidence exist. Prefer captured-source digest identity;
+report path/digest disagreement as a mismatch and preserve ambiguity. Explicit
+path mappings are inference inputs and never broaden filesystem or CDP authority.
+A bundle observed at runtime does not prove every contained module executed.
+
+## Fiddler Everywhere traffic debugging
+
+For large saved captures, request `detail: "summary"`, then page retained Evidence
+with `inspect_analysis_view` and `view: {kind: "capture", detail: "preview", offset: 0, limit: 20}`.
+Select complete record pages only for needed headers, metadata or payloads; views
+read the historical parent without repeating capture decoding.
+
+Inspect native `.saz` snapshots with `inspect_web_network_capture` and
+`format: "saz"`; encrypted archives are unsupported. For live
+traffic analysis, connect Everywhere's separate MCP server and use its
+advertised session tools with an explicit `sessionsSource` (`LiveTraffic` or
+`AgentCalls`). Preserve existing sessions and filters when inspecting a
+recorded run. See the [capture and MCP guide](https://github.com/morluto/rea/blob/main/docs/web-network-captures.md)
+for the workflow and Telerik's public setup and traffic-debugging skills.
diff --git a/.claude/skills/slideshow/SKILL.md b/.claude/skills/slideshow/SKILL.md
new file mode 100644
index 0000000..3a53c1e
--- /dev/null
+++ b/.claude/skills/slideshow/SKILL.md
@@ -0,0 +1,62 @@
+---
+name: slideshow
+description: Build a HyperFrames slideshow to present live - slides, fragment reveals, branching hotspots and presenter mode with speaker notes, served by `hyperframes present` - or turn an existing page into one. Use when the person wants a deck or presentation rather than a rendered video.
+---
+
+**Plugin installs:** Before setup or freshness commands, follow [plugin execution rules](../hyperframes/references/plugin-installation.md) when this skill is inside a HyperFrames plugin.
+
+# HyperFrames slideshow
+
+A slideshow is a normal composition (the `/hyperframes` contract applies) plus one JSON island that says which scenes are slides and how they connect. The deliverable is a running deck, not an MP4.
+
+## What changes from a video project
+
+- **Each slide is a top-level scene** in the composition file: `data-composition-id`, `data-start`, `data-duration`, `data-label`, `data-width`, `data-height`. There is no master root composition wrapping them.
+- **One island per composition**, near the top of `<body>`, written in the HTML (never generated by script; `present` reads the file statically):
+
+```html
+<script type="application/hyperframes-slideshow+json">
+  {
+    "slides": [
+      { "sceneId": "hook", "notes": "Pause on the number." },
+      {
+        "sceneId": "problem",
+        "fragments": [11.0, 15.0],
+        "hotspots": [
+          {
+            "id": "h1",
+            "label": "Where does $40B come from?",
+            "target": "market-detail",
+            "region": { "x": 55, "y": 60, "w": 40, "h": 20 }
+          }
+        ]
+      }
+    ],
+    "slideSequences": [
+      { "id": "market-detail", "label": "Market sizing", "slides": [{ "sceneId": "mkt-math" }] }
+    ]
+  }
+</script>
+```
+
+- `sceneId` equals a scene's `data-composition-id` (or give `startTime`/`endTime`). `notes` are presenter-only. `ttsScript`, `ttsAudioUrl` and `ttsDurationMs` are reserved and not wired yet.
+- **Fragments are absolute timeline times** (the same clock as `data-start`, not offsets inside the slide) within the slide's `[start, end]`. Navigation seeks, it never plays: each hold state must look right when the timeline is seeked straight to that time. A slide without fragments enters at a rest frame inside it.
+- **Branch slides** are ordinary scenes listed only in `slideSequences`, never in the main `slides` array. A hotspot's `target` is a sequence `id`; `region` is a percentage box (omit it for a full-slide button). Back returns to the slide that held the hotspot.
+- Text the audience must read is at least 40 px at 1920×1080. Before hand-building any named visual, search `npx hyperframes catalog --query "<the visual, in English>" --json`: it ranks the whole registry with nothing installed.
+
+## Porting an existing page
+
+- Keep the source's look, motion, interactions and media behaviour; port its widgets, players and visualizers rather than approximating them.
+- Movement the page drove by scroll, wheel or a camera layer becomes a camera move from one focal point to the next on slide navigation, never a page visibly scrolling. Keep each move direct, without reversals the source doesn't make.
+- Screenshots, posts, charts, code and any image with readable text are evidence: keep their aspect (`object-fit: contain`) and check all four edges for crops.
+- Every copied `<video>`/`<audio>` needs `data-start` and `data-duration` (`data-has-audio="true"` when its sound plays), and no `preload="none"`. Custom media chrome reads the native element's events and `currentTime`, never its own timer.
+- Hidden stacked slides need `opacity: 0`, `visibility: hidden` and `pointer-events: none` together, or an invisible layer swallows clicks.
+
+## Present and hand off
+
+- **Never render a deck to MP4**: `render` keeps only the first scene and truncates silently. For stills, `snapshot --at` each slide.
+- Run `npx hyperframes check --json` until it is clean. The slideshow rule checks that every `sceneId` resolves, every hotspot `target` exists, fragments sit inside their slide, and main-line slides don't overlap.
+- Serve it with `npx hyperframes present <project-dir>` and hand over the URL it prints: "Click Present, or press P, to open the audience tab."
+- The project's root `index.html` should open as a working deck: `<hyperframes-slideshow>` around `<hyperframes-player src="…">`, with the raw composition in a subfolder if needed. The component owns Present (P), Prev/Next, the counter, global mute, fullscreen, swipe, hotspots, presenter notes (editable, kept per deck) and stopping media on slide exit. Don't build your own versions of any of these.
+- Screen sharing: in Google Meet share the audience **tab**, which keeps rendering in the background. In Zoom drag the audience tab into its own window and share that; a fully covered window freezes.
+- A deck opened from the bare player bundle without `present` needs workarounds: `references/standalone-harness.md`.
diff --git a/.claude/skills/slideshow/references/standalone-harness.md b/.claude/skills/slideshow/references/standalone-harness.md
new file mode 100644
index 0000000..bc42957
--- /dev/null
+++ b/.claude/skills/slideshow/references/standalone-harness.md
@@ -0,0 +1,1017 @@
+# Standalone HyperFrames Slideshow Harness
+
+## 1. Interim framing — why this exists
+
+These patterns are a **temporary workaround** for standalone demos. The durable solution is engine-hosted: a future `hyperframes preview --slideshow` / studio present mode will host the composition over the real HyperFrames engine, which drives seek-timelines frame-by-frame, owns the gesture frame, and reads the slideshow island directly from the composition. When that path ships, most of what follows collapses.
+
+Until then, a standalone slideshow opened via the bare player bundle must work around three facts:
+
+1. The composition must expose a seekable `window.__timelines.root` timeline. Anything outside that seek path, such as Three.js loops or imperative entrance effects, must be self-driving.
+2. `<hyperframes-slideshow>` reads the slideshow island from its **own innerHTML** (the wrapper element), not from the composition the player loads. The island must be duplicated into the wrapper.
+3. The composition runs in the player's **iframe**; user keypresses and pointer events land on the **parent page**. Wrapper-owned SFX/global audio should live in the parent, where the activation token is reliable. Normal slide media stays in the composition and is stopped by the slideshow player on slide exit.
+
+Do not treat these as the blessed authoring model. When the engine-hosted path ships, compositions authored the normal way will just work.
+
+**Living reference implementations:**
+
+---
+
+## 2. The parent wrapper (`index.html` for deliverables, `demo.html` in examples)
+
+The parent page hosts the two dist bundles, wraps the components, duplicates the island, and owns all audio.
+
+For public or user-facing generated projects, make this wrapper the root `index.html` so opening the project in a browser runs the slideshow. Put the raw HyperFrames composition in a separate path such as `composition/index.html`. In repo examples you may still see this file called `demo.html`; that name is a reference pattern, not the preferred handoff for a standalone deck.
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Deck — Slideshow Demo</title>
+
+    <!--
+      Load both bundles from packages/player/dist.
+      The global builds register <hyperframes-player> and <hyperframes-slideshow>
+      as custom elements — no import map needed.
+    -->
+    <script src="../../../packages/player/dist/hyperframes-player.global.js"></script>
+    <script src="../../../packages/player/dist/slideshow/hyperframes-slideshow.global.js"></script>
+
+    <style>
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+      }
+      html,
+      body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #111;
+      }
+    </style>
+  </head>
+  <body>
+    <!--
+      tabindex="0" is critical — <hyperframes-slideshow> binds keydown
+      (ArrowLeft/Right, Space, Backspace) to itself. Without tabindex the
+      element cannot receive focus and arrow keys are dead.
+    -->
+    <hyperframes-slideshow
+      tabindex="0"
+      style="display: block; position: relative; width: 100vw; height: 100vh"
+    >
+      <hyperframes-player
+        interactive
+        style="position: absolute; inset: 0"
+        src="composition/index.html"
+      ></hyperframes-player>
+
+      <!--
+        DUPLICATED ISLAND — keep in sync with the island inside index.html.
+        <hyperframes-slideshow> reads from its own innerHTML, not from the
+        composition the player loads. Every time slides/fragments/hotspots/
+        sequences change in index.html, update this copy too.
+      -->
+      <script type="application/hyperframes-slideshow+json">
+        {
+          "slides": [
+            { "sceneId": "scene-one", "notes": "..." },
+            {
+              "sceneId": "scene-two",
+              "notes": "...",
+              "fragments": [8.3, 8.6]
+            }
+          ],
+          "slideSequences": [
+            {
+              "id": "branch-one",
+              "label": "Branch label",
+              "slides": [{ "sceneId": "branch-scene", "notes": "..." }]
+            }
+          ]
+        }
+      </script>
+    </hyperframes-slideshow>
+    <!-- The built-in slideshow nav capsule renders Present; do not add a wrapper-level button. -->
+
+    <!-- Audio player lives here — see Section 6 -->
+  </body>
+</html>
+```
+
+`interactive` is required for decks with clickable page content or media controls. Without it, iframe pointer events are disabled by the player shell and a click on the composition can be interpreted as a player play/pause toggle instead of a slide interaction.
+
+### Per-slide `autoplay`
+
+Add `"autoplay": true` to a slide in the island to play that slide's first `<video>` from the start when the presenter lands on it. The slideshow still holds — it never auto-advances — so the presenter clicks Next when ready; autoplay only saves a manual play click into the composition.
+
+```json
+{
+  "sceneId": "cold-open",
+  "autoplay": true,
+  "notes": "Promo plays on enter; click Next when it ends."
+}
+```
+
+Use `autoplay` when the video **is** the slide's primary content and its natural end is the cue to advance — a cold-open promo, a demo clip you let run and then move on from. Do **not** use it for background/ambient loops or for footage the presenter talks over; those should start on the presenter's own cue (a click on the clip's controls via `interactive`), not automatically. One autoplay clip per slide (the first `<video>` in the scene).
+
+### Presenter media bridge for interactive media
+
+Presenter/audience mode syncs slide position through a deck-scoped `BroadcastChannel`. If the presenter is expected to play, pause, seek, mute, or change rate on media inside the composition, mirror those native media events over the same channel. Keep the media element as the source of truth; do not mirror a custom button's private state.
+
+Audible playback has one extra browser constraint: a `BroadcastChannel` message does not carry the presenter's user activation into the audience window. The audience window should try presenter-driven playback muted first, because browsers usually allow muted autoplay; it may still reject `media.play()` even while it accepts remote `currentTime` updates. If that happens, do not keep chasing presenter `timeupdate` messages; show an audience-side unlock control, store the latest play intent, and retry playback from that intent after the audience window receives a click/key gesture.
+
+```js
+(function () {
+  if (typeof BroadcastChannel === "undefined") return;
+
+  var sender =
+    new URLSearchParams(location.search).get("mode") === "audience" ? "audience" : "presenter";
+  var channel = new BroadcastChannel("hf-slideshow:" + location.pathname);
+  var applyingRemote = false;
+  var lastTimeBroadcast = 0;
+  var pendingPlayByKey = {};
+  var blockedPlayByKey = {};
+  var mutedPlaybackByKey = {};
+  var unlockButton = null;
+
+  function frameDocument() {
+    var player = document.querySelector("hyperframes-player");
+    var frame = player && player.iframeElement;
+    try {
+      return frame && frame.contentDocument ? frame.contentDocument : null;
+    } catch {
+      return null;
+    }
+  }
+  function mediaNodes() {
+    var doc = frameDocument();
+    return doc ? Array.from(doc.querySelectorAll("video,audio")) : [];
+  }
+  function mediaKey(el, index) {
+    return el.id ? "id:" + el.id : el.tagName.toLowerCase() + ":" + index;
+  }
+  function findMedia(key) {
+    return mediaNodes().find(function (el, index) {
+      return mediaKey(el, index) === key;
+    });
+  }
+  function syncMediaState(el, msg, allowTimeSync) {
+    if (typeof msg.playbackRate === "number") el.playbackRate = msg.playbackRate;
+    if (typeof msg.volume === "number") el.volume = Math.max(0, Math.min(1, msg.volume));
+    if (sender === "audience" && mutedPlaybackByKey[msg.key]) {
+      el.muted = true;
+    } else if (typeof msg.muted === "boolean") {
+      el.muted = msg.muted;
+    }
+    if (
+      allowTimeSync &&
+      typeof msg.currentTime === "number" &&
+      Math.abs((el.currentTime || 0) - msg.currentTime) > 0.35
+    ) {
+      el.currentTime = Math.max(0, msg.currentTime);
+    }
+  }
+  function hasBlockedPlay() {
+    return Object.keys(blockedPlayByKey).length > 0;
+  }
+  function hideAudienceUnlockIfClear() {
+    if (hasBlockedPlay() || !unlockButton) return;
+    unlockButton.remove();
+    unlockButton = null;
+  }
+  function showAudienceUnlock() {
+    if (sender !== "audience" || unlockButton) return;
+    unlockButton = document.createElement("button");
+    unlockButton.type = "button";
+    unlockButton.textContent = "Enable audience media";
+    unlockButton.style.cssText =
+      "position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:100000;border:0;border-radius:999px;padding:12px 18px;background:#fff;color:#111827;box-shadow:0 10px 32px rgba(0,0,0,.28);font:700 14px/1 system-ui,sans-serif;cursor:pointer;";
+    unlockButton.addEventListener("click", retryBlockedPlays);
+    document.body.appendChild(unlockButton);
+  }
+  function rememberBlockedPlay(msg) {
+    pendingPlayByKey[msg.key] = msg;
+    blockedPlayByKey[msg.key] = true;
+    showAudienceUnlock();
+  }
+  function clearBlockedPlay(key) {
+    delete blockedPlayByKey[key];
+    hideAudienceUnlockIfClear();
+  }
+  function tryPlay(el, msg) {
+    if (sender === "audience") mutedPlaybackByKey[msg.key] = true;
+    syncMediaState(el, msg, true);
+    if (sender === "audience") el.muted = true;
+    try {
+      var playResult = el.play();
+      if (playResult && typeof playResult.then === "function") {
+        playResult
+          .then(function () {
+            clearBlockedPlay(msg.key);
+          })
+          .catch(function () {
+            rememberBlockedPlay(msg);
+          });
+      } else {
+        clearBlockedPlay(msg.key);
+      }
+    } catch (e) {
+      rememberBlockedPlay(msg);
+    }
+  }
+  function retryBlockedPlays() {
+    wireMedia();
+    applyingRemote = true;
+    try {
+      Object.keys(pendingPlayByKey).forEach(function (key) {
+        var msg = pendingPlayByKey[key];
+        var el = findMedia(key);
+        if (el && msg) tryPlay(el, msg);
+      });
+    } finally {
+      setTimeout(function () {
+        applyingRemote = false;
+      }, 300);
+    }
+  }
+  function publish(el, index, action) {
+    if (sender !== "presenter") return;
+    if (applyingRemote) return;
+    if (action === "timeupdate") {
+      var now = performance.now();
+      if (now - lastTimeBroadcast < 450 && !el.paused) return;
+      lastTimeBroadcast = now;
+    }
+    channel.postMessage({
+      type: "media",
+      sender,
+      key: mediaKey(el, index),
+      action,
+      currentTime: el.currentTime || 0,
+      paused: el.paused,
+      ended: el.ended,
+      muted: el.muted,
+      volume: el.volume,
+      playbackRate: el.playbackRate,
+    });
+  }
+  function wireMedia() {
+    mediaNodes().forEach(function (el, index) {
+      if (el.dataset.hfPresenterMediaSync === "1") return;
+      el.dataset.hfPresenterMediaSync = "1";
+      [
+        "play",
+        "pause",
+        "seeking",
+        "seeked",
+        "ratechange",
+        "volumechange",
+        "ended",
+        "timeupdate",
+      ].forEach(function (name) {
+        el.addEventListener(name, function () {
+          publish(el, index, name);
+        });
+      });
+    });
+  }
+  channel.addEventListener("message", function (event) {
+    var msg = event.data;
+    if (!msg || msg.type !== "media" || msg.sender === sender) return;
+    if (sender === "audience" && blockedPlayByKey[msg.key] && msg.action === "timeupdate") {
+      pendingPlayByKey[msg.key] = msg;
+      showAudienceUnlock();
+      return;
+    }
+    var el = findMedia(msg.key);
+    if (!el) return;
+    applyingRemote = true;
+    try {
+      if (
+        msg.action === "play" ||
+        (sender === "audience" && msg.action === "timeupdate" && msg.paused === false && el.paused)
+      ) {
+        pendingPlayByKey[msg.key] = msg;
+        tryPlay(el, msg);
+      } else {
+        syncMediaState(el, msg, true);
+      }
+      if (msg.action === "pause" || msg.action === "ended") {
+        delete pendingPlayByKey[msg.key];
+        delete mutedPlaybackByKey[msg.key];
+        clearBlockedPlay(msg.key);
+        el.pause();
+      }
+    } catch {
+    } finally {
+      setTimeout(function () {
+        applyingRemote = false;
+      }, 300);
+    }
+  });
+  wireMedia();
+  window.addEventListener("load", wireMedia);
+  window.addEventListener("keydown", retryBlockedPlays, true);
+  window.addEventListener("pointerdown", retryBlockedPlays, true);
+  setInterval(wireMedia, 1000);
+})();
+```
+
+### Custom media visualizers
+
+For waveform, beat-grid, canvas, or timeline players, wire visual state to the native media element. This keeps native controls, custom controls, presenter sync, slide-exit cleanup, and global mute in one event path.
+
+```js
+function wireMediaDrivenVisualizer(media, renderFrame, fireCrossedEvents) {
+  var mediaFrame = 0;
+  var lastTime = media.currentTime || 0;
+
+  function update() {
+    var time = media.currentTime || 0;
+    if (Math.abs(time - lastTime) < 1.5 && time >= lastTime) {
+      fireCrossedEvents(lastTime, time);
+    }
+    lastTime = time;
+    renderFrame(time, media);
+  }
+
+  function start() {
+    if (!media.requestVideoFrameCallback || mediaFrame) return;
+    mediaFrame = media.requestVideoFrameCallback(function () {
+      mediaFrame = 0;
+      update();
+      if (!media.paused && !media.ended) start();
+    });
+  }
+
+  media.addEventListener("play", start);
+  media.addEventListener("playing", start);
+  media.addEventListener("pause", update);
+  media.addEventListener("ended", update);
+  media.addEventListener("timeupdate", update);
+  media.addEventListener("seeking", function () {
+    lastTime = media.currentTime || 0;
+    renderFrame(lastTime, media);
+  });
+  media.addEventListener("seeked", update);
+  media.addEventListener("ratechange", update);
+  media.addEventListener("volumechange", update);
+  renderFrame(media.currentTime || 0, media);
+}
+```
+
+Do not use `requestAnimationFrame` inside compositions for media sync; composition lint rejects wall-clock loops. Prefer `HTMLVideoElement.requestVideoFrameCallback()` for smooth video-tied updates and rely on native `timeupdate`/seek events as the fallback.
+
+Use a dedicated wiring marker such as `data-media-sync-wired`. Do not reuse a marker like `data-wired` for both "timeline DOM already rendered" and "media event listeners attached"; pre-rendered timeline HTML will otherwise skip listener setup.
+
+### Editable presenter notes
+
+The shared `<hyperframes-slideshow>` presenter already renders speaker notes as an editable textarea and stores edits in `localStorage`. Do not add deck-specific note editors when the shared player is available.
+
+For interim custom wrappers that cannot use the shared presenter chrome, use this deterministic storage contract exactly so notes migrate cleanly:
+
+```js
+const NOTES_STORAGE_PREFIX = "hf-slideshow:presenter-notes:v1:";
+
+function notesDeckKey(slideshowEl) {
+  const explicit = slideshowEl.getAttribute("notes-storage-key");
+  if (explicit && explicit.trim()) return explicit.trim();
+
+  const playerSrc = slideshowEl.querySelector("hyperframes-player")?.getAttribute("src") || "";
+  let resolvedPlayerSrc = playerSrc;
+  try {
+    resolvedPlayerSrc = new URL(playerSrc, location.href).href;
+  } catch {}
+
+  return `${location.origin}${location.pathname}|${document.title}|${resolvedPlayerSrc}`;
+}
+
+function notesStorageKey(slideshowEl, position, slide) {
+  return `${NOTES_STORAGE_PREFIX}${JSON.stringify([
+    notesDeckKey(slideshowEl),
+    position.sequenceId,
+    position.slideIndex,
+    slide.sceneId || "",
+  ])}`;
+}
+
+function readPresenterNotes(slideshowEl, position, slide) {
+  const key = notesStorageKey(slideshowEl, position, slide);
+  try {
+    const stored = localStorage.getItem(key);
+    return stored == null ? slide.notes || "" : stored;
+  } catch {
+    return slide.notes || "";
+  }
+}
+
+function wirePresenterNotes(textarea, slideshowEl, position, slide) {
+  const key = notesStorageKey(slideshowEl, position, slide);
+  textarea.value = readPresenterNotes(slideshowEl, position, slide);
+  textarea.addEventListener("input", function () {
+    try {
+      localStorage.setItem(key, textarea.value);
+    } catch {}
+  });
+}
+```
+
+Clearing the textarea must save an empty string, not remove the local value, because a presenter may intentionally blank a manifest note for their run. Use `notes-storage-key="stable-deck-id"` on `<hyperframes-slideshow>` when a standalone demo has a stable project id; otherwise the fallback key isolates by page, title, and player `src`.
+
+---
+
+## 3. Playhead-driven scene visibility
+
+Without the engine, scenes are driven by a `root` GSAP timeline that the composition manages on its own clock. The visibility controller reads `window.__timelines.root.time()` via that timeline's `onUpdate` callback and sets `opacity` accordingly. Only the active scene is visible.
+
+The key insight: scene backgrounds must be `transparent` (not opaque) if you want a Three.js canvas behind them; the body/html background and scene inline `background` set the visual fill.
+
+For converted source pages, preserve the original page's visual design, motion language, interactive behavior, media behavior, and presentation affordances as closely as practical. Port source-specific widgets exactly where practical: custom canvas players, waveform/timeline decorations, expanding rings, playheads, hover states, and event wiring are source material, not optional polish. Also audit for atypical page movement: scroll-scrubbed cameras, parallax, pinned sections, horizontal scrollers, section snapping, translated/scaled world layers, or zoom-to-element navigation. Scroll is often the source's transition trigger, so extract the scroll-progress stops, easing, and camera/focus states, then re-host that motion on slideshow navigation through timeline positions, fragments, or reusable harness hooks. Do not recreate the browser's literal page-scroll-down motion inside a slide; translate it into camera travel/zoom from one focus area to the next. If the same mechanical behavior appears across decks, move it into the player or this harness instead of copying a fragile one-off script.
+
+### Navigation camera transitions for converted pages
+
+When a source page uses scroll to move a translated/scaled world, slideshow navigation usually seeks directly to each slide's hold frame. That seek bypasses any in-timeline interpolation near the scene boundary, so a deck can compute the right camera positions and still appear to jump. Add an explicit standalone navigation transition for manual slide changes, while keeping normal HyperFrames timeline seeks static and deterministic.
+
+Use this pattern only for direct-open/presenter slideshow UI. Do not depend on CSS transitions for rendered video output; rendered compositions must still be correct when seeking a single frame.
+
+```css
+#world {
+  transform-origin: 0 0;
+  will-change: transform;
+  transition:
+    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.3s ease;
+}
+
+#world.hf-camera-static {
+  transition: opacity 0.3s ease;
+}
+```
+
+```js
+var currentCamera = null;
+var currentSlideIndex = null;
+
+function cameraTransform(cam) {
+  return "translate(" + cam.tx + "px," + cam.ty + "px) scale(" + cam.s + ")";
+}
+
+function setWorldCamera(world, cam, animate) {
+  if (!cam) return;
+  if (!animate) world.classList.add("hf-camera-static");
+  world.style.transform = cameraTransform(cam);
+  world.style.opacity = "1";
+  if (!animate) {
+    world.getBoundingClientRect();
+    world.classList.remove("hf-camera-static");
+  }
+  currentCamera = cam;
+}
+
+function slideIndexAtTime(t, slideDuration, slideCount) {
+  return Math.max(0, Math.min(slideCount - 1, Math.floor(t / slideDuration)));
+}
+
+function updateCameraForTime(t, opts) {
+  var nextSlideIndex = slideIndexAtTime(t, SLIDE_DURATION, SLIDES.length);
+  var jumpedBetweenSlides =
+    currentSlideIndex !== null &&
+    nextSlideIndex !== currentSlideIndex &&
+    Math.abs(t - lastTime) > 1.2;
+  var animateCamera = Boolean(
+    window.__hfCameraTransitionsEnabled && jumpedBetweenSlides && !(opts && opts.staticCamera),
+  );
+  var cam = cameraAtTime(t);
+  setWorldCamera(world, cam, animateCamera);
+  currentSlideIndex = nextSlideIndex;
+}
+```
+
+During measurement, temporarily remove the transform with `hf-camera-static`, compute all element union rects, then restore `currentCamera` without animation. On initial load, resize, and validation-style seeks, call `updateCameraForTime(t, { staticCamera: true })`. In the standalone wrapper, set `iframe.contentWindow.__hfCameraTransitionsEnabled = true` after the player iframe is available. That keeps the exported composition seekable while letting presenter navigation glide between focal points.
+
+Before validation, resolve source font variables. HyperFrames lint accepts concrete generic stacks such as `system-ui, sans-serif` and `ui-monospace, monospace`, or real `@font-face` declarations pointing at local font files. It does not accept `font-family: var(--f-body)` / `var(--f-mono)` as a render-safe family.
+
+```html
+<!-- In index.html (composition) -->
+
+<!-- Shared scene CSS — all scenes start hidden -->
+<style>
+  .scene-frame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1920px;
+    height: 1080px;
+    overflow: hidden;
+    opacity: 0; /* hidden at rest — visibility controller shows the active one */
+    visibility: hidden; /* opacity:0 alone still lets invisible frames block clicks */
+    pointer-events: none; /* inactive scenes must not swallow events */
+  }
+</style>
+
+<!--
+  content-visible-at-rest: mark the first scene's elements with their
+  final non-hidden state so the deck is not blank before the controller
+  fires. The controller calls updateVisibility(0) synchronously on load.
+
+  If using Three.js canvas behind scenes, set background: transparent
+  here and let the 3D canvas + body color supply the fill.
+-->
+<div
+  id="scene-cover"
+  class="scene-frame clip"
+  data-composition-id="cover"
+  data-start="0"
+  data-duration="9"
+  style="background: transparent"
+>
+  <!-- content here -->
+</div>
+
+<div
+  id="scene-problem"
+  class="scene-frame clip"
+  data-composition-id="problem"
+  data-start="9"
+  data-duration="9"
+  style="background: transparent"
+>
+  <!-- content here -->
+</div>
+
+<!-- Root timeline — spans the full composition duration -->
+<script>
+  (function () {
+    window.__timelines = window.__timelines || {};
+    var tl = gsap.timeline({ paused: true });
+    // A single to() for the full duration establishes the seekable range
+    tl.to({}, { duration: 108 }); // replace 108 with your total seconds
+    window.__timelines["root"] = tl;
+  })();
+</script>
+
+<!-- Visibility controller -->
+<script>
+  (function () {
+    var scenes = [
+      { id: "scene-cover", start: 0, end: 9 },
+      { id: "scene-problem", start: 9, end: 18 },
+      // ... all scenes including branch scenes
+    ];
+
+    var lastActiveId = null;
+
+    function updateVisibility(t) {
+      for (var i = 0; i < scenes.length; i++) {
+        var s = scenes[i];
+        var el = document.getElementById(s.id);
+        if (!el) continue;
+        var active = t >= s.start && t < s.end;
+        el.style.opacity = active ? "1" : "0";
+        el.style.visibility = active ? "visible" : "hidden";
+        el.style.pointerEvents = active ? "auto" : "none";
+
+        if (active && lastActiveId !== s.id) {
+          lastActiveId = s.id;
+          fireEntrance(el); // see Section 4
+        }
+      }
+      // fragment reveals here — see Section 4
+    }
+
+    window.__hfSetTime = updateVisibility;
+
+    // Show first slide immediately — avoids blank on load
+    updateVisibility(0);
+
+    // Hook the root timeline so every seek drives visibility
+    var root = window.__timelines && window.__timelines["root"];
+    if (root) {
+      root.eventCallback("onUpdate", function () {
+        updateVisibility(root.time());
+      });
+    }
+  })();
+</script>
+```
+
+---
+
+## 4. Imperative entrances on slide-activate
+
+The engine-hosted path drives GSAP seek-timelines frame by frame. Without it, seek-timeline tweens never fire. Instead, fire imperative `gsap.from()` calls each time a scene becomes active — these run on GSAP's own ticker and are independent of any playhead.
+
+Fragment reveals use playhead-crossing: the visibility controller checks whether the playhead has passed each fragment's hold-time and fires an animation on the first crossing. Bunch fragment hold-times near the scene start (within the first 300–500 ms of the scene) so successive ArrowRight presses feel like snappy sequential reveals rather than long waits.
+
+```js
+// --- Entrance animations ---
+
+function fireEntrance(sceneEl) {
+  // [data-anim] marks elements that should entrance on slide-activate.
+  // Add data-anim to eyebrows, headlines, subheads, and card grids.
+  var animEls = sceneEl.querySelectorAll("[data-anim]");
+  if (!animEls.length) return;
+  gsap.from(animEls, {
+    opacity: 0,
+    y: 28,
+    duration: 0.4,
+    stagger: 0.07,
+    ease: "power2.out",
+    overwrite: true, // cancel any in-flight animation on rapid slide changes
+  });
+}
+
+// --- Fragment reveals ---
+
+// Fragment config: times in absolute composition timeline seconds,
+// bunched near the scene start for snappy successive reveals.
+var fragments = [
+  { time: 9.3, id: "prob-item1", revealed: false },
+  { time: 9.6, id: "prob-item2", revealed: false },
+];
+
+function revealFragment(id) {
+  var el = document.getElementById(id);
+  if (!el) return;
+  gsap.fromTo(
+    el,
+    { opacity: 0, x: -24 },
+    { opacity: 1, x: 0, duration: 0.35, ease: "power2.out", overwrite: true },
+  );
+}
+
+// Inside updateVisibility(t):
+for (var f = 0; f < fragments.length; f++) {
+  if (!fragments[f].revealed && t >= fragments[f].time) {
+    fragments[f].revealed = true;
+    revealFragment(fragments[f].id);
+  }
+}
+
+// On problem scene re-entry, reset all fragment states:
+if (active && lastActiveId !== s.id && s.id === "scene-problem") {
+  for (var f = 0; f < fragments.length; f++) {
+    fragments[f].revealed = false;
+    var pEl = document.getElementById(fragments[f].id);
+    if (pEl) gsap.set(pEl, { opacity: 0, clearProps: "transform" });
+  }
+}
+```
+
+Fragment items start with `opacity: 0` in CSS. The visibility controller reveals them; the entrance driver does not touch them until crossing.
+
+---
+
+## 5. The scenes bootstrap postMessage
+
+`<hyperframes-slideshow>` must know each scene's time range to map a `sceneId` to a playhead position. Without the engine injecting this at runtime, the composition must post it manually after load.
+
+Post the manifest from the composition (index.html), not the parent wrapper:
+
+```js
+// In index.html — post after a brief delay so the parent frame has settled
+(function () {
+  var FPS = 30;
+  var totalSeconds = 108; // match your composition's data-duration
+  var totalFrames = totalSeconds * FPS;
+
+  var scenes = [
+    // EVERY scene — including branch scenes — must appear here.
+    // id must match data-composition-id; start/duration in seconds.
+    { id: "cover", start: 0, duration: 9 },
+    { id: "problem", start: 9, duration: 9 },
+    { id: "solution", start: 18, duration: 9 },
+    // ... all main-line scenes ...
+    // branch scene — listed last, NOT in main slides array in the island
+    { id: "market-sizing", start: 99, duration: 9 },
+  ];
+
+  function postTimeline() {
+    parent.postMessage(
+      {
+        source: "hf-preview",
+        type: "timeline",
+        durationInFrames: totalFrames,
+        scenes: scenes,
+      },
+      "*",
+    );
+  }
+
+  // ~300ms delay after load to let the parent settle
+  if (document.readyState === "complete") {
+    setTimeout(postTimeline, 300);
+  } else {
+    window.addEventListener("load", function () {
+      setTimeout(postTimeline, 300);
+    });
+  }
+})();
+```
+
+Omitting any scene (including branch scenes) from this manifest means the slideshow component cannot seek to it. Include every scene declared in the HTML, even scenes only reachable via a hotspot.
+
+---
+
+## 6. Audio/SFX — built-in mute control via `<hyperframes-slideshow sound>`
+
+Wrapper-owned SFX should live in the parent page. Browsers enforce user-activation for AudioContext and HTMLAudioElement.play() — an iframe without its own activation (i.e., the user never clicked inside it) is often autoplay-blocked. The user's keypress lands on the parent, so the parent is the reliable frame for click/transition sound effects.
+
+Normal slide media should stay in the composition. The slideshow player now stops slide media automatically on slide/sequence changes by calling `hyperframes-player.stopMedia()`, which pauses iframe `<video>` / `<audio>`, runtime WebAudio, and parent proxies adopted from iframe media. Same-slide fragment reveals do not stop media, and global/deck-level parent audio such as `audio-src` is left alone. Do not hand-roll per-slide cleanup scripts for regular video/audio players.
+
+Every copied `<video>` / `<audio>` with a `src` must be timed for HyperFrames ownership:
+
+```html
+<video
+  src="assets/demo.mp4"
+  controls
+  playsinline
+  preload="metadata"
+  data-start="0"
+  data-duration="96"
+  data-has-audio="true"
+></video>
+```
+
+Use `data-has-audio="true"` only for audible media. Muted autoplay loops can omit it. Do not leave `preload="none"` in converted compositions.
+
+Implementation detail: iframe media elements belong to the iframe's DOM realm. Fallback code in the parent page/player must not use the parent page's `el instanceof HTMLMediaElement` check for iframe nodes; in real browsers that fails and leaves videos audible. Use `el.ownerDocument.defaultView.HTMLMediaElement` or a tag/duck-type guard before setting `muted` or calling `pause()`.
+
+### Mute toggle — built-in chrome control
+
+Add the `sound` boolean attribute to `<hyperframes-slideshow>` in demo.html. The component renders a speaker/speaker-muted SVG button as the **leftmost item in the nav capsule**, styled identically to the prev/next ghost buttons. No separate mute button in the composition.
+
+```html
+<hyperframes-slideshow tabindex="0" sound style="..."> ... </hyperframes-slideshow>
+```
+
+The component:
+
+- Tracks `muted` state (default `false`); exposes a `muted` getter
+- Reflects to a `data-hf-muted` attribute on the host when muted
+- Applies mute globally to child `<hyperframes-player>` media and top-level page `<audio>` / `<video>` elements
+- Dispatches `CustomEvent("hf-sound", { detail: { muted }, bubbles: true, composed: true })` on every toggle
+- Browser-checks the actual iframe media state after changes; every composition `<video>` / `<audio>` should report `muted: true` after clicking the nav mute button
+
+Wrapper-owned `new Audio(...)` objects are not attached to the DOM, so the parent audio player must mirror the `hf-sound` event onto each clip:
+
+```js
+var muted = false;
+var slideshow = document.querySelector("hyperframes-slideshow");
+if (slideshow) {
+  slideshow.addEventListener("hf-sound", function (e) {
+    muted = e.detail && e.detail.muted === true;
+    Object.keys(clips).forEach(function (name) {
+      clips[name].muted = muted;
+    });
+  });
+}
+// In message handler:
+if (muted) return; // skip play
+```
+
+If `sound` is **not** present on `<hyperframes-slideshow>` (decks without audio), the mute control is hidden — the capsule shows only nav.
+
+### Composition: post cues unconditionally
+
+The composition posts sfx cues **unconditionally** — it does not track mute state. The parent gates on `muted`:
+
+**In the composition (index.html):**
+
+```js
+// Post an sfx cue at transition points — unconditionally.
+// The parent audio player gates on the slideshow component's mute state.
+function playSfx(name) {
+  try {
+    parent.postMessage({ type: "hf-sfx", name: name }, "*");
+  } catch (e) {}
+}
+
+// Fire at scene transitions:
+//   playSfx("advance")      — moving to the next main-line slide
+//   playSfx("back")         — returning from a branch
+//   playSfx("branch-enter") — entering a branch
+//   playSfx("fragment")     — a fragment item is revealed
+```
+
+Do NOT add a mute button inside the composition. The `#sfx-mute` coral button pattern is removed; the nav capsule in the parent chrome owns mute.
+
+**In the parent (demo.html):**
+
+```html
+<script>
+  (function () {
+    // Audio elements are preloaded here, in the frame that receives user gestures.
+    var clips = {
+      advance: new Audio("sfx/advance.mp3"),
+      fragment: new Audio("sfx/fragment.mp3"),
+      "branch-enter": new Audio("sfx/branch-enter.mp3"),
+      back: new Audio("sfx/back.mp3"),
+    };
+    clips.advance.volume = 0.45;
+    clips.fragment.volume = 0.4;
+    clips["branch-enter"].volume = 0.4;
+    clips.back.volume = 0.4;
+    Object.keys(clips).forEach(function (k) {
+      clips[k].preload = "auto";
+    });
+
+    // Track mute state from the slideshow component's hf-sound event.
+    var muted = false;
+    var slideshow = document.querySelector("hyperframes-slideshow");
+    if (slideshow) {
+      slideshow.addEventListener("hf-sound", function (e) {
+        muted = e.detail && e.detail.muted === true;
+      });
+    }
+
+    var unlocked = false;
+
+    function unlock() {
+      if (unlocked) return;
+      unlocked = true;
+      // Prime wrapper-owned SFX clips: play muted then immediately pause/reset.
+      // This moves the clip into the "allowed" state so later plays are instant.
+      Object.keys(clips).forEach(function (name) {
+        var el = clips[name];
+        var v = el.volume;
+        el.volume = 0;
+        el.play()
+          .then(function () {
+            el.pause();
+            el.currentTime = 0;
+            el.volume = v;
+          })
+          .catch(function () {
+            el.volume = v;
+          });
+      });
+    }
+
+    // Unlock on the first user gesture in the parent frame.
+    window.addEventListener("keydown", unlock, true);
+    window.addEventListener("pointerdown", unlock, true);
+    window.addEventListener("click", unlock, true);
+
+    window.addEventListener("message", function (e) {
+      var d = e.data;
+      if (!d || d.type !== "hf-sfx") return;
+      // Gate on mute state — the component owns this.
+      if (muted) return;
+      var el = clips[d.name];
+      if (!el || !unlocked) return;
+      try {
+        el.currentTime = 0;
+        el.play().catch(function () {});
+      } catch (err) {}
+    });
+  })();
+</script>
+```
+
+**Sourcing SFX files:** resolve each one with `npx hyperframes media-use resolve --type sfx --intent "<whoosh | click | transition>" --project .` (Openverse CC0 / CC BY, bundled library offline; CC BY credits land in a `CREDITS.md` beside the resolved files), copy the files to a local `sfx/` directory next to `demo.html` and reference them by relative path. Do not fetch SFX at render time — the HyperFrames determinism rule forbids runtime network requests; pre-download and commit them.
+
+---
+
+## 7. Three.js (optional)
+
+Add a Three.js scene behind the slides for ambient motion. The key rules:
+
+- **Own rAF loop** — do not integrate with the HF seek timeline. Three.js runs its own `requestAnimationFrame` loop independent of playhead position.
+- **One persistent canvas** — create the canvas once; update geometry/materials in-place per scene.
+- **Guard renderer creation** — WebGL may be unavailable (software-GL environments, some CI contexts). Create the renderer inside try/catch once; if it fails, hide the canvas and expose no-op stubs. Do not spam `console.error` — silence it during creation and restore it in `finally`.
+- **Full-bleed, behind content** — fix the canvas at `z-index: 0`, `pointer-events: none`, behind scene frames at `z-index: 1`.
+- **Transparent scene frames** — set scene backgrounds to `transparent` so the 3D canvas shows through. Use a radial-gradient scrim on the text container (not the scene frame itself) to keep type legible while letting 3D show in the margins.
+- **Expose a mood hook** — export `window.__threeApplyMood(sceneKey)` so the visibility controller can switch particle colors, toggle sub-objects, or change the clear color when the active scene changes.
+
+```js
+// In index.html — Three.js setup (module script)
+import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js";
+
+var canvas = document.getElementById("three-canvas");
+var renderer = null;
+var _err = console.error;
+console.error = function () {}; // silence THREE's multi-line GPU error during init
+try {
+  renderer = new THREE.WebGLRenderer({ canvas: canvas, alpha: true, antialias: true });
+} catch (e) {
+  // renderer stays null
+} finally {
+  console.error = _err;
+}
+
+if (!renderer) {
+  // Graceful degradation — branded layout is the fallback.
+  canvas.style.display = "none";
+  window.__threeApplyMood = function () {};
+  // Do NOT start the rAF loop.
+} else {
+  renderer.setSize(1920, 1080);
+  renderer.setPixelRatio(1);
+  canvas.style.cssText =
+    "position:fixed;top:0;left:0;width:1920px;height:1080px;z-index:0;pointer-events:none";
+
+  var scene = new THREE.Scene();
+  var camera = new THREE.PerspectiveCamera(60, 1920 / 1080, 0.1, 1000);
+  camera.position.set(0, 0, 5);
+
+  // --- build your particle system, meshes, etc. here ---
+
+  // Mood config: map sceneId → visual state (colors, sub-object visibility, bg color)
+  var MOODS = {
+    cover: {
+      /* particle color, opacity, bg ... */
+    },
+    problem: {
+      /* ... */
+    },
+    // one entry per scene key
+  };
+
+  window.__threeApplyMood = function (sceneKey) {
+    var m = MOODS[sceneKey] || MOODS["cover"];
+    // update geometry attributes, material opacity, sub-group visibility, etc.
+  };
+  window.__threeApplyMood("cover"); // apply initial state
+
+  // --- own rAF loop ---
+  var lastTime = null;
+  function animate(ts) {
+    requestAnimationFrame(animate);
+    if (lastTime === null) lastTime = ts;
+    var dt = Math.min((ts - lastTime) / 1000, 0.05);
+    lastTime = ts;
+    // update particles, rotate objects, etc.
+    renderer.render(scene, camera);
+  }
+  requestAnimationFrame(animate);
+}
+```
+
+**CSS for transparent scene frames + scrim:**
+
+```css
+/* Three.js canvas — always behind everything */
+#three-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 1920px;
+  height: 1080px;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* Scene frames are transparent so the 3D canvas shows through */
+.scene-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 1920px;
+  height: 1080px;
+  background: transparent; /* NOT opaque — 3D would be occluded */
+  z-index: 1;
+}
+
+/* Scrim on the TEXT container — not the scene frame.
+   Radial gradient: opaque in the center where text is, transparent at edges
+   so 3D shows in the whitespace margins. */
+.slide-inner.scrim-light {
+  background: radial-gradient(
+    ellipse 75% 80% at 50% 50%,
+    rgba(255, 255, 255, 0.88) 30%,
+    rgba(255, 255, 255, 0.6) 65%,
+    rgba(255, 255, 255, 0) 100%
+  );
+}
+```
+
+---
+
+## 8. Foot-gun checklist
+
+| Failure                                               | Symptom                                                         | One-line fix                                                                                                                                     |
+| ----------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Island not duplicated in wrapper                      | Slideshow chrome never renders; no slide counter, no prev/next  | Copy the `<script type="application/hyperframes-slideshow+json">` block verbatim into the `<hyperframes-slideshow>` element in demo.html         |
+| Wrapper SFX in the iframe                             | Click/transition sounds silent                                  | Move SFX Audio elements and unlock logic to demo.html; post `{type:'hf-sfx',name}` from index.html                                               |
+| No self-clock in composition                          | All scene frames stacked / wrong slide visible at load          | Add the root GSAP timeline (`window.__timelines["root"]`) and the `onUpdate` visibility controller as shown in Section 3                         |
+| Content opacity:0 with no engine                      | Blank slides — `[data-anim]` elements invisible at rest         | Call `updateVisibility(0)` synchronously after defining the controller so the first slide is shown immediately                                   |
+| Keydown bound to the element without focus            | ArrowLeft/Right dead                                            | Add `tabindex="0"` to `<hyperframes-slideshow>` so it can receive keyboard focus                                                                 |
+| Opaque scene background occluding Three.js canvas     | 3D never visible                                                | Set `background: transparent` on `.scene-frame`; put the visual fill on the text scrim container instead                                         |
+| WebGL renderer creation spams errors in headless envs | Console noise, rAF loop starts anyway                           | Silence `console.error` during `new THREE.WebGLRenderer(...)`, restore in `finally`, guard the rAF start on `renderer !== null`                  |
+| Branch scene missing from postMessage manifest        | Hotspot navigates but slide is blank                            | Include every scene — main line and branch — in the `scenes` array of the `postTimeline()` message                                               |
+| Prominent 3D/content in nav-capsule zone              | Bright element bleeds behind/beside the nav pill                | Keep the bottom-right ~360×140px region clear; add a background-matching gradient overlay on any slide whose 3D mood is bright in that corner    |
+| Custom media visualizer uses its own timer            | Canvas/playhead drifts from the actual video or native controls | Drive visual state from media events and `media.currentTime`; do not use an independent `setTimeout` clock                                       |
+| One `data-wired` flag means two different things      | Pre-rendered timeline HTML skips media listener setup           | Use separate markers such as `data-timeline-rendered` and `data-media-sync-wired`                                                                |
+| Presenter media events are not bridged                | Audience follows slides but not play/pause/seek/mute            | Mirror native media events over `BroadcastChannel("hf-slideshow:" + location.pathname)` in standalone wrappers with interactive media            |
+| Remote play is blocked in the audience window         | Audience media time jumps but video never plays                 | Try muted playback first; if `media.play()` rejects, show an audience unlock button and ignore live `timeupdate` chasing until playback succeeds |
+| Audience muted autoplay publishes back to presenter   | Presenter audio starts, then mutes or cuts out                  | Publish media events only from presenter mode; audience mute is a local browser-autoplay workaround, not shared media state                      |
+| Copied media lacks HyperFrames timing                 | Lint errors on untimed media; preview/render diverge            | Add `data-start`, `data-duration`, and `data-has-audio="true"` when audible; avoid `preload="none"`                                              |
+| Source font CSS variables kept as font-family values  | StaticGuard font-family contract errors                         | Replace with concrete render-safe stacks or add local `@font-face` declarations                                                                  |
+| Converted scroll/camera source jumps between slides   | Per-slide focal points are correct but manual navigation snaps  | Add a standalone navigation-camera transition hook; disable it for measurement, initial load, resize, and render/validation seeks                |
diff --git a/videos/README.md b/videos/README.md
new file mode 100644
index 0000000..26ea008
--- /dev/null
+++ b/videos/README.md
@@ -0,0 +1,16 @@
+# Workout videos
+
+Made with [HyperFrames](https://github.com/heygen-com/hyperframes) (HTML rendered to video).
+
+| File | What it is |
+|---|---|
+| `diamond-pushup-music.mp4` | Diamond push-up, title and coaching tips, with music (10.1 s) |
+| `diamond-pushup.mp4` | Same video without music |
+| `bench-dips.mp4` | Bench dips, animated athlete, rep counter, tips and music (14.2 s) |
+| `bodyweight-squat.mp4` | Bodyweight squat, animated athlete, 4-rep counter, tips and music (16.0 s) |
+
+## Editable sources
+- `projects/diamond-pushup/`, `projects/bench-dips/` and `projects/bodyweight-squat/`: each is a HyperFrames project. Edit it, then from inside the folder run `npx hyperframes check` and `npx hyperframes render --quality looks --output out.mp4` (needs Node 22+ and FFmpeg).
+- `music/make_music.py`: the program that composes the original, copyright-free music
+  (`python make_music.py out.wav SECONDS BPM rise|anthem`, needs `numpy` and `scipy`).
+  `music/norm.sh` sets its loudness and writes the MP3.
diff --git a/videos/bench-dips.mp4 b/videos/bench-dips.mp4
new file mode 100644
index 0000000..cde2064
Binary files /dev/null and b/videos/bench-dips.mp4 differ
diff --git a/videos/bodyweight-squat.mp4 b/videos/bodyweight-squat.mp4
new file mode 100644
index 0000000..b862a08
Binary files /dev/null and b/videos/bodyweight-squat.mp4 differ
diff --git a/videos/diamond-pushup-music.mp4 b/videos/diamond-pushup-music.mp4
new file mode 100644
index 0000000..b443f49
Binary files /dev/null and b/videos/diamond-pushup-music.mp4 differ
diff --git a/videos/diamond-pushup.mp4 b/videos/diamond-pushup.mp4
new file mode 100644
index 0000000..c0c4448
Binary files /dev/null and b/videos/diamond-pushup.mp4 differ
diff --git a/videos/music/bench-dips-music.mp3 b/videos/music/bench-dips-music.mp3
new file mode 100644
index 0000000..ae96781
Binary files /dev/null and b/videos/music/bench-dips-music.mp3 differ
diff --git a/videos/music/bodyweight-squat-music.mp3 b/videos/music/bodyweight-squat-music.mp3
new file mode 100644
index 0000000..ba3b626
Binary files /dev/null and b/videos/music/bodyweight-squat-music.mp3 differ
diff --git a/videos/music/diamond-pushup-music.mp3 b/videos/music/diamond-pushup-music.mp3
new file mode 100644
index 0000000..9d0e4bf
Binary files /dev/null and b/videos/music/diamond-pushup-music.mp3 differ
diff --git a/videos/music/make_music.py b/videos/music/make_music.py
new file mode 100644
index 0000000..6046e55
--- /dev/null
+++ b/videos/music/make_music.py
@@ -0,0 +1,153 @@
+"""Original gym-motivation track, synthesised from scratch (no samples, no downloads).
+usage: make_music.py OUT.wav DURATION_S BPM ROOT_MIDI_A_MINOR_STYLE_PROG_NAME"""
+import sys, numpy as np
+from scipy import signal
+
+SR = 44100
+out_path, dur, bpm, prog_name = sys.argv[1], float(sys.argv[2]), float(sys.argv[3]), sys.argv[4]
+rng = np.random.default_rng(7)
+beat = 60.0 / bpm
+N = int((dur + 1.5) * SR)            # render a little extra, trim at the end
+t_all = np.arange(N) / SR
+
+def midi(m): return 440.0 * 2 ** ((m - 69) / 12)
+def lp(x, f, order=2): b, a = signal.butter(order, f / (SR / 2), "low"); return signal.lfilter(b, a, x)
+def hp(x, f, order=2): b, a = signal.butter(order, f / (SR / 2), "high"); return signal.lfilter(b, a, x)
+def bp(x, lo, hi): b, a = signal.butter(2, [lo / (SR / 2), hi / (SR / 2)], "band"); return signal.lfilter(b, a, x)
+def put(buf, sig, at_s, gain=1.0, pan=0.0):
+    i = int(at_s * SR)
+    if i >= N: return
+    j = min(N, i + len(sig)); seg = sig[: j - i] * gain
+    buf[0, i:j] += seg * (1 - max(0, pan)); buf[1, i:j] += seg * (1 + min(0, pan))
+def saw(f, n, detune=0.0, ph=0.0):
+    tt = np.arange(n) / SR
+    return 2 * ((tt * f * (1 + detune) + ph) % 1.0) - 1
+
+# ---- progressions: (root midi for bass, chord tones midi) per bar --------------------------
+PROGS = {
+    # Am F C G : minor start, lifts to major - classic "push through" feel
+    "rise": [(45, [57, 60, 64]), (41, [53, 57, 60]), (48, [55, 60, 64]), (43, [55, 59, 62])],
+    # Em C G D : bright anthemic
+    "anthem": [(40, [55, 59, 64]), (36, [55, 60, 64]), (43, [55, 59, 62]), (38, [54, 57, 62])],
+}
+prog = PROGS[prog_name]
+n_beats = int(np.ceil((dur + 1.0) / beat))
+final_beat = int((dur - 0.6) // beat)          # the big final hit lands about 0.6-1 s before the end
+final_beat -= final_beat % 4                     # on a bar line
+
+dry = np.zeros((2, N))      # drums / bass
+mus = np.zeros((2, N))      # pad + pluck (gets reverb)
+kick_times = []
+
+# ---- drums ---------------------------------------------------------------------------------
+def kick():
+    n = int(0.45 * SR); tt = np.arange(n) / SR
+    f = 45 + 110 * np.exp(-tt / 0.035)
+    ph = 2 * np.pi * np.cumsum(f) / SR
+    return (np.sin(ph) * np.exp(-tt / 0.17) + 0.25 * np.exp(-tt / 0.004) * rng.standard_normal(n)) * 1.0
+def clap():
+    s = np.zeros(int(0.3 * SR))
+    for k, d in enumerate([0, 0.011, 0.022, 0.034]):
+        n = int(0.18 * SR); tt = np.arange(n) / SR
+        burst = bp(rng.standard_normal(n), 900, 3800) * np.exp(-tt / (0.012 if k < 3 else 0.07))
+        s[int(d * SR): int(d * SR) + n] += burst[: len(s) - int(d * SR)]
+    return s * 0.9
+def hat(decay):
+    n = int(decay * 5 * SR); tt = np.arange(n) / SR
+    return hp(rng.standard_normal(n), 7000) * np.exp(-tt / decay) * 0.5
+def crash():
+    n = int(1.4 * SR); tt = np.arange(n) / SR
+    return hp(rng.standard_normal(n), 5000) * np.exp(-tt / 0.3) * 0.3
+
+K, C, HH, HHO = kick(), clap(), hat(0.025), hat(0.09)
+for b in range(n_beats):
+    tb = b * beat; bar_i, bt = divmod(b, 4)
+    if b > final_beat: break
+    if b < final_beat:
+        put(dry, K, tb, 1.0); kick_times.append(tb)
+        if bar_i >= 1 and bt in (1, 3): put(dry, C, tb, 0.8)
+        if bar_i >= 1:
+            put(dry, HH, tb + beat * 0.5, 0.7)
+            if bt == 3: put(dry, HHO, tb + beat * 0.5, 0.6)
+        if bar_i >= 2: [put(dry, HH, tb + beat * x, 0.35) for x in (0.25, 0.75)]
+    else:
+        put(dry, K, tb, 1.1); put(dry, C, tb, 1.0); put(dry, crash(), tb, 0.9); kick_times.append(tb)
+
+# ---- bass: rolling offbeat 8ths, silent on the final hit bar until the downbeat -------------
+for b in range(final_beat):
+    root = prog[(b // 4) % len(prog)][0]
+    for h in (0.5, 0.0):
+        if h == 0.0 and b % 4 != 0: continue
+        n = int(beat * 0.45 * SR); tt = np.arange(n) / SR
+        f = midi(root + 12)
+        tone = np.sin(2 * np.pi * f * tt) + 0.35 * lp(saw(f, n), 600)
+        put(dry, tone * np.exp(-tt / 0.25) * np.minimum(1, tt / 0.004), b * beat + h * beat, 0.55)
+rootF = prog[(final_beat // 4) % len(prog)][0] + 12
+nF = int(1.8 * SR); ttF = np.arange(nF) / SR
+put(dry, np.sin(2 * np.pi * midi(rootF) * ttF) * np.exp(-ttF / 0.9), final_beat * beat, 0.7)
+
+# ---- pad: detuned saws on the chord, ducked by the kick -----------------------------------------
+duck = np.ones(N)
+for kt in kick_times:
+    i = int(kt * SR); m = min(N, i + int(0.35 * SR)); tt = np.arange(m - i) / SR
+    duck[i:m] = np.minimum(duck[i:m], 1 - 0.75 * np.exp(-tt / 0.11))
+for bar in range(int(np.ceil(n_beats / 4))):
+    start = bar * 4 * beat
+    if start >= dur + 0.5: break
+    last = bar * 4 >= final_beat
+    chord = prog[bar % len(prog)][1]
+    length = 1.9 if last else 4 * beat
+    n = int((length + 0.3) * SR); tt = np.arange(n) / SR
+    pad = np.zeros(n)
+    for m in chord:
+        for dt in (-0.004, 0.0, 0.004):
+            pad += saw(midi(m), n, dt, rng.random())
+    pad = lp(pad / 9, 1900)
+    env = np.minimum(1, tt / 0.12) * (np.exp(-np.maximum(0, tt - length) / 0.12))
+    put(mus, pad * env * 0.55, start, 1.0, 0.0)
+mus *= duck[None, :]
+
+# ---- pluck arpeggio on 8ths (bright, hooky), with a dotted-eighth echo -------------------------
+pluck_bus = np.zeros((2, N))
+pat = [0, 1, 2, 1, 2, 1, 2, 3]          # indices into chord tones (3 = octave of the first)
+for b8 in range(int(final_beat * 2)):
+    bar = (b8 // 8) % len(prog); chord = prog[bar][1]
+    if b8 // 8 < 1 and b8 % 2 == 1: continue          # sparser in the first bar
+    idx = pat[b8 % 8]; m = (chord[idx] if idx < 3 else chord[0] + 12) + 12
+    n = int(0.28 * SR); tt = np.arange(n) / SR
+    f = midi(m)
+    tone = lp(saw(f, n) + saw(f, n, 0.006), 3200)
+    put(pluck_bus, tone * np.exp(-tt / 0.1) * np.minimum(1, tt / 0.002), b8 * beat * 0.5, 0.30, pan=(-0.35 if b8 % 2 else 0.35))
+for k, g in ((1, 0.42), (2, 0.2)):
+    d = int(0.75 * beat * SR * k)
+    mus[:, d:] += pluck_bus[:, : N - d][:, :] * g
+mus += pluck_bus
+
+# ---- small room reverb on the musical bus -------------------------------------------------------
+def reverb(x, wet=0.22):
+    y = np.zeros_like(x)
+    for ch in range(2):
+        acc = np.zeros(N)
+        for d, g in ((0.0297, 0.80), (0.0371, 0.78), (0.0411, 0.76), (0.0437, 0.74)):
+            D = int(d * SR * (1 + 0.03 * ch)); c = np.zeros(N + D); c[:N] = x[ch]
+            c = signal.lfilter([1], [1] + [0] * (D - 1) + [-g], c)[:N]; acc += c
+        y[ch] = acc / 4
+    return x * (1 - wet) + lp(y, 5000) * wet * 2.0
+mus = reverb(mus)
+
+# ---- riser into the final hit -----------------------------------------------------------------
+rn = int(2 * beat * SR); rt = np.arange(rn) / SR
+riser = hp(rng.standard_normal(rn), 2500) * (rt / rt[-1]) ** 2 * 0.35
+put(dry, riser, final_beat * beat - 2 * beat, 0.7)
+
+# ---- mix, soft-limit, trim, fade ----------------------------------------------------------------
+mix = dry + mus * 0.9
+mix = np.tanh(mix * 0.85) / np.tanh(0.85)
+mix = mix[:, : int(dur * SR)]
+fade = int(0.5 * SR); mix[:, -fade:] *= np.linspace(1, 0, fade)
+mix *= 0.89 / np.max(np.abs(mix))
+import wave
+pcm = (mix.T * 32767).astype("<i2")
+with wave.open(out_path, "wb") as w:
+    w.setnchannels(2); w.setsampwidth(2); w.setframerate(SR); w.writeframes(pcm.tobytes())
+print("wrote", out_path, f"{dur:.2f}s", f"bpm={bpm}", prog_name, "final hit at", round(final_beat * beat, 2), "s")
diff --git a/videos/music/norm.sh b/videos/music/norm.sh
new file mode 100755
index 0000000..392726d
--- /dev/null
+++ b/videos/music/norm.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+# usage: norm.sh in.wav out.mp3 target_LUFS  -> gain-matches to the target, limits peaks to -1.5 dBFS, encodes mp3
+in=$1; out=$2; tgt=${3:--15}
+I=$(ffmpeg -hide_banner -i "$in" -af ebur128 -f null - 2>&1 | awk '/I:/{v=$2} END{print v}')
+G=$(python3 -c "print(round($tgt - ($I),2))")
+ffmpeg -v error -y -i "$in" -af "volume=${G}dB,alimiter=limit=0.84:level=disabled" -b:a 192k "$out"
+echo "$in: was ${I} LUFS, gain ${G} dB"
+ffmpeg -hide_banner -i "$out" -af ebur128=peak=true -f null - 2>&1 | grep -E "^\s+(I|Peak):" 
diff --git a/videos/projects/bench-dips/AGENTS.md b/videos/projects/bench-dips/AGENTS.md
new file mode 100644
index 0000000..ef50661
--- /dev/null
+++ b/videos/projects/bench-dips/AGENTS.md
@@ -0,0 +1,104 @@
+# HyperFrames Composition Project
+
+## Skills — read these first
+
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
+
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
+
+> **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
+> its `hyperframes/references/plugin-installation.md` execution rules. Update via
+> the plugin manager, not the standalone commands below.
+>
+> **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev          # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background  # agent-safe persistent Studio preview
+npx hyperframes preview --status      # verify the persistent preview is listening
+npx hyperframes preview --stop        # stop it when review is finished
+npm run check        # lint + runtime + layout + motion + contrast (one command)
+npm run render       # render to MP4
+npm run publish      # publish and get a shareable link
+npx hyperframes lint --verbose  # include info-level findings
+npx hyperframes lint --json     # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **Back from the desktop app.** Once this project was opened in the HyperFrames desktop app, run `npx hyperframes catch-up` before your next change here: it lists what the person asked Framey in the app and which files changed since.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
+## Key Rules
+
+1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+3. Register one paused root timeline per composition on `window.__timelines`:
+   ```js
+   window.__timelines = window.__timelines || {};
+   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+   ```
+   Scene timelines manually added to this root must not be paused. A paused
+   child does not advance when the root is seeked. The runtime activates
+   registered composition siblings, not arbitrary nested scene timelines.
+4. A video with sound keeps it on the `<video>` (`data-has-audio="true"`, no `muted`). Use a separate `<audio>` for music, voiceover, replacement audio, J/L cuts, or audio detached in Studio. Silent footage and b-roll: `muted`.
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/projects/bench-dips/CLAUDE.md b/videos/projects/bench-dips/CLAUDE.md
new file mode 100644
index 0000000..ef50661
--- /dev/null
+++ b/videos/projects/bench-dips/CLAUDE.md
@@ -0,0 +1,104 @@
+# HyperFrames Composition Project
+
+## Skills — read these first
+
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
+
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
+
+> **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
+> its `hyperframes/references/plugin-installation.md` execution rules. Update via
+> the plugin manager, not the standalone commands below.
+>
+> **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev          # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background  # agent-safe persistent Studio preview
+npx hyperframes preview --status      # verify the persistent preview is listening
+npx hyperframes preview --stop        # stop it when review is finished
+npm run check        # lint + runtime + layout + motion + contrast (one command)
+npm run render       # render to MP4
+npm run publish      # publish and get a shareable link
+npx hyperframes lint --verbose  # include info-level findings
+npx hyperframes lint --json     # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **Back from the desktop app.** Once this project was opened in the HyperFrames desktop app, run `npx hyperframes catch-up` before your next change here: it lists what the person asked Framey in the app and which files changed since.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
+## Key Rules
+
+1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+3. Register one paused root timeline per composition on `window.__timelines`:
+   ```js
+   window.__timelines = window.__timelines || {};
+   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+   ```
+   Scene timelines manually added to this root must not be paused. A paused
+   child does not advance when the root is seeked. The runtime activates
+   registered composition siblings, not arbitrary nested scene timelines.
+4. A video with sound keeps it on the `<video>` (`data-has-audio="true"`, no `muted`). Use a separate `<audio>` for music, voiceover, replacement audio, J/L cuts, or audio detached in Studio. Silent footage and b-roll: `muted`.
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/projects/bench-dips/assets/gsap.min.js b/videos/projects/bench-dips/assets/gsap.min.js
new file mode 100644
index 0000000..fde57af
--- /dev/null
+++ b/videos/projects/bench-dips/assets/gsap.min.js
@@ -0,0 +1,11 @@
+/*!
+ * GSAP 3.14.2
+ * https://gsap.com
+ * 
+ * @license Copyright 2025, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license.
+ * @author: Jack Doyle, jack@greensock.com
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(",")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)"__proto__"!==r&&"constructor"!==r&&"prototype"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||"duration"===r&&i||"ease"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,"_first","_last",e._sort?"_start":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S("scrollTrigger",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!("immediateRender"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:""}function cb(t,e){return t&&v(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T("Invalid scope")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T("Invalid scope")||a.createElement("div"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f="auto"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs("y"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);"random"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?"y"===b?d/f:f:Math.max(f,d/f))||0)*("edges"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+"").split(".")[1]||"").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+"").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf("[")+1,r=t.substring(e||7,e?t.indexOf("]"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,"onInterrupt"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if("hsl"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf("="))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o="",u=(t+o).match(Rt),h=e?"hsla(":"rgba(",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+","+t[1]+"%,"+t[2]+"%,"+t[3]:t.join(","))+")"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,"1").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+"0,0,0,0)":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(" ");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+"").split("("),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf("{")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(":"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(","):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,"").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf("(")+1,r=t.indexOf(")"),i=t.indexOf("(",e);return t.substring(e,~i&&i<r?t.indexOf(")",r+1):r)}(t).split(",").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE("",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+("easeIn"===e?".in":"easeOut"===e?".out":".inOut")]=Bt[t+"."+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s="out"===r?Lm:"in"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t="out"===e?Tm:"in"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\([^)]+\)/g,et=/,\s*/g,rt=/(?:-?\.?\d|\.)+/gi,it=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,nt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,at=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,st=/[+-]=-?[.\d]+/,ot=/[^,'"\[\]\s]+/gi,ut=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt="",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return"isFromStart"===e||"isStart"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+"Params"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e="(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b";for(t in Et)e+="|"+t+"\\b";return new RegExp(e+")","gi")}(),Ft=/hsl[a]?\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m="undefined"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?"unshift":"push"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\d.\-M][\d.\-,\s]/,Nt=/["']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja("Linear,Quad,Cubic,Quart,Quint,Strong",function(t,e){var r=e<5?e+1:e;Vb(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb("Elastic",Xb("in"),Xb("out"),Xb()),B=7.5625,Y=1/2.75,Vb("Bounce",function(t){return 1-jn(1-t)},jn),Vb("Expo",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb("Circ",function(t){return-(J(1-t*t)-1)}),Vb("Sine",function(t){return 1===t?1:1-Q(t*W)}),Vb("Back",Yb("in"),Yb("out"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt["quad.out"],ja("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt",function(t){return Tt+=t+","+t+"Params,"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),"nested"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+"Params"]=r),"onUpdate"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,"onRepeat"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if("isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,"onStart"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,"onUpdate",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?"onComplete":"onReverseComplete",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data="isPause",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&"isPause"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf("random(")&&(n=rb(n)),"="===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||""===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):"",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),"boolean"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&"nested"===D.data?D.vars.targets:A,z="auto"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g="none"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:"isStart",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,"onUpdate")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:"isFromStart",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,"get",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf("random(")?rb(t):t},Kt=Tt+"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert",$t={};ja(Kt+",id,stagger,delay,duration,paused,scrollTrigger",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;"number"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):"length"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T("GSAP target "+e+" not found. https://gsap.com",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:"nested",defaults:O||{},targets:P&&"nested"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:"none"})),s._ease=Vt(k.ease||r.ease||"none");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,">")}),s.duration();else{for(l in u={},k)"ease"===l||"easeEach"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&"nested"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,"onStart"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,"onUpdate")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?"onComplete":"onReverseComplete",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&Dt(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]="+=0",Qt(t,s),Ht=0,o?T(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||Ba(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja("staggerTo,staggerFrom,staggerFromTo",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,"_pt"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc("matchMediaInit"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc("matchMediaRevert"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc("matchMedia"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&"nested"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)"isFlip"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?"nested"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add("onMatch",e),s.queries=t)"all"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener("change",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return"native"===e&&(e=""),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]="+=0.1",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||"").split(",").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+" effect requires "+t+" plugin.")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,"get",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja("to,from,fromTo,delayedCall,set,killTweensOf",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:"attr",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||"",(s=this.add(t,"setAttribute",(o||0)+"",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:"endArray",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc("roundProps",ib),Oc("modifiers"),Oc("snap",jb))||Re;te.version=Zt.version=Fe.version="3.14.2",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},"transform"===t)return mr.transform.split(",").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(",")?t.split(",").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute("data-svg-origin"),this.props.push(vr,e,"")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty("translate"),t.removeProperty("scale"),t.removeProperty("rotate"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty("--"===r[t].substr(0,2)?r[t]:r[t].replace(cr,"-$1").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute("data-svg-origin",this.svgo||"")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=" "+a.zOrigin+"px",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(",").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||"http://www.w3.org/1999/xhtml").replace(/^https/,"http"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,"-$1").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||""}function Wd(){(function _windowExists(){return"undefined"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd("div")||{style:{}},Sd("div"),gr=Tr(gr),vr=gr+"Origin",je.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Xe=!!Tr("perspective"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd("svg",r&&r.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=t.cloneNode(!0);n.style.display="block",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,["x","cx","x1"])||0,y:+Yd(e,["y","cy","y1"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?("ms"!==(r=e.substr(0,2))&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty("--"===r?e:e.replace(cr,"-$1").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+"").trim().substr((u+"").length)||"px",l=je.style,f=pr.test(e),d="svg"===t.tagName.toLowerCase(),c=(d?"client":"offset")+(f?"Width":"Height"),p="px"===i,_="%"===i;if(i===h||!u||br[i]||br[h])return u;if("px"===h||p||(u=de(t,e,r,"px")),o=t.getCTM&&$d(t),(_||"%"===h)&&(hr[e]||~e.indexOf("adius")))return n=o?t.getBBox()[f?"width":"height"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?"width":"height"]=100+(p?h:i),a="rem"!==i&&~e.indexOf("adius")||"em"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||"height"!==e&&"width"!==e)!_&&"%"!==h||wr[Td(a,"display")]||(l.position=Td(t,"position")),a===t&&(l.position="static"),a.appendChild(je),n=je[c],a.removeChild(je),l.position="absolute";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||"none"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):"borderColor"===e&&(r=Td(t,"borderTopColor"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+="","var(--"===(i+="").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(")")))),"auto"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:"rgba("!==p.substr(-5)&&"hsla("!==p.substr(-5)||(l=1),d!==(f=u[y++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),"="===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+"").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:",",s:h,c:c-h,m:l&&l<4||"zIndex"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):""}else g.r="display"===e&&"none"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(" "),r=e[0],i=e[1]||"50%";return"top"!==r&&"bottom"!==r&&"left"!==i&&"right"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(" ")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if("all"===o||!0===o)s.cssText="",i=1;else for(n=(o=o.split(",")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r="transformOrigin"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute("transform"),s.scale=s.rotate=s.translate="none",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display="block",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,"display"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(" "),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf("%")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf("%")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]="0px 0px",a&&(ae(a,h,"xOrigin",f,w),ae(a,h,"yOrigin",d,x),ae(a,h,"xOffset",c,h.xOffset),ae(a,h,"yOffset",p,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,"x",r+"px",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf("rad")?lr:1)-n,f=n+l+"deg";return h&&("short"===(s=a.split("_")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),"cw"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:"ccw"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u="deg",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute("transform"),r.setAttribute("transform",""),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute("transform",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\s,\(]\S/,mr={autoAlpha:"opacity,visibility",scale:"scaleX,scaleY",alpha:"opacity"},gr="transform",vr=gr+"Origin",yr="O,Moz,ms,Ms,Webkit".split(","),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?"ms":0<=n?yr[n]:"")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&"transform"!==e&&~(e=mr[e]).indexOf(",")&&(e=e.split(",")[0]),hr[e]&&"transform"!==e?(n=Pr(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+" "+n.zOrigin+"px"):(n=t.style[e])&&"auto"!==n&&!i&&!~(n+"").indexOf("calc(")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?de(t,e,n,r)+r:n},kr={top:"0%",bottom:"100%",left:"0%",right:"100%",center:"50%"},Or={clearProps:function clearProps(t,e,r,i,n){if("isFromStart"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L="deg",B=getComputedStyle(t),Y=Td(t,vr)||"0";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&("none"===B.translate&&"none"===B.scale&&"none"===B.rotate||(F[gr]=("none"!==B.translate?"translate3d("+(B.translate+" 0 0").split(" ").slice(0,3).join(", ")+") ":"")+("none"!==B.rotate?"rotate("+B.rotate+") ":"")+("none"!==B.scale?"scale("+B.scale.split(" ").join(",")+") ":"")+("none"!==B[gr]?B[gr]:"")),F.scale=F.rotate=F.translate="none"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+"px "+(r.yOrigin-C.y)+"px",""):!e&&t.getAttribute("data-svg-origin"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!me(Td(t,gr)),M&&t.setAttribute("transform",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+"px",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+"px",r.z=a+"px",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+"px",(r.zOrigin=parseFloat(Y.split(" ")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(" "))[0]+" "+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Rr(t,e)},Sr="0deg",zr="0px",Er=") ",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",T="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+="perspective("+_+Er),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?"translate3d("+a+", "+s+", "+o+") ":"translate("+a+", "+s+Er),u!==Sr&&(y+="rotate("+u+Er),h!==Sr&&(y+="rotateY("+h+Er),l!==Sr&&(y+="rotateX("+l+Er),f===Sr&&d===Sr||(y+="skew("+f+", "+d+Er),1===c&&1===p||(y+="scale("+c+", "+p+Er),g.style[gr]=y||"translate(0, 0)"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(x=de(g,"x",l,"px"),k=de(g,"y",f,"px")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s="matrix("+r+","+i+","+n+","+a+","+x+","+k+")",g.setAttribute("transform",s),w&&(g.style[gr]=s)};ja("padding,margin,Width,Radius",function(e,r){var t="Right",i="Bottom",n="Left",o=(r<3?["Top",t,i,n]:["Top"+n,"Top"+t,i+t,i+n]).map(function(t){return r<2?e+t:"border"+t+e});Or[1<r?"border"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(" ")).split(a[0]).length?a[0]:s;a=(i+"").split(" "),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:"css",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if("autoRound"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],"function"===l&&(l=typeof(o=o.call(i,n,t,a))),"string"===l&&~o.indexOf("random(")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if("--"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+"").trim(),o+="",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,"setProperty",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if("undefined"!==l){if(O&&d in O?(s="function"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf("random(")&&(s=rb(s)),_a(s+"")||"auto"===s||(s+=N.units[d]||_a(xr(t,d))||""),"="===(s+"").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_="string"===l&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&("autoAlpha"===d&&(1===h&&"hidden"===xr(t,"visibility")&&u&&(h=0),b.push("visibility",0,k.visibility),ae(this,k,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==d&&"transform"!==d&&~(d=mr[d]).indexOf(",")&&(d=d.split(",")[0])),m=d in hr){if(this.styles.save(d),w=o,"string"===l&&"var(--"===o.substring(0,6)){if("calc("===(o=Td(t,o.substring(4,o.indexOf(")")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,"perspective"),M?t.style.perspective=M:_d(t,"perspective")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===d)this._pt=new we(this._pt,v,"scaleY",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push("scaleY",d),d+="X";else{if("transformOrigin"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(" ")[2])||0)!==v.zOrigin&&ae(this,v,"zOrigin",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if("svgOrigin"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if("smoothOrigin"===d){ae(this,v,"smooth",v.smooth,o);continue}if("force3D"===d){v[d]=o;continue}if("transform"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+"").substr((h+"").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||"px"!==p&&"zIndex"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if("parseTransform"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):"function"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(",")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,"x"))?r&&Ve===r?"scale"===e?Id:Hd:(Ve=r||{})&&("scale"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf("-")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Lr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]="deg",Cr[t]=1}),mr[Br[13]]=Ir+","+Lr,ja("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",function(t){var e=t.split(":");mr[e[1]]=Br[e[0]]}),ja("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",function(t){N.units[t]="px"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});
+
diff --git a/videos/projects/bench-dips/assets/music.mp3 b/videos/projects/bench-dips/assets/music.mp3
new file mode 100644
index 0000000..ae96781
Binary files /dev/null and b/videos/projects/bench-dips/assets/music.mp3 differ
diff --git a/videos/projects/bench-dips/compositions/counter.html b/videos/projects/bench-dips/compositions/counter.html
new file mode 100644
index 0000000..963ffb3
--- /dev/null
+++ b/videos/projects/bench-dips/compositions/counter.html
@@ -0,0 +1,22 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Oswald", sans-serif; color: #eaf2ff; }
+    .rep { position: absolute; right: 192px; top: 108px; text-align: right; font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; }
+    .rep .lbl { font-family: "Inter", sans-serif; font-weight: 600; font-size: 28px; letter-spacing: 0.22em; margin-right: 18px; vertical-align: middle; }
+    .rep .n { color: var(--accent, #ff7a45); font-size: 96px; vertical-align: middle; }
+    .rep .of { opacity: 0.7; font-size: 48px; vertical-align: middle; }
+  </style>
+  <div id="root" data-composition-id="counter" data-width="1920" data-height="1080">
+    <div id="rep1" class="clip rep" data-start="2.4" data-duration="3.2" data-track-index="0"><span class="lbl">REP</span><span class="n">1</span> <span class="of">/ 3</span></div>
+    <div id="rep2" class="clip rep" data-start="5.6" data-duration="3.2" data-track-index="0"><span class="lbl">REP</span><span class="n">2</span> <span class="of">/ 3</span></div>
+    <div id="rep3" class="clip rep" data-start="8.8" data-duration="3.2" data-track-index="0"><span class="lbl">REP</span><span class="n">3</span> <span class="of">/ 3</span></div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    [["rep1", 2.4], ["rep2", 5.6], ["rep3", 8.8]].forEach(([id, s]) => {
+      tl.fromTo("#" + id, { opacity: 0, filter: "blur(6px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.2, ease: "power4.out" }, s);
+      tl.to("#" + id, { opacity: 0, filter: "blur(6px)", duration: 0.12, ease: "power3.in" }, s + 3.2 - 0.17);
+    });
+    window.__timelines["counter"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bench-dips/compositions/stage.html b/videos/projects/bench-dips/compositions/stage.html
new file mode 100644
index 0000000..156bee6
--- /dev/null
+++ b/videos/projects/bench-dips/compositions/stage.html
@@ -0,0 +1,126 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; background: #050b1a; }
+    #stage-svg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
+  </style>
+  <div id="root" data-composition-id="stage" data-width="1920" data-height="1080">
+    <svg id="stage-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="st-smoke"><stop offset="0" stop-color="#4a7bd6" stop-opacity="0.34"/><stop offset="1" stop-color="#4a7bd6" stop-opacity="0"/></radialGradient>
+        <linearGradient id="st-floor" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0d2147"/><stop offset="1" stop-color="#050b1a"/></linearGradient>
+        <radialGradient id="st-pool"><stop offset="0" stop-color="#3b82f6" stop-opacity="0.35"/><stop offset="1" stop-color="#3b82f6" stop-opacity="0"/></radialGradient>
+        <filter id="st-glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter>
+      </defs>
+      <rect width="1920" height="1080" fill="#050b1a"/>
+      <g id="st-smokes" data-layout-ignore></g>
+      <polygon points="0,780 1920,780 1920,1080 0,1080" fill="url(#st-floor)"/>
+      <g id="st-grid" data-layout-ignore stroke="#3b82f6" stroke-opacity="0.16" fill="none"></g>
+      <line x1="0" y1="780" x2="1920" y2="780" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="2"/>
+      <g id="st-world" transform="translate(960 780) scale(1.2) translate(-960 -780)">
+      <ellipse cx="1000" cy="800" rx="720" ry="46" fill="url(#st-pool)"/>
+      <g id="st-bench">
+        <line x1="600" y1="625" x2="600" y2="780" stroke="#16306b" stroke-width="26" stroke-linecap="round"/>
+        <line x1="920" y1="625" x2="920" y2="780" stroke="#16306b" stroke-width="26" stroke-linecap="round"/>
+        <rect x="530" y="591" width="460" height="36" rx="12" fill="#1c3f8a"/>
+        <rect x="534" y="593" width="452" height="8" rx="4" fill="#7fb2ff" fill-opacity="0.55"/>
+      </g>
+      <g id="st-body"></g>
+      </g>
+    </svg>
+  </div>
+  <script>
+    const NS = "http://www.w3.org/2000/svg";
+    const svg = document.getElementById("stage-svg");
+    const mk = (tag, attrs, parent) => { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); (parent || svg).appendChild(e); return e; };
+
+    // static atmosphere: floor grid + drifting smoke blobs (positions are a function of time below)
+    const grid = document.getElementById("st-grid");
+    for (let i = -12; i <= 12; i++) mk("line", { x1: 960 + i * 150, y1: 780, x2: 960 + i * 520, y2: 1080 }, grid);
+    for (let k = 1; k <= 7; k++) { const y = 780 + 300 * Math.pow(k / 7, 1.7); mk("line", { x1: 0, y1: y, x2: 1920, y2: y }, grid); }
+    const smokes = [[300, 300, 520, 0], [900, 220, 600, 1.7], [1500, 330, 560, 3.1], [1750, 560, 480, 4.6]].map(([x, y, r, ph]) =>
+      ({ el: mk("circle", { cx: x, cy: y, r, fill: "url(#st-smoke)" }, document.getElementById("st-smokes")), x, y, ph }));
+
+    // body parts: each limb = dark outline + mid fill + thin highlight, so it reads as a glassy tube
+    const body = document.getElementById("st-body");
+    function limb(w, mid) {
+      const o = mk("line", { stroke: "#0b1d44", "stroke-width": w, "stroke-linecap": "round" }, body);
+      const m = mk("line", { stroke: mid || "#2a55b8", "stroke-width": w * 0.78, "stroke-linecap": "round" }, body);
+      const h = mk("line", { stroke: "#8fbcff", "stroke-opacity": 0.55, "stroke-width": w * 0.16, "stroke-linecap": "round" }, body);
+      return (a, b) => {
+        for (const e of [o, m]) { e.setAttribute("x1", a.x); e.setAttribute("y1", a.y); e.setAttribute("x2", b.x); e.setAttribute("y2", b.y); }
+        const dx = -w * 0.16, dy = -w * 0.2;
+        h.setAttribute("x1", a.x + dx); h.setAttribute("y1", a.y + dy); h.setAttribute("x2", b.x + dx); h.setAttribute("y2", b.y + dy);
+      };
+    }
+    const glowLine = (w) => mk("line", { stroke: "#ff7a45", "stroke-width": w, "stroke-linecap": "round" }, body);
+
+    const setShin = limb(54), setThigh = limb(76), setShorts = limb(102, "#10172f"), setTorso = limb(112, "#27499f"),
+          setUpper = limb(52), setFore = limb(42);
+    const shoe = mk("rect", { width: 92, height: 24, rx: 11, fill: "#0b1226", stroke: "#8fbcff", "stroke-opacity": 0.6, "stroke-width": 2 }, body);
+    const head = mk("circle", { r: 44, fill: "#2f5bbf", stroke: "#8fbcff", "stroke-opacity": 0.7, "stroke-width": 2 }, body);
+    const neck = limb(30, "#2a55b8");
+    const hand = mk("ellipse", { rx: 34, ry: 12, fill: "#7fa9f0", stroke: "#0b1d44", "stroke-width": 2 }, body);
+    // orange muscle glow: triceps on the upper arm, plus shoulder and chest
+    const tri = glowLine(26), triGlow = glowLine(40); triGlow.setAttribute("filter", "url(#st-glow)");
+    const delt = mk("circle", { r: 30, fill: "#ff7a45" }, body); delt.setAttribute("filter", "url(#st-glow)");
+    const chest = mk("circle", { r: 34, fill: "#ff7a45" }, body); chest.setAttribute("filter", "url(#st-glow)");
+    const deltCore = mk("circle", { r: 16, fill: "#ffb089" }, body);
+
+    // geometry (px). Real proportions: arm about 60 cm at 4.2 px/cm, bench 45 cm high.
+    const GY = 780, HAND = { x: 940, y: 581 };
+    const Lu = 126, Lf = 118, T = 210, Lleg = 378, lean = 6 * Math.PI / 180, DROP = 67;
+    const reach = 0.985 * (Lu + Lf);
+    const shTop = { x: HAND.x + 48, y: HAND.y - Math.sqrt(reach * reach - 48 * 48) };
+    const hip0 = { x: shTop.x + T * Math.sin(lean), y: shTop.y + T * Math.cos(lean) };
+    const ankle = { y: GY - 26 };
+    ankle.x = hip0.x + Math.sqrt(Lleg * Lleg - (ankle.y - hip0.y) ** 2);   // heels stay planted
+
+    // reps: set-up hold to 2.4 s, then 3 reps of 3.2 s (1.7 s down, 1.5 s up), then a hold
+    const REP0 = 2.4, REP = 3.2, DOWN = 1.7, UP = 1.5;
+    const ease = (x) => 0.5 - 0.5 * Math.cos(Math.PI * Math.min(1, Math.max(0, x)));
+    function phase(t) {
+      for (let k = 0; k < 3; k++) {
+        const u = t - (REP0 + REP * k);
+        if (u >= 0 && u < DOWN) return { p: ease(u / DOWN), push: 0 };
+        if (u >= DOWN && u < REP) { const x = (u - DOWN) / UP; return { p: 1 - ease(x), push: Math.sin(Math.PI * x) }; }
+      }
+      return { p: 0, push: 0 };
+    }
+
+    function draw(t) {
+      const { p, push } = phase(t);
+      const hipY = hip0.y + DROP * p;
+      const hip = { x: ankle.x - Math.sqrt(Lleg * Lleg - (ankle.y - hipY) ** 2), y: hipY };
+      const sh = { x: hip.x - T * Math.sin(lean), y: hip.y - T * Math.cos(lean) };
+      // two-bone arm IK: hand is planted on the bench, elbow bends back (toward the bench)
+      const dx = HAND.x - sh.x, dy = HAND.y - sh.y, d = Math.hypot(dx, dy), dd = Math.min(d, (Lu + Lf) * 0.999);
+      const a = (Lu * Lu - Lf * Lf + dd * dd) / (2 * dd), h = Math.sqrt(Math.max(0, Lu * Lu - a * a));
+      const ux = dx / d, uy = dy / d;
+      const e1 = { x: sh.x + ux * a - uy * h, y: sh.y + uy * a + ux * h }, e2 = { x: sh.x + ux * a + uy * h, y: sh.y + uy * a - ux * h };
+      const el = e1.x < e2.x ? e1 : e2;
+      const knee = { x: hip.x + (ankle.x - hip.x) * 0.52, y: hip.y + (ankle.y - hip.y) * 0.52 - 7 };
+      setShin(knee, ankle); setThigh(hip, knee);
+      setShorts(hip, { x: hip.x + (knee.x - hip.x) * 0.45, y: hip.y + (knee.y - hip.y) * 0.45 });
+      shoe.setAttribute("x", ankle.x - 26); shoe.setAttribute("y", ankle.y + 4);
+      setTorso(hip, sh);
+      const hd = { x: sh.x + 18, y: sh.y - 74 };
+      head.setAttribute("cx", hd.x); head.setAttribute("cy", hd.y); neck(sh, { x: hd.x - 4, y: hd.y + 18 });
+      setUpper(sh, el); setFore(el, HAND);
+      hand.setAttribute("cx", HAND.x - 4); hand.setAttribute("cy", HAND.y + 4);
+      // glow follows the work: it swells while pressing up and stays warm at the bottom
+      const g = 0.22 + 0.78 * push + 0.25 * p * (1 - push);
+      const tA = { x: sh.x + (el.x - sh.x) * 0.3, y: sh.y + (el.y - sh.y) * 0.3 }, tB = { x: sh.x + (el.x - sh.x) * 0.88, y: sh.y + (el.y - sh.y) * 0.88 };
+      for (const e of [tri, triGlow]) { e.setAttribute("x1", tA.x); e.setAttribute("y1", tA.y); e.setAttribute("x2", tB.x); e.setAttribute("y2", tB.y); }
+      tri.setAttribute("stroke-opacity", Math.min(1, 0.25 + g * 0.8)); triGlow.setAttribute("stroke-opacity", Math.min(1, g));
+      delt.setAttribute("cx", sh.x + 4); delt.setAttribute("cy", sh.y + 8); delt.setAttribute("fill-opacity", 0.15 + 0.7 * g);
+      deltCore.setAttribute("cx", sh.x + 4); deltCore.setAttribute("cy", sh.y + 8); deltCore.setAttribute("fill-opacity", 0.1 + 0.6 * g);
+      chest.setAttribute("cx", sh.x + 30); chest.setAttribute("cy", sh.y + 62); chest.setAttribute("fill-opacity", 0.1 + 0.55 * g);
+      for (const s of smokes) { s.el.setAttribute("cx", s.x + 60 * Math.sin(t * 0.35 + s.ph)); s.el.setAttribute("cy", s.y + 24 * Math.sin(t * 0.27 + s.ph * 1.3)); }
+    }
+    draw(0);
+    const tl = gsap.timeline({ paused: true });
+    const clock = { t: 0 };
+    tl.to(clock, { t: 14.2, duration: 14.2, ease: "none", onUpdate: () => draw(clock.t) }, 0);
+    window.__timelines["stage"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bench-dips/compositions/tips.html b/videos/projects/bench-dips/compositions/tips.html
new file mode 100644
index 0000000..9dab4b5
--- /dev/null
+++ b/videos/projects/bench-dips/compositions/tips.html
@@ -0,0 +1,42 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Inter", sans-serif; color: #eaf2ff; }
+    .tip { position: absolute; left: 192px; bottom: 108px; width: 1100px; }
+    .tip .num { display: inline-block; font-weight: 700; font-size: 28px; letter-spacing: 0.16em; color: var(--accent, #ff7a45); margin-right: 20px; }
+    .tip h2 { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 76px; line-height: 1.02; letter-spacing: 0.01em; }
+    .tip p { margin-top: 10px; font-weight: 500; font-size: 32px; line-height: 1.25; }
+  </style>
+  <div id="root" data-composition-id="tips" data-width="1920" data-height="1080">
+    <div id="tip1" class="clip tip" data-start="0.3" data-duration="2.0" data-track-index="0">
+      <h2>SET UP</h2><p>Hands on the bench edge</p>
+    </div>
+    <div id="tip2" class="clip tip" data-start="2.4" data-duration="1.9" data-track-index="0">
+      <h2>LOWER SLOWLY</h2><p>Elbows back to 90°</p>
+    </div>
+    <div id="tip3" class="clip tip" data-start="4.4" data-duration="1.7" data-track-index="0">
+      <h2>PUSH UP</h2><p>Press through your palms</p>
+    </div>
+    <div id="tip4" class="clip tip" data-start="6.2" data-duration="2.5" data-track-index="0">
+      <h2>BACK CLOSE TO THE BENCH</h2><p>Hips stay near the edge</p>
+    </div>
+    <div id="tip5" class="clip tip" data-start="8.9" data-duration="3.0" data-track-index="0">
+      <h2>SHOULDERS DOWN</h2><p>Keep them away from your ears</p>
+    </div>
+    <div id="tip6" class="clip tip" data-start="12.1" data-duration="2.1" data-track-index="0">
+      <h2>NICE WORK</h2><p>3 reps done. Rest, then go again</p>
+    </div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    // Each tip blurs in, holds, and leaves faster than it arrived. Animate the children, never the .clip.
+    [["tip1", 0.3, 2.0], ["tip2", 2.4, 1.9], ["tip3", 4.4, 1.7], ["tip4", 6.2, 2.5], ["tip5", 8.9, 3.0], ["tip6", 12.1, 2.1]].forEach(([id, s, d]) => {
+      const kids = "#" + id + " > *";
+      tl.fromTo(kids, { opacity: 0, filter: "blur(8px)" },
+        { opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power4.out", stagger: 0.06 }, s);
+      if (id !== "tip6") {
+        tl.to(kids, { opacity: 0, filter: "blur(8px)", duration: 0.14, ease: "power3.in" }, s + d - 0.2);
+      }
+    });
+    window.__timelines["tips"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bench-dips/compositions/title.html b/videos/projects/bench-dips/compositions/title.html
new file mode 100644
index 0000000..d573e31
--- /dev/null
+++ b/videos/projects/bench-dips/compositions/title.html
@@ -0,0 +1,33 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Inter", sans-serif; color: #eaf2ff; }
+    #title-block { position: absolute; left: 192px; top: 108px; }
+    #title-text { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 96px; line-height: 1; letter-spacing: 0.01em; }
+    #title-text .w { display: inline-block; margin-right: 24px; }
+    #title-text .hot { color: var(--accent, #ff7a45); }
+    #title-muscles { margin-top: 18px; font-weight: 600; font-size: 30px; letter-spacing: 0.22em; }
+    #title-rule { width: 96px; height: 4px; margin-top: 22px; background: var(--accent, #ff7a45); transform-origin: left center; }
+  </style>
+  <div
+    id="root"
+    data-composition-id="title"
+    data-width="1920"
+    data-height="1080"
+    data-composition-variables='[{"id":"exercise","type":"string","label":"Exercise (first word)","default":"BENCH"},{"id":"exercise2","type":"string","label":"Exercise (second word)","default":"DIPS"},{"id":"muscles","type":"string","label":"Muscles worked","default":"TRICEPS · SHOULDERS · CHEST"},{"id":"accent","type":"color","label":"Accent colour","default":"#ff7a45"}]'
+  >
+    <div id="title-block">
+      <h1 id="title-text"><span class="w" data-var-text="exercise">BENCH</span><span class="w hot" data-var-text="exercise2">DIPS</span></h1>
+      <div id="title-muscles" data-var-text="muscles">TRICEPS · SHOULDERS · CHEST</div>
+      <div id="title-rule"></div>
+    </div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    tl.fromTo("#title-text .w", { opacity: 0, filter: "blur(8px)" },
+      { opacity: 1, filter: "blur(0px)", duration: 0.2, ease: "power4.out", stagger: 0.09 }, 0.3);
+    tl.fromTo("#title-muscles", { opacity: 0, filter: "blur(6px)" },
+      { opacity: 1, filter: "blur(0px)", duration: 0.3, ease: "power3.out" }, 0.65);
+    tl.fromTo("#title-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.5, ease: "expo.out" }, 0.7);
+    window.__timelines["title"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bench-dips/compositions/wash.html b/videos/projects/bench-dips/compositions/wash.html
new file mode 100644
index 0000000..753a3fb
--- /dev/null
+++ b/videos/projects/bench-dips/compositions/wash.html
@@ -0,0 +1,15 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; pointer-events: none; }
+    #wash-top { position: absolute; left: 0; top: 0; width: 100%; height: 420px; background: linear-gradient(to bottom, rgba(5,11,26,0.78), rgba(5,11,26,0)); }
+    #wash-bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: 440px; background: linear-gradient(to top, rgba(5,11,26,0.82), rgba(5,11,26,0)); }
+  </style>
+  <div id="root" data-composition-id="wash" data-width="1920" data-height="1080">
+    <div id="wash-top" data-layout-ignore></div>
+    <div id="wash-bottom" data-layout-ignore></div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    window.__timelines["wash"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bench-dips/hyperframes.json b/videos/projects/bench-dips/hyperframes.json
new file mode 100644
index 0000000..dc9ec2e
--- /dev/null
+++ b/videos/projects/bench-dips/hyperframes.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  },
+  "media": {
+    "autoProxy": true
+  }
+}
diff --git a/videos/projects/bench-dips/index.html b/videos/projects/bench-dips/index.html
new file mode 100644
index 0000000..6fd90a6
--- /dev/null
+++ b/videos/projects/bench-dips/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="assets/gsap.min.js"></script>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #050b1a; }
+      #root { position: relative; width: 1920px; height: 1080px; background: #050b1a; }
+      .scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
+    </style>
+  </head>
+  <body>
+    <div id="root" data-composition-id="main" data-start="0" data-duration="14.2" data-width="1920" data-height="1080">
+      <div id="stage" class="scene" style="z-index: 1" data-composition-id="stage" data-composition-src="compositions/stage.html" data-start="0" data-duration="14.2" data-track-index="0" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="wash" class="scene" style="z-index: 2" data-composition-id="wash" data-composition-src="compositions/wash.html" data-start="0" data-duration="14.2" data-track-index="1" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="title" class="scene" style="z-index: 5" data-composition-id="title" data-composition-src="compositions/title.html" data-start="0" data-duration="14.2" data-track-index="2" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="counter" class="scene" style="z-index: 5" data-composition-id="counter" data-composition-src="compositions/counter.html" data-start="0" data-duration="14.2" data-track-index="3" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="tips" class="scene" style="z-index: 5" data-composition-id="tips" data-composition-src="compositions/tips.html" data-start="0" data-duration="14.2" data-track-index="4" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <audio id="music" src="assets/music.mp3" data-start="0" data-duration="14.2" data-track-index="5" data-volume="1" data-fade-in="0.15" data-fade-out="0.5"></audio>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+      tl.seek(0);
+    </script>
+  </body>
+</html>
diff --git a/videos/projects/bench-dips/meta.json b/videos/projects/bench-dips/meta.json
new file mode 100644
index 0000000..ea988fc
--- /dev/null
+++ b/videos/projects/bench-dips/meta.json
@@ -0,0 +1,5 @@
+{
+  "id": "app",
+  "name": "app",
+  "createdAt": "2026-10-21T23:35:06.896Z"
+}
\ No newline at end of file
diff --git a/videos/projects/bench-dips/package.json b/videos/projects/bench-dips/package.json
new file mode 100644
index 0000000..110f5c5
--- /dev/null
+++ b/videos/projects/bench-dips/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npx --yes hyperframes@0.8.185 preview",
+    "check": "npx --yes hyperframes@0.8.185 check",
+    "render": "npx --yes hyperframes@0.8.185 render",
+    "publish": "npx --yes hyperframes@0.8.185 publish"
+  }
+}
diff --git a/videos/projects/bodyweight-squat/AGENTS.md b/videos/projects/bodyweight-squat/AGENTS.md
new file mode 100644
index 0000000..ef50661
--- /dev/null
+++ b/videos/projects/bodyweight-squat/AGENTS.md
@@ -0,0 +1,104 @@
+# HyperFrames Composition Project
+
+## Skills — read these first
+
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
+
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
+
+> **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
+> its `hyperframes/references/plugin-installation.md` execution rules. Update via
+> the plugin manager, not the standalone commands below.
+>
+> **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev          # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background  # agent-safe persistent Studio preview
+npx hyperframes preview --status      # verify the persistent preview is listening
+npx hyperframes preview --stop        # stop it when review is finished
+npm run check        # lint + runtime + layout + motion + contrast (one command)
+npm run render       # render to MP4
+npm run publish      # publish and get a shareable link
+npx hyperframes lint --verbose  # include info-level findings
+npx hyperframes lint --json     # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **Back from the desktop app.** Once this project was opened in the HyperFrames desktop app, run `npx hyperframes catch-up` before your next change here: it lists what the person asked Framey in the app and which files changed since.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
+## Key Rules
+
+1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+3. Register one paused root timeline per composition on `window.__timelines`:
+   ```js
+   window.__timelines = window.__timelines || {};
+   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+   ```
+   Scene timelines manually added to this root must not be paused. A paused
+   child does not advance when the root is seeked. The runtime activates
+   registered composition siblings, not arbitrary nested scene timelines.
+4. A video with sound keeps it on the `<video>` (`data-has-audio="true"`, no `muted`). Use a separate `<audio>` for music, voiceover, replacement audio, J/L cuts, or audio detached in Studio. Silent footage and b-roll: `muted`.
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/projects/bodyweight-squat/CLAUDE.md b/videos/projects/bodyweight-squat/CLAUDE.md
new file mode 100644
index 0000000..ef50661
--- /dev/null
+++ b/videos/projects/bodyweight-squat/CLAUDE.md
@@ -0,0 +1,104 @@
+# HyperFrames Composition Project
+
+## Skills — read these first
+
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
+
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
+
+> **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
+> its `hyperframes/references/plugin-installation.md` execution rules. Update via
+> the plugin manager, not the standalone commands below.
+>
+> **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev          # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background  # agent-safe persistent Studio preview
+npx hyperframes preview --status      # verify the persistent preview is listening
+npx hyperframes preview --stop        # stop it when review is finished
+npm run check        # lint + runtime + layout + motion + contrast (one command)
+npm run render       # render to MP4
+npm run publish      # publish and get a shareable link
+npx hyperframes lint --verbose  # include info-level findings
+npx hyperframes lint --json     # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **Back from the desktop app.** Once this project was opened in the HyperFrames desktop app, run `npx hyperframes catch-up` before your next change here: it lists what the person asked Framey in the app and which files changed since.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
+## Key Rules
+
+1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+3. Register one paused root timeline per composition on `window.__timelines`:
+   ```js
+   window.__timelines = window.__timelines || {};
+   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+   ```
+   Scene timelines manually added to this root must not be paused. A paused
+   child does not advance when the root is seeked. The runtime activates
+   registered composition siblings, not arbitrary nested scene timelines.
+4. A video with sound keeps it on the `<video>` (`data-has-audio="true"`, no `muted`). Use a separate `<audio>` for music, voiceover, replacement audio, J/L cuts, or audio detached in Studio. Silent footage and b-roll: `muted`.
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/projects/bodyweight-squat/assets/gsap.min.js b/videos/projects/bodyweight-squat/assets/gsap.min.js
new file mode 100644
index 0000000..fde57af
--- /dev/null
+++ b/videos/projects/bodyweight-squat/assets/gsap.min.js
@@ -0,0 +1,11 @@
+/*!
+ * GSAP 3.14.2
+ * https://gsap.com
+ * 
+ * @license Copyright 2025, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license.
+ * @author: Jack Doyle, jack@greensock.com
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(",")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)"__proto__"!==r&&"constructor"!==r&&"prototype"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||"duration"===r&&i||"ease"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,"_first","_last",e._sort?"_start":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S("scrollTrigger",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!("immediateRender"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:""}function cb(t,e){return t&&v(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T("Invalid scope")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T("Invalid scope")||a.createElement("div"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f="auto"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs("y"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);"random"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?"y"===b?d/f:f:Math.max(f,d/f))||0)*("edges"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+"").split(".")[1]||"").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+"").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf("[")+1,r=t.substring(e||7,e?t.indexOf("]"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,"onInterrupt"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if("hsl"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf("="))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o="",u=(t+o).match(Rt),h=e?"hsla(":"rgba(",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+","+t[1]+"%,"+t[2]+"%,"+t[3]:t.join(","))+")"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,"1").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+"0,0,0,0)":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(" ");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+"").split("("),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf("{")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(":"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(","):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,"").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf("(")+1,r=t.indexOf(")"),i=t.indexOf("(",e);return t.substring(e,~i&&i<r?t.indexOf(")",r+1):r)}(t).split(",").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE("",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+("easeIn"===e?".in":"easeOut"===e?".out":".inOut")]=Bt[t+"."+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s="out"===r?Lm:"in"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t="out"===e?Tm:"in"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\([^)]+\)/g,et=/,\s*/g,rt=/(?:-?\.?\d|\.)+/gi,it=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,nt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,at=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,st=/[+-]=-?[.\d]+/,ot=/[^,'"\[\]\s]+/gi,ut=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt="",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return"isFromStart"===e||"isStart"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+"Params"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e="(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b";for(t in Et)e+="|"+t+"\\b";return new RegExp(e+")","gi")}(),Ft=/hsl[a]?\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m="undefined"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?"unshift":"push"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\d.\-M][\d.\-,\s]/,Nt=/["']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja("Linear,Quad,Cubic,Quart,Quint,Strong",function(t,e){var r=e<5?e+1:e;Vb(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb("Elastic",Xb("in"),Xb("out"),Xb()),B=7.5625,Y=1/2.75,Vb("Bounce",function(t){return 1-jn(1-t)},jn),Vb("Expo",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb("Circ",function(t){return-(J(1-t*t)-1)}),Vb("Sine",function(t){return 1===t?1:1-Q(t*W)}),Vb("Back",Yb("in"),Yb("out"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt["quad.out"],ja("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt",function(t){return Tt+=t+","+t+"Params,"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),"nested"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+"Params"]=r),"onUpdate"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,"onRepeat"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if("isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,"onStart"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,"onUpdate",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?"onComplete":"onReverseComplete",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data="isPause",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&"isPause"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf("random(")&&(n=rb(n)),"="===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||""===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):"",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),"boolean"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&"nested"===D.data?D.vars.targets:A,z="auto"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g="none"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:"isStart",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,"onUpdate")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:"isFromStart",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,"get",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf("random(")?rb(t):t},Kt=Tt+"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert",$t={};ja(Kt+",id,stagger,delay,duration,paused,scrollTrigger",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;"number"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):"length"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T("GSAP target "+e+" not found. https://gsap.com",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:"nested",defaults:O||{},targets:P&&"nested"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:"none"})),s._ease=Vt(k.ease||r.ease||"none");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,">")}),s.duration();else{for(l in u={},k)"ease"===l||"easeEach"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&"nested"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,"onStart"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,"onUpdate")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?"onComplete":"onReverseComplete",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&Dt(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]="+=0",Qt(t,s),Ht=0,o?T(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||Ba(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja("staggerTo,staggerFrom,staggerFromTo",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,"_pt"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc("matchMediaInit"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc("matchMediaRevert"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc("matchMedia"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&"nested"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)"isFlip"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?"nested"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add("onMatch",e),s.queries=t)"all"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener("change",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return"native"===e&&(e=""),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]="+=0.1",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||"").split(",").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+" effect requires "+t+" plugin.")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,"get",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja("to,from,fromTo,delayedCall,set,killTweensOf",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:"attr",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||"",(s=this.add(t,"setAttribute",(o||0)+"",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:"endArray",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc("roundProps",ib),Oc("modifiers"),Oc("snap",jb))||Re;te.version=Zt.version=Fe.version="3.14.2",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},"transform"===t)return mr.transform.split(",").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(",")?t.split(",").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute("data-svg-origin"),this.props.push(vr,e,"")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty("translate"),t.removeProperty("scale"),t.removeProperty("rotate"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty("--"===r[t].substr(0,2)?r[t]:r[t].replace(cr,"-$1").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute("data-svg-origin",this.svgo||"")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=" "+a.zOrigin+"px",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(",").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||"http://www.w3.org/1999/xhtml").replace(/^https/,"http"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,"-$1").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||""}function Wd(){(function _windowExists(){return"undefined"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd("div")||{style:{}},Sd("div"),gr=Tr(gr),vr=gr+"Origin",je.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Xe=!!Tr("perspective"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd("svg",r&&r.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=t.cloneNode(!0);n.style.display="block",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,["x","cx","x1"])||0,y:+Yd(e,["y","cy","y1"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?("ms"!==(r=e.substr(0,2))&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty("--"===r?e:e.replace(cr,"-$1").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+"").trim().substr((u+"").length)||"px",l=je.style,f=pr.test(e),d="svg"===t.tagName.toLowerCase(),c=(d?"client":"offset")+(f?"Width":"Height"),p="px"===i,_="%"===i;if(i===h||!u||br[i]||br[h])return u;if("px"===h||p||(u=de(t,e,r,"px")),o=t.getCTM&&$d(t),(_||"%"===h)&&(hr[e]||~e.indexOf("adius")))return n=o?t.getBBox()[f?"width":"height"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?"width":"height"]=100+(p?h:i),a="rem"!==i&&~e.indexOf("adius")||"em"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||"height"!==e&&"width"!==e)!_&&"%"!==h||wr[Td(a,"display")]||(l.position=Td(t,"position")),a===t&&(l.position="static"),a.appendChild(je),n=je[c],a.removeChild(je),l.position="absolute";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||"none"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):"borderColor"===e&&(r=Td(t,"borderTopColor"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+="","var(--"===(i+="").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(")")))),"auto"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:"rgba("!==p.substr(-5)&&"hsla("!==p.substr(-5)||(l=1),d!==(f=u[y++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),"="===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+"").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:",",s:h,c:c-h,m:l&&l<4||"zIndex"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):""}else g.r="display"===e&&"none"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(" "),r=e[0],i=e[1]||"50%";return"top"!==r&&"bottom"!==r&&"left"!==i&&"right"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(" ")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if("all"===o||!0===o)s.cssText="",i=1;else for(n=(o=o.split(",")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r="transformOrigin"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute("transform"),s.scale=s.rotate=s.translate="none",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display="block",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,"display"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(" "),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf("%")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf("%")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]="0px 0px",a&&(ae(a,h,"xOrigin",f,w),ae(a,h,"yOrigin",d,x),ae(a,h,"xOffset",c,h.xOffset),ae(a,h,"yOffset",p,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,"x",r+"px",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf("rad")?lr:1)-n,f=n+l+"deg";return h&&("short"===(s=a.split("_")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),"cw"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:"ccw"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u="deg",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute("transform"),r.setAttribute("transform",""),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute("transform",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\s,\(]\S/,mr={autoAlpha:"opacity,visibility",scale:"scaleX,scaleY",alpha:"opacity"},gr="transform",vr=gr+"Origin",yr="O,Moz,ms,Ms,Webkit".split(","),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?"ms":0<=n?yr[n]:"")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&"transform"!==e&&~(e=mr[e]).indexOf(",")&&(e=e.split(",")[0]),hr[e]&&"transform"!==e?(n=Pr(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+" "+n.zOrigin+"px"):(n=t.style[e])&&"auto"!==n&&!i&&!~(n+"").indexOf("calc(")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?de(t,e,n,r)+r:n},kr={top:"0%",bottom:"100%",left:"0%",right:"100%",center:"50%"},Or={clearProps:function clearProps(t,e,r,i,n){if("isFromStart"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L="deg",B=getComputedStyle(t),Y=Td(t,vr)||"0";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&("none"===B.translate&&"none"===B.scale&&"none"===B.rotate||(F[gr]=("none"!==B.translate?"translate3d("+(B.translate+" 0 0").split(" ").slice(0,3).join(", ")+") ":"")+("none"!==B.rotate?"rotate("+B.rotate+") ":"")+("none"!==B.scale?"scale("+B.scale.split(" ").join(",")+") ":"")+("none"!==B[gr]?B[gr]:"")),F.scale=F.rotate=F.translate="none"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+"px "+(r.yOrigin-C.y)+"px",""):!e&&t.getAttribute("data-svg-origin"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!me(Td(t,gr)),M&&t.setAttribute("transform",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+"px",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+"px",r.z=a+"px",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+"px",(r.zOrigin=parseFloat(Y.split(" ")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(" "))[0]+" "+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Rr(t,e)},Sr="0deg",zr="0px",Er=") ",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",T="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+="perspective("+_+Er),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?"translate3d("+a+", "+s+", "+o+") ":"translate("+a+", "+s+Er),u!==Sr&&(y+="rotate("+u+Er),h!==Sr&&(y+="rotateY("+h+Er),l!==Sr&&(y+="rotateX("+l+Er),f===Sr&&d===Sr||(y+="skew("+f+", "+d+Er),1===c&&1===p||(y+="scale("+c+", "+p+Er),g.style[gr]=y||"translate(0, 0)"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(x=de(g,"x",l,"px"),k=de(g,"y",f,"px")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s="matrix("+r+","+i+","+n+","+a+","+x+","+k+")",g.setAttribute("transform",s),w&&(g.style[gr]=s)};ja("padding,margin,Width,Radius",function(e,r){var t="Right",i="Bottom",n="Left",o=(r<3?["Top",t,i,n]:["Top"+n,"Top"+t,i+t,i+n]).map(function(t){return r<2?e+t:"border"+t+e});Or[1<r?"border"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(" ")).split(a[0]).length?a[0]:s;a=(i+"").split(" "),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:"css",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if("autoRound"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],"function"===l&&(l=typeof(o=o.call(i,n,t,a))),"string"===l&&~o.indexOf("random(")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if("--"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+"").trim(),o+="",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,"setProperty",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if("undefined"!==l){if(O&&d in O?(s="function"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf("random(")&&(s=rb(s)),_a(s+"")||"auto"===s||(s+=N.units[d]||_a(xr(t,d))||""),"="===(s+"").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_="string"===l&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&("autoAlpha"===d&&(1===h&&"hidden"===xr(t,"visibility")&&u&&(h=0),b.push("visibility",0,k.visibility),ae(this,k,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==d&&"transform"!==d&&~(d=mr[d]).indexOf(",")&&(d=d.split(",")[0])),m=d in hr){if(this.styles.save(d),w=o,"string"===l&&"var(--"===o.substring(0,6)){if("calc("===(o=Td(t,o.substring(4,o.indexOf(")")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,"perspective"),M?t.style.perspective=M:_d(t,"perspective")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===d)this._pt=new we(this._pt,v,"scaleY",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push("scaleY",d),d+="X";else{if("transformOrigin"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(" ")[2])||0)!==v.zOrigin&&ae(this,v,"zOrigin",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if("svgOrigin"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if("smoothOrigin"===d){ae(this,v,"smooth",v.smooth,o);continue}if("force3D"===d){v[d]=o;continue}if("transform"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+"").substr((h+"").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||"px"!==p&&"zIndex"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if("parseTransform"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):"function"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(",")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,"x"))?r&&Ve===r?"scale"===e?Id:Hd:(Ve=r||{})&&("scale"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf("-")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Lr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]="deg",Cr[t]=1}),mr[Br[13]]=Ir+","+Lr,ja("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",function(t){var e=t.split(":");mr[e[1]]=Br[e[0]]}),ja("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",function(t){N.units[t]="px"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});
+
diff --git a/videos/projects/bodyweight-squat/assets/music.mp3 b/videos/projects/bodyweight-squat/assets/music.mp3
new file mode 100644
index 0000000..ba3b626
Binary files /dev/null and b/videos/projects/bodyweight-squat/assets/music.mp3 differ
diff --git a/videos/projects/bodyweight-squat/compositions/counter.html b/videos/projects/bodyweight-squat/compositions/counter.html
new file mode 100644
index 0000000..937819c
--- /dev/null
+++ b/videos/projects/bodyweight-squat/compositions/counter.html
@@ -0,0 +1,23 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Oswald", sans-serif; color: #eaf2ff; }
+    .rep { position: absolute; right: 192px; top: 108px; text-align: right; font-weight: 700; font-size: 64px; line-height: 1; letter-spacing: 0.04em; white-space: nowrap; }
+    .rep .lbl { font-family: "Inter", sans-serif; font-weight: 600; font-size: 28px; letter-spacing: 0.22em; margin-right: 18px; vertical-align: middle; }
+    .rep .n { color: var(--accent, #ff7a45); font-size: 96px; vertical-align: middle; }
+    .rep .of { opacity: 0.7; font-size: 48px; vertical-align: middle; }
+  </style>
+  <div id="root" data-composition-id="counter" data-width="1920" data-height="1080">
+    <div id="rep1" class="clip rep" data-start="2.4" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">1</span> <span class="of">/ 4</span></div>
+    <div id="rep2" class="clip rep" data-start="5.2" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">2</span> <span class="of">/ 4</span></div>
+    <div id="rep3" class="clip rep" data-start="8.0" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">3</span> <span class="of">/ 4</span></div>
+    <div id="rep4" class="clip rep" data-start="10.8" data-duration="2.8" data-track-index="0"><span class="lbl">REP</span><span class="n">4</span> <span class="of">/ 4</span></div>
+    </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    [["rep1", 2.4], ["rep2", 5.2], ["rep3", 8.0], ["rep4", 10.8]].forEach(([id, s]) => {
+      tl.fromTo("#" + id, { opacity: 0, filter: "blur(6px)" }, { opacity: 1, filter: "blur(0px)", duration: 0.2, ease: "power4.out" }, s);
+      tl.to("#" + id, { opacity: 0, filter: "blur(6px)", duration: 0.12, ease: "power3.in" }, s + 2.8 - 0.17);
+    });
+    window.__timelines["counter"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bodyweight-squat/compositions/stage.html b/videos/projects/bodyweight-squat/compositions/stage.html
new file mode 100644
index 0000000..8c1ff48
--- /dev/null
+++ b/videos/projects/bodyweight-squat/compositions/stage.html
@@ -0,0 +1,112 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; background: #050b1a; }
+    #stage-svg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
+  </style>
+  <div id="root" data-composition-id="stage" data-width="1920" data-height="1080">
+    <svg id="stage-svg" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <radialGradient id="st-smoke"><stop offset="0" stop-color="#4a7bd6" stop-opacity="0.34"/><stop offset="1" stop-color="#4a7bd6" stop-opacity="0"/></radialGradient>
+        <linearGradient id="st-floor" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#0d2147"/><stop offset="1" stop-color="#050b1a"/></linearGradient>
+        <radialGradient id="st-pool"><stop offset="0" stop-color="#3b82f6" stop-opacity="0.35"/><stop offset="1" stop-color="#3b82f6" stop-opacity="0"/></radialGradient>
+        <filter id="st-glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter>
+      </defs>
+      <rect width="1920" height="1080" fill="#050b1a"/>
+      <g id="st-smokes" data-layout-ignore></g>
+      <polygon points="0,780 1920,780 1920,1080 0,1080" fill="url(#st-floor)"/>
+      <g id="st-grid" data-layout-ignore stroke="#3b82f6" stroke-opacity="0.16" fill="none"></g>
+      <line x1="0" y1="780" x2="1920" y2="780" stroke="#60a5fa" stroke-opacity="0.5" stroke-width="2"/>
+      <g id="st-world" transform="translate(960 780) scale(0.85) translate(-960 -780)">
+        <ellipse cx="1250" cy="800" rx="520" ry="42" fill="url(#st-pool)"/>
+        <g id="st-body"></g>
+      </g>
+    </svg>
+  </div>
+  <script>
+    const NS = "http://www.w3.org/2000/svg";
+    const svg = document.getElementById("stage-svg");
+    const mk = (tag, attrs, parent) => { const e = document.createElementNS(NS, tag); for (const k in attrs) e.setAttribute(k, attrs[k]); (parent || svg).appendChild(e); return e; };
+
+    const grid = document.getElementById("st-grid");
+    for (let i = -12; i <= 12; i++) mk("line", { x1: 960 + i * 150, y1: 780, x2: 960 + i * 520, y2: 1080 }, grid);
+    for (let k = 1; k <= 7; k++) { const y = 780 + 300 * Math.pow(k / 7, 1.7); mk("line", { x1: 0, y1: y, x2: 1920, y2: y }, grid); }
+    const smokes = [[300, 300, 520, 0], [900, 220, 600, 1.7], [1500, 330, 560, 3.1], [1750, 560, 480, 4.6]].map(([x, y, r, ph]) =>
+      ({ el: mk("circle", { cx: x, cy: y, r, fill: "url(#st-smoke)" }, document.getElementById("st-smokes")), x, y, ph }));
+
+    const body = document.getElementById("st-body");
+    function limb(w, mid) {
+      const o = mk("line", { stroke: "#0b1d44", "stroke-width": w, "stroke-linecap": "round" }, body);
+      const m = mk("line", { stroke: mid || "#2a55b8", "stroke-width": w * 0.78, "stroke-linecap": "round" }, body);
+      const h = mk("line", { stroke: "#8fbcff", "stroke-opacity": 0.55, "stroke-width": w * 0.16, "stroke-linecap": "round" }, body);
+      return (a, b) => {
+        for (const e of [o, m]) { e.setAttribute("x1", a.x); e.setAttribute("y1", a.y); e.setAttribute("x2", b.x); e.setAttribute("y2", b.y); }
+        const dx = -w * 0.16, dy = -w * 0.2;
+        h.setAttribute("x1", a.x + dx); h.setAttribute("y1", a.y + dy); h.setAttribute("x2", b.x + dx); h.setAttribute("y2", b.y + dy);
+      };
+    }
+    const glowLine = (w) => mk("line", { stroke: "#ff7a45", "stroke-width": w, "stroke-linecap": "round" }, body);
+    const glowDot = (r) => { const c = mk("circle", { r, fill: "#ff7a45" }, body); c.setAttribute("filter", "url(#st-glow)"); return c; };
+
+    const setShin = limb(58), setThigh = limb(84), setShorts = limb(108, "#10172f"), setTorso = limb(112, "#27499f"),
+          setUpper = limb(46), setFore = limb(38), neck = limb(30);
+    const shoe = mk("rect", { width: 104, height: 26, rx: 12, fill: "#0b1226", stroke: "#8fbcff", "stroke-opacity": 0.6, "stroke-width": 2 }, body);
+    const head = mk("circle", { r: 44, fill: "#2f5bbf", stroke: "#8fbcff", "stroke-opacity": 0.7, "stroke-width": 2 }, body);
+    const hand = mk("circle", { r: 20, fill: "#7fa9f0", stroke: "#0b1d44", "stroke-width": 2 }, body);
+    const quad = glowLine(34), quadGlow = glowLine(48); quadGlow.setAttribute("filter", "url(#st-glow)");
+    const glute = glowDot(46), core = glowDot(34);
+
+    // geometry (px at scale 1): feet planted, joints worked out from the heels up
+    const AX = 1240, ANK = { x: AX, y: 754 };
+    const Ls = 185, Lt = 193, T = 218, Lu = 126, Lf = 118;
+    const A1 = 30 * Math.PI / 180, A2 = 90 * Math.PI / 180, A3 = 40 * Math.PI / 180;   // shin lean, thigh drop, torso lean at the bottom
+
+    // 4 reps of 2.8 s (1.5 s down, 1.3 s up) after a 2.4 s set-up
+    const REP0 = 2.4, REP = 2.8, DOWN = 1.5, UP = 1.3, REPS = 4;
+    const ease = (x) => 0.5 - 0.5 * Math.cos(Math.PI * Math.min(1, Math.max(0, x)));
+    function phase(t) {
+      for (let k = 0; k < REPS; k++) {
+        const u = t - (REP0 + REP * k);
+        if (u >= 0 && u < DOWN) return { p: ease(u / DOWN), push: 0 };
+        if (u >= DOWN && u < REP) { const x = (u - DOWN) / UP; return { p: 1 - ease(x), push: Math.sin(Math.PI * x) }; }
+      }
+      return { p: 0, push: 0 };
+    }
+
+    function draw(t) {
+      const { p, push } = phase(t);
+      const a1 = A1 * p, a2 = A2 * p, a3 = A3 * Math.pow(p, 0.85);
+      const knee = { x: ANK.x + Ls * Math.sin(a1), y: ANK.y - Ls * Math.cos(a1) };
+      const hip = { x: knee.x - Lt * Math.sin(a2), y: knee.y - Lt * Math.cos(a2) };
+      const sh = { x: hip.x + T * Math.sin(a3), y: hip.y - T * Math.cos(a3) };
+      // arms reach straight forward for balance; elbow bends slightly downward
+      const tgt = { x: sh.x + 0.97 * (Lu + Lf), y: sh.y + 10 };
+      const dx = tgt.x - sh.x, dy = tgt.y - sh.y, d = Math.hypot(dx, dy);
+      const a = (Lu * Lu - Lf * Lf + d * d) / (2 * d), h = Math.sqrt(Math.max(0, Lu * Lu - a * a)), ux = dx / d, uy = dy / d;
+      const e1 = { x: sh.x + ux * a - uy * h, y: sh.y + uy * a + ux * h }, e2 = { x: sh.x + ux * a + uy * h, y: sh.y + uy * a - ux * h };
+      const el = e1.y > e2.y ? e1 : e2;
+      setShin(ANK, knee); setThigh(knee, hip);
+      setShorts(hip, { x: hip.x + (knee.x - hip.x) * 0.5, y: hip.y + (knee.y - hip.y) * 0.5 });
+      shoe.setAttribute("x", ANK.x - 36); shoe.setAttribute("y", ANK.y + 2);
+      setTorso(hip, sh);
+      const hd = { x: sh.x + Math.sin(a3) * 74 + 16, y: sh.y - Math.cos(a3) * 74 };
+      head.setAttribute("cx", hd.x); head.setAttribute("cy", hd.y); neck(sh, { x: hd.x - 6, y: hd.y + 20 });
+      setUpper(sh, el); setFore(el, tgt);
+      hand.setAttribute("cx", tgt.x + 6); hand.setAttribute("cy", tgt.y);
+      // glow follows the work: strongest while driving up, warm at the bottom
+      const g = 0.22 + 0.78 * push + 0.3 * p * (1 - push);
+      const qa = { x: knee.x + (hip.x - knee.x) * 0.15, y: knee.y + (hip.y - knee.y) * 0.15 }, qb = { x: knee.x + (hip.x - knee.x) * 0.8, y: knee.y + (hip.y - knee.y) * 0.8 };
+      // sit the glow on the front of the thigh (rotate the hip-to-knee direction by -90 degrees)
+      const tx = knee.x - hip.x, ty = knee.y - hip.y, tn = Math.hypot(tx, ty), fx = (ty / tn) * 13, fy = (-tx / tn) * 13;
+      for (const e of [quad, quadGlow]) { e.setAttribute("x1", qa.x + fx); e.setAttribute("y1", qa.y + fy); e.setAttribute("x2", qb.x + fx); e.setAttribute("y2", qb.y + fy); }
+      quad.setAttribute("stroke-opacity", Math.min(1, 0.25 + g * 0.8)); quadGlow.setAttribute("stroke-opacity", Math.min(1, g));
+      glute.setAttribute("cx", hip.x - 34); glute.setAttribute("cy", hip.y + 6); glute.setAttribute("fill-opacity", 0.12 + 0.7 * g);
+      core.setAttribute("cx", (hip.x + sh.x) / 2 + 26); core.setAttribute("cy", (hip.y + sh.y) / 2); core.setAttribute("fill-opacity", 0.08 + 0.45 * g);
+      for (const s of smokes) { s.el.setAttribute("cx", s.x + 60 * Math.sin(t * 0.35 + s.ph)); s.el.setAttribute("cy", s.y + 24 * Math.sin(t * 0.27 + s.ph * 1.3)); }
+    }
+    draw(0);
+    const tl = gsap.timeline({ paused: true });
+    const clock = { t: 0 };
+    tl.to(clock, { t: 16.0, duration: 16.0, ease: "none", onUpdate: () => draw(clock.t) }, 0);
+    window.__timelines["stage"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bodyweight-squat/compositions/tips.html b/videos/projects/bodyweight-squat/compositions/tips.html
new file mode 100644
index 0000000..6fe2450
--- /dev/null
+++ b/videos/projects/bodyweight-squat/compositions/tips.html
@@ -0,0 +1,45 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Inter", sans-serif; color: #eaf2ff; }
+    .tip { position: absolute; left: 192px; bottom: 108px; width: 1100px; }
+    .tip .num { display: inline-block; font-weight: 700; font-size: 28px; letter-spacing: 0.16em; color: var(--accent, #ff7a45); margin-right: 20px; }
+    .tip h2 { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 76px; line-height: 1.02; letter-spacing: 0.01em; }
+    .tip p { margin-top: 10px; font-weight: 500; font-size: 32px; line-height: 1.25; }
+  </style>
+  <div id="root" data-composition-id="tips" data-width="1920" data-height="1080">
+    <div id="tip1" class="clip tip" data-start="0.3" data-duration="2.0" data-track-index="0">
+      <h2>SET UP</h2><p>Feet shoulder-width apart</p>
+    </div>
+    <div id="tip2" class="clip tip" data-start="2.4" data-duration="2.0" data-track-index="0">
+      <h2>SIT BACK AND DOWN</h2><p>Knees follow your toes</p>
+    </div>
+    <div id="tip3" class="clip tip" data-start="4.5" data-duration="1.7" data-track-index="0">
+      <h2>DRIVE UP</h2><p>Press through heels</p>
+    </div>
+    <div id="tip4" class="clip tip" data-start="6.3" data-duration="2.6" data-track-index="0">
+      <h2>CHEST UP</h2><p>Keep your back straight</p>
+    </div>
+    <div id="tip5" class="clip tip" data-start="9.0" data-duration="2.9" data-track-index="0">
+      <h2>CORE TIGHT</h2><p>Brace your core</p>
+    </div>
+    <div id="tip6" class="clip tip" data-start="12.0" data-duration="1.6" data-track-index="0">
+      <h2>FINISH STRONG</h2><p>Last rep</p>
+    </div>
+    <div id="tip7" class="clip tip" data-start="13.7" data-duration="2.3" data-track-index="0">
+      <h2>GREAT SET</h2><p>4 reps done. Go again</p>
+    </div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    // Each tip blurs in, holds, and leaves faster than it arrived. Animate the children, never the .clip.
+    [["tip1", 0.3, 2.0], ["tip2", 2.4, 2.0], ["tip3", 4.5, 1.7], ["tip4", 6.3, 2.6], ["tip5", 9.0, 2.9], ["tip6", 12.0, 1.6], ["tip7", 13.7, 2.3]].forEach(([id, s, d]) => {
+      const kids = "#" + id + " > *";
+      tl.fromTo(kids, { opacity: 0, filter: "blur(8px)" },
+        { opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power4.out", stagger: 0.06 }, s);
+      if (id !== "tip7") {
+        tl.to(kids, { opacity: 0, filter: "blur(8px)", duration: 0.14, ease: "power3.in" }, s + d - 0.2);
+      }
+    });
+    window.__timelines["tips"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bodyweight-squat/compositions/title.html b/videos/projects/bodyweight-squat/compositions/title.html
new file mode 100644
index 0000000..0e73a7b
--- /dev/null
+++ b/videos/projects/bodyweight-squat/compositions/title.html
@@ -0,0 +1,33 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Inter", sans-serif; color: #eaf2ff; }
+    #title-block { position: absolute; left: 192px; top: 108px; }
+    #title-text { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 96px; line-height: 1; letter-spacing: 0.01em; }
+    #title-text .w { display: inline-block; margin-right: 24px; }
+    #title-text .hot { color: var(--accent, #ff7a45); }
+    #title-muscles { margin-top: 18px; font-weight: 600; font-size: 30px; letter-spacing: 0.22em; }
+    #title-rule { width: 96px; height: 4px; margin-top: 22px; background: var(--accent, #ff7a45); transform-origin: left center; }
+  </style>
+  <div
+    id="root"
+    data-composition-id="title"
+    data-width="1920"
+    data-height="1080"
+    data-composition-variables='[{"id":"exercise","type":"string","label":"Exercise (first word)","default":"BODYWEIGHT"},{"id":"exercise2","type":"string","label":"Exercise (second word)","default":"SQUAT"},{"id":"muscles","type":"string","label":"Muscles worked","default":"QUADS · GLUTES · CORE"},{"id":"accent","type":"color","label":"Accent colour","default":"#ff7a45"}]'
+  >
+    <div id="title-block">
+      <h1 id="title-text"><span class="w" data-var-text="exercise">BODYWEIGHT</span><span class="w hot" data-var-text="exercise2">SQUAT</span></h1>
+      <div id="title-muscles" data-var-text="muscles">QUADS · GLUTES · CORE</div>
+      <div id="title-rule"></div>
+    </div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    tl.fromTo("#title-text .w", { opacity: 0, filter: "blur(8px)" },
+      { opacity: 1, filter: "blur(0px)", duration: 0.2, ease: "power4.out", stagger: 0.09 }, 0.3);
+    tl.fromTo("#title-muscles", { opacity: 0, filter: "blur(6px)" },
+      { opacity: 1, filter: "blur(0px)", duration: 0.3, ease: "power3.out" }, 0.65);
+    tl.fromTo("#title-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.5, ease: "expo.out" }, 0.7);
+    window.__timelines["title"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bodyweight-squat/compositions/wash.html b/videos/projects/bodyweight-squat/compositions/wash.html
new file mode 100644
index 0000000..753a3fb
--- /dev/null
+++ b/videos/projects/bodyweight-squat/compositions/wash.html
@@ -0,0 +1,15 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; pointer-events: none; }
+    #wash-top { position: absolute; left: 0; top: 0; width: 100%; height: 420px; background: linear-gradient(to bottom, rgba(5,11,26,0.78), rgba(5,11,26,0)); }
+    #wash-bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: 440px; background: linear-gradient(to top, rgba(5,11,26,0.82), rgba(5,11,26,0)); }
+  </style>
+  <div id="root" data-composition-id="wash" data-width="1920" data-height="1080">
+    <div id="wash-top" data-layout-ignore></div>
+    <div id="wash-bottom" data-layout-ignore></div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    window.__timelines["wash"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/bodyweight-squat/hyperframes.json b/videos/projects/bodyweight-squat/hyperframes.json
new file mode 100644
index 0000000..dc9ec2e
--- /dev/null
+++ b/videos/projects/bodyweight-squat/hyperframes.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  },
+  "media": {
+    "autoProxy": true
+  }
+}
diff --git a/videos/projects/bodyweight-squat/index.html b/videos/projects/bodyweight-squat/index.html
new file mode 100644
index 0000000..e5b61d6
--- /dev/null
+++ b/videos/projects/bodyweight-squat/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="assets/gsap.min.js"></script>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #050b1a; }
+      #root { position: relative; width: 1920px; height: 1080px; background: #050b1a; }
+      .scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
+    </style>
+  </head>
+  <body>
+    <div id="root" data-composition-id="main" data-start="0" data-duration="16.0" data-width="1920" data-height="1080">
+      <div id="stage" class="scene" style="z-index: 1" data-composition-id="stage" data-composition-src="compositions/stage.html" data-start="0" data-duration="16.0" data-track-index="0" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="wash" class="scene" style="z-index: 2" data-composition-id="wash" data-composition-src="compositions/wash.html" data-start="0" data-duration="16.0" data-track-index="1" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="title" class="scene" style="z-index: 5" data-composition-id="title" data-composition-src="compositions/title.html" data-start="0" data-duration="16.0" data-track-index="2" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="counter" class="scene" style="z-index: 5" data-composition-id="counter" data-composition-src="compositions/counter.html" data-start="0" data-duration="16.0" data-track-index="3" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="tips" class="scene" style="z-index: 5" data-composition-id="tips" data-composition-src="compositions/tips.html" data-start="0" data-duration="16.0" data-track-index="4" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <audio id="music" src="assets/music.mp3" data-start="0" data-duration="16.0" data-track-index="5" data-volume="1" data-fade-in="0.15" data-fade-out="0.5"></audio>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+      tl.seek(0);
+    </script>
+  </body>
+</html>
diff --git a/videos/projects/bodyweight-squat/meta.json b/videos/projects/bodyweight-squat/meta.json
new file mode 100644
index 0000000..5a49c16
--- /dev/null
+++ b/videos/projects/bodyweight-squat/meta.json
@@ -0,0 +1,5 @@
+{
+  "id": "squat",
+  "name": "squat",
+  "createdAt": "2026-10-21T23:35:06.896Z"
+}
\ No newline at end of file
diff --git a/videos/projects/bodyweight-squat/package.json b/videos/projects/bodyweight-squat/package.json
new file mode 100644
index 0000000..922dca4
--- /dev/null
+++ b/videos/projects/bodyweight-squat/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "squat",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npx --yes hyperframes@0.8.185 preview",
+    "check": "npx --yes hyperframes@0.8.185 check",
+    "render": "npx --yes hyperframes@0.8.185 render",
+    "publish": "npx --yes hyperframes@0.8.185 publish"
+  }
+}
diff --git a/videos/projects/diamond-pushup/AGENTS.md b/videos/projects/diamond-pushup/AGENTS.md
new file mode 100644
index 0000000..ef50661
--- /dev/null
+++ b/videos/projects/diamond-pushup/AGENTS.md
@@ -0,0 +1,104 @@
+# HyperFrames Composition Project
+
+## Skills — read these first
+
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
+
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
+
+> **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
+> its `hyperframes/references/plugin-installation.md` execution rules. Update via
+> the plugin manager, not the standalone commands below.
+>
+> **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev          # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background  # agent-safe persistent Studio preview
+npx hyperframes preview --status      # verify the persistent preview is listening
+npx hyperframes preview --stop        # stop it when review is finished
+npm run check        # lint + runtime + layout + motion + contrast (one command)
+npm run render       # render to MP4
+npm run publish      # publish and get a shareable link
+npx hyperframes lint --verbose  # include info-level findings
+npx hyperframes lint --json     # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **Back from the desktop app.** Once this project was opened in the HyperFrames desktop app, run `npx hyperframes catch-up` before your next change here: it lists what the person asked Framey in the app and which files changed since.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
+## Key Rules
+
+1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+3. Register one paused root timeline per composition on `window.__timelines`:
+   ```js
+   window.__timelines = window.__timelines || {};
+   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+   ```
+   Scene timelines manually added to this root must not be paused. A paused
+   child does not advance when the root is seeked. The runtime activates
+   registered composition siblings, not arbitrary nested scene timelines.
+4. A video with sound keeps it on the `<video>` (`data-has-audio="true"`, no `muted`). Use a separate `<audio>` for music, voiceover, replacement audio, J/L cuts, or audio detached in Studio. Silent footage and b-roll: `muted`.
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/projects/diamond-pushup/CLAUDE.md b/videos/projects/diamond-pushup/CLAUDE.md
new file mode 100644
index 0000000..ef50661
--- /dev/null
+++ b/videos/projects/diamond-pushup/CLAUDE.md
@@ -0,0 +1,104 @@
+# HyperFrames Composition Project
+
+## Skills — read these first
+
+**Invoke the relevant skill before writing or modifying compositions.** Skills encode framework-specific patterns (e.g., `window.__timelines` registration, `data-*` attribute semantics, shader-compatible CSS rules) that generic web docs don't cover, so compositions written without them break.
+
+**Doing anything with HyperFrames?** Start at `/hyperframes`. Make any video by asking for it; the `/hyperframes` skill carries the contract and the references (each kind of film, story, motion, look, sound, review, captions, overlays). Read it first, especially when there's no project context to orient you.
+
+- `/hyperframes` — read first for any request to make, edit, animate or render a video, motion graphic, captions or overlays. Holds the render contract and the work loop.
+- `/hyperframes-cli` — the CLI by job: scaffold, check, look at frames, edit the timeline, preview, render, publish, project history.
+- `/hyperframes-registry` — ready-made blocks and components installed as editable source. Search it before hand-building any named visual.
+- `/media-use` — get or make any media (music, sound effects, images, voiceover, avatar and generated video, transcripts, cutouts, colour grades) and mix placed audio.
+- `/figma` — bring a Figma design, frame, logo or brand into a video.
+- `/slideshow` — a presentation or pitch deck. Output is a navigable deck, not a rendered MP4.
+- `/remotion-to-hyperframes` — bring existing video code or footage into HyperFrames (Remotion first; also Motion Canvas, Lottie, Three.js, canvas, or renders from other tools) and verify it frame by frame against the original.
+
+**Changing how real footage or images look or reveal?** Load `/media-use` and read its `references/media-treatments.md` before editing, even when the request only says dark, flat, boring, retro, private, or “make the reveal cooler.” It governs how footage is treated, never whether media may be used. Use canonical media treatments and seek-safe motion; do not improvise equivalent CSS/SVG filters or overlays.
+
+> **Tailwind v4 projects** (`hyperframes init --tailwind`): see `hyperframes-cli/references/init-and-scaffold.md` (Tailwind).
+
+> **Using a HyperFrames plugin?** Load skills from that installed bundle and follow
+> its `hyperframes/references/plugin-installation.md` execution rules. Update via
+> the plugin manager, not the standalone commands below.
+>
+> **Standalone skill missing or stale?** Run `npx hyperframes skills update <name>` to install/refresh
+> the specific skill you need, or bare `npx hyperframes skills update` to refresh the core set plus
+> everything already installed — neither pulls the full set. Restart the agent session so
+> newly installed skills load.
+
+## Commands
+
+```bash
+npm run dev          # human-operated foreground preview (blocks until stopped)
+npx hyperframes preview --background  # agent-safe persistent Studio preview
+npx hyperframes preview --status      # verify the persistent preview is listening
+npx hyperframes preview --stop        # stop it when review is finished
+npm run check        # lint + runtime + layout + motion + contrast (one command)
+npm run render       # render to MP4
+npm run publish      # publish and get a shareable link
+npx hyperframes lint --verbose  # include info-level findings
+npx hyperframes lint --json     # machine-readable output for CI
+npx hyperframes docs <topic> # reference docs in terminal
+```
+
+> **Agents must use `npx hyperframes preview --background` for Studio handoff.** Do not rely
+> on a shell/tool `run_in_background` wrapper around `npm run dev`: that foreground process
+> remains owned by the invoking session and can disappear while the browser stays open,
+> leaving refreshes at `ERR_CONNECTION_TIMED_OUT`. Verify with `preview --status`, keep it
+> alive through review, and stop it explicitly with `preview --stop` afterward.
+
+> **Back from the desktop app.** Once this project was opened in the HyperFrames desktop app, run `npx hyperframes catch-up` before your next change here: it lists what the person asked Framey in the app and which files changed since.
+
+> **Pinned CLI version.** These scripts pin an exact `hyperframes@X.Y.Z` so this project re-renders identically over time. Weeks later that pin lags fixes shipped since. To move up: `npx hyperframes@latest upgrade --project . --check` (shows the delta), then `npx hyperframes@latest upgrade --project .` to rewrite the pins. Always unpinned — the pinned script re-runs the old version against itself.
+
+## Documentation
+
+**For quick reference**, use the local CLI docs command (no network required):
+
+```bash
+npx hyperframes docs <topic>
+```
+
+Topics: `data-attributes`, `gsap`, `compositions`, `rendering`, `examples`, `troubleshooting`
+
+**For full documentation**, discover pages via the machine-readable index — do NOT guess URLs:
+
+```
+https://hyperframes.heygen.com/llms.txt
+```
+
+## Project Structure
+
+- `index.html` — main composition (root timeline)
+- `compositions/` — sub-compositions referenced via `data-composition-src`
+- `meta.json` — project metadata (id, name)
+- `transcript.json` — whisper word-level transcript (if generated)
+
+## Linting — ALWAYS RUN AFTER CHANGES
+
+After creating or editing any `.html` composition, **always** run the full check before considering the task complete:
+
+```bash
+npm run check
+```
+
+Fix all errors before presenting the result. Warnings should be reviewed before rendering.
+
+Then look at what you changed: `npx hyperframes snapshot --at <seconds>` (or `--range START,END`, `--composition <id>`) at the moments you edited, and read the frames before you reply. A passing check does not show how it looks.
+
+## Key Rules
+
+1. Every timed element needs `data-start` and a duration. `data-start` is what marks it as timed; `data-track-index` is an optional Studio display lane the render never reads
+2. Give timed visual elements `class="clip"`. The framework keys visibility off `data-start`, not the class, but the shared `.clip` CSS is what gives a scene its full-frame box, and `lint` warns without it
+3. Register one paused root timeline per composition on `window.__timelines`:
+   ```js
+   window.__timelines = window.__timelines || {};
+   window.__timelines["composition-id"] = gsap.timeline({ paused: true });
+   ```
+   Scene timelines manually added to this root must not be paused. A paused
+   child does not advance when the root is seeked. The runtime activates
+   registered composition siblings, not arbitrary nested scene timelines.
+4. A video with sound keeps it on the `<video>` (`data-has-audio="true"`, no `muted`). Use a separate `<audio>` for music, voiceover, replacement audio, J/L cuts, or audio detached in Studio. Silent footage and b-roll: `muted`.
+5. Sub-compositions use `data-composition-src="compositions/file.html"` to reference other HTML files
+6. Only deterministic logic — no `Date.now()`, no `Math.random()`, no network fetches
diff --git a/videos/projects/diamond-pushup/assets/gsap.min.js b/videos/projects/diamond-pushup/assets/gsap.min.js
new file mode 100644
index 0000000..fde57af
--- /dev/null
+++ b/videos/projects/diamond-pushup/assets/gsap.min.js
@@ -0,0 +1,11 @@
+/*!
+ * GSAP 3.14.2
+ * https://gsap.com
+ * 
+ * @license Copyright 2025, GreenSock. All rights reserved.
+ * Subject to the terms at https://gsap.com/standard-license.
+ * @author: Jack Doyle, jack@greensock.com
+ */
+
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(",")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)"__proto__"!==r&&"constructor"!==r&&"prototype"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||"duration"===r&&i||"ease"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,"_first","_last",e._sort?"_start":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S("scrollTrigger",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!("immediateRender"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:""}function cb(t,e){return t&&v(t)&&"length"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T("Invalid scope")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T("Invalid scope")||a.createElement("div"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f="auto"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs("y"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);"random"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?"y"===b?d/f:f:Math.max(f,d/f))||0)*("edges"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+"").split(".")[1]||"").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+"").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf("[")+1,r=t.substring(e||7,e?t.indexOf("]"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,"onInterrupt"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=("css"===e?"CSS":e.charAt(0).toUpperCase()+e.substr(1))+"Plugin"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(","===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if("#"===e.charAt(0)){if(e.length<6&&(e="#"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):"")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if("hsl"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf("="))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o="",u=(t+o).match(Rt),h=e?"hsla(":"rgba(",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+","+t[1]+"%,"+t[2]+"%,"+t[3]:t.join(","))+")"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,"1").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+"0,0,0,0)":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(" ");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+"").split("("),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf("{")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(":"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(","):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,"").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf("(")+1,r=t.indexOf(")"),i=t.indexOf("(",e);return t.substring(e,~i&&i<r?t.indexOf(")",r+1):r)}(t).split(",").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE("",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+("easeIn"===e?".in":"easeOut"===e?".out":".inOut")]=Bt[t+"."+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s="out"===r?Lm:"in"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t="out"===e?Tm:"in"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:"auto",nullTargetWarn:1,units:{lineHeight:""}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K="function"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\([^)]+\)/g,et=/,\s*/g,rt=/(?:-?\.?\d|\.)+/gi,it=/[-+=.]*\d+[.e\-+]*\d*[e\-+]*\d*/g,nt=/[-+=.]*\d+[.e-]*\d*[a-z%]*/g,at=/[-+=.]*\d+\.?\d*(?:e-|e\+)?\d*/gi,st=/[+-]=-?[.\d]+/,ot=/[^,'"\[\]\s]+/gi,ut=/^[+\-=e\s\d]*\d+[.\d]*([a-z]*|%)\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt="",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return"isFromStart"===e||"isStart"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s="%"===e.substr(-1),n=e.indexOf("="),"<"===a||">"===a?(0<=n&&(e=e.replace(/=/,"")),("<"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+"Params"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e="(?:\\b(?:(?:rgb|rgba|hsl|hsla)\\(.+?\\))|\\B#(?:[0-9a-f]{3,4}){1,2}\\b";for(t in Et)e+="|"+t+"\\b";return new RegExp(e+")","gi")}(),Ft=/hsl[a]?\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m="undefined"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?"unshift":"push"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\d.\-M][\d.\-,\s]/,Nt=/["']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja("Linear,Quad,Cubic,Quart,Quint,Strong",function(t,e){var r=e<5?e+1:e;Vb(t+",Power"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb("Elastic",Xb("in"),Xb("out"),Xb()),B=7.5625,Y=1/2.75,Vb("Bounce",function(t){return 1-jn(1-t)},jn),Vb("Expo",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb("Circ",function(t){return-(J(1-t*t)-1)}),Vb("Sine",function(t){return 1===t?1:1-Q(t*W)}),Vb("Back",Yb("in"),Yb("out"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt["quad.out"],ja("onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt",function(t){return Tt+=t+","+t+"Params,"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),"nested"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+"Params"]=r),"onUpdate"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,"onRepeat"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if("isPause"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if("isPause"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,"onStart"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,"onUpdate",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?"onComplete":"onReverseComplete",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data="isPause",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&"isPause"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||"none",lazy:!1,immediateRender:!1,time:n,overwrite:"auto",duration:e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&"time"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||"power1.inOut";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),"ease"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p="get"!==i?i:s(c)?l?t[e.indexOf("set")||!s(t["get"+e.substr(3)])?e:"get"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf("random(")&&(n=rb(n)),"="===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||""===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+="",(c=~(i+="").indexOf("random("))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:"rgba("===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:",",s:d,c:"="===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):"",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),"boolean"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&"nested"===D.data?D.vars.targets:A,z="auto"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g="none"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:"isStart",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,"onUpdate")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:"isFromStart",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,"get",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf("random(")?rb(t):t},Kt=Tt+"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert",$t={};ja(Kt+",id,stagger,delay,duration,paused,scrollTrigger",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;"number"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):"length"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T("GSAP target "+e+" not found. https://gsap.com",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:"nested",defaults:O||{},targets:P&&"nested"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:"none"})),s._ease=Vt(k.ease||r.ease||"none");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,">")}),s.duration();else{for(l in u={},k)"ease"===l||"easeEach"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&"nested"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,"onStart"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,"onUpdate")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,"onRepeat"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?"onComplete":"onReverseComplete",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,"onUpdate"),l&&t._repeat&&!r&&t.parent&&Dt(t,"onRepeat"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?"onComplete":"onReverseComplete",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]="+=0",Qt(t,s),Ht=0,o?T(e+" not eligible for reset"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,"_first","_last",this._dp._sort?"_start":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e="all"),!(t||e&&"all"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||"all"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return"all"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],"all"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(",")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],"all"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&("kill"in h.d&&!0!==h.d.kill(u)||Ba(this,h,"_pt"),delete a[u]),"all"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja("staggerTo,staggerFrom,staggerFromTo",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice("staggerFromTo"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i="";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,"_pt"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:"root",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc("matchMediaInit"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc("matchMediaRevert"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc("matchMedia"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&"nested"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)"isFlip"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?"nested"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add("onMatch",e),s.queries=t)"all"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener("change",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return"native"===e&&(e=""),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]="+=0.1",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||"").split(",").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+" effect requires "+t+" plugin.")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,"get",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja("to,from,fromTo,delayedCall,set,killTweensOf",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:"attr",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||"",(s=this.add(t,"setAttribute",(o||0)+"",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:"endArray",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc("roundProps",ib),Oc("modifiers"),Oc("snap",jb))||Re;te.version=Zt.version=Fe.version="3.14.2",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},"transform"===t)return mr.transform.split(",").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(",")?t.split(",").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute("data-svg-origin"),this.props.push(vr,e,"")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty("translate"),t.removeProperty("scale"),t.removeProperty("rotate"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty("--"===r[t].substr(0,2)?r[t]:r[t].replace(cr,"-$1").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute("data-svg-origin",this.svgo||"")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=" "+a.zOrigin+"px",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(",").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||"http://www.w3.org/1999/xhtml").replace(/^https/,"http"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,"-$1").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||""}function Wd(){(function _windowExists(){return"undefined"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd("div")||{style:{}},Sd("div"),gr=Tr(gr),vr=gr+"Origin",je.style.cssText="border-width:0;line-height:0;position:absolute;padding:0",Xe=!!Tr("perspective"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd("svg",r&&r.getAttribute("xmlns")||"http://www.w3.org/2000/svg"),n=t.cloneNode(!0);n.style.display="block",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,["x","cx","x1"])||0,y:+Yd(e,["y","cy","y1"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?("ms"!==(r=e.substr(0,2))&&"webkit"!==e.substr(0,6)||(e="-"+e),i.removeProperty("--"===r?e:e.replace(cr,"-$1").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+"").trim().substr((u+"").length)||"px",l=je.style,f=pr.test(e),d="svg"===t.tagName.toLowerCase(),c=(d?"client":"offset")+(f?"Width":"Height"),p="px"===i,_="%"===i;if(i===h||!u||br[i]||br[h])return u;if("px"===h||p||(u=de(t,e,r,"px")),o=t.getCTM&&$d(t),(_||"%"===h)&&(hr[e]||~e.indexOf("adius")))return n=o?t.getBBox()[f?"width":"height"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?"width":"height"]=100+(p?h:i),a="rem"!==i&&~e.indexOf("adius")||"em"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||"height"!==e&&"width"!==e)!_&&"%"!==h||wr[Td(a,"display")]||(l.position=Td(t,"position")),a===t&&(l.position="static"),a.appendChild(je),n=je[c],a.removeChild(je),l.position="absolute";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||"none"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):"borderColor"===e&&(r=Td(t,"borderTopColor"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+="","var(--"===(i+="").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(")")))),"auto"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:"rgba("!==p.substr(-5)&&"hsla("!==p.substr(-5)||(l=1),d!==(f=u[y++]||"")&&(h=parseFloat(f)||0,m=f.substr((h+"").length),"="===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+"").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:",",s:h,c:c-h,m:l&&l<4||"zIndex"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):""}else g.r="display"===e&&"none"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(" "),r=e[0],i=e[1]||"50%";return"top"!==r&&"bottom"!==r&&"left"!==i&&"right"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(" ")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if("all"===o||!0===o)s.cssText="",i=1;else for(n=(o=o.split(",")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r="transformOrigin"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute("transform"),s.scale=s.rotate=s.translate="none",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return"matrix(1, 0, 0, 1, 0, 0)"===t||"none"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute("transform")?"1,0,0,1,0,0"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(",")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display="block",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,"display"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(" "),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf("%")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf("%")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]="0px 0px",a&&(ae(a,h,"xOrigin",f,w),ae(a,h,"yOrigin",d,x),ae(a,h,"xOffset",c,h.xOffset),ae(a,h,"yOffset",p,h.yOffset)),t.setAttribute("data-svg-origin",w+" "+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,"x",r+"px",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf("rad")?lr:1)-n,f=n+l+"deg";return h&&("short"===(s=a.split("_")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),"cw"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:"ccw"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u="deg",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute("transform"),r.setAttribute("transform",""),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute("transform",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&"perspective,force3D,transformOrigin,svgOrigin".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\s,\(]\S/,mr={autoAlpha:"opacity,visibility",scale:"scaleX,scaleY",alpha:"opacity"},gr="transform",vr=gr+"Origin",yr="O,Moz,ms,Ms,Webkit".split(","),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?"ms":0<=n?yr[n]:"")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&"transform"!==e&&~(e=mr[e]).indexOf(",")&&(e=e.split(",")[0]),hr[e]&&"transform"!==e?(n=Pr(t,i),n="transformOrigin"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+" "+n.zOrigin+"px"):(n=t.style[e])&&"auto"!==n&&!i&&!~(n+"").indexOf("calc(")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||("opacity"===e?1:0)),r&&!~(n+"").trim().indexOf(" ")?de(t,e,n,r)+r:n},kr={top:"0%",bottom:"100%",left:"0%",right:"100%",center:"50%"},Or={clearProps:function clearProps(t,e,r,i,n){if("isFromStart"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if("x"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L="deg",B=getComputedStyle(t),Y=Td(t,vr)||"0";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&("none"===B.translate&&"none"===B.scale&&"none"===B.rotate||(F[gr]=("none"!==B.translate?"translate3d("+(B.translate+" 0 0").split(" ").slice(0,3).join(", ")+") ":"")+("none"!==B.rotate?"rotate("+B.rotate+") ":"")+("none"!==B.scale?"scale("+B.scale.split(" ").join(",")+") ":"")+("none"!==B[gr]?B[gr]:"")),F.scale=F.rotate=F.translate="none"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+"px "+(r.yOrigin-C.y)+"px",""):!e&&t.getAttribute("data-svg-origin"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute("transform"),r.forceCSS=t.setAttribute("transform","")||!me(Td(t,gr)),M&&t.setAttribute("transform",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+"px",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+"px",r.z=a+"px",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+"px",(r.zOrigin=parseFloat(Y.split(" ")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(" "))[0]+" "+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z="0px",e.rotationY=e.rotationX="0deg",e.force3D=0,Rr(t,e)},Sr="0deg",zr="0px",Er=") ",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y="",T="auto"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+="perspective("+_+Er),(i||n)&&(y+="translate("+i+"%, "+n+"%) "),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?"translate3d("+a+", "+s+", "+o+") ":"translate("+a+", "+s+Er),u!==Sr&&(y+="rotate("+u+Er),h!==Sr&&(y+="rotateY("+h+Er),l!==Sr&&(y+="rotateX("+l+Er),f===Sr&&d===Sr||(y+="skew("+f+", "+d+Er),1===c&&1===p||(y+="scale("+c+", "+p+Er),g.style[gr]=y||"translate(0, 0)"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+"").indexOf("px")||k&&!~(f+"").indexOf("px"))&&(x=de(g,"x",l,"px"),k=de(g,"y",f,"px")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s="matrix("+r+","+i+","+n+","+a+","+x+","+k+")",g.setAttribute("transform",s),w&&(g.style[gr]=s)};ja("padding,margin,Width,Radius",function(e,r){var t="Right",i="Bottom",n="Left",o=(r<3?["Top",t,i,n]:["Top"+n,"Top"+t,i+t,i+n]).map(function(t){return r<2?e+t:"border"+t+e});Or[1<r?"border"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(" ")).split(a[0]).length?a[0]:s;a=(i+"").split(" "),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:"css",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if("autoRound"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],"function"===l&&(l=typeof(o=o.call(i,n,t,a))),"string"===l&&~o.indexOf("random(")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if("--"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+"").trim(),o+="",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,"setProperty",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if("undefined"!==l){if(O&&d in O?(s="function"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf("random(")&&(s=rb(s)),_a(s+"")||"auto"===s||(s+=N.units[d]||_a(xr(t,d))||""),"="===(s+"").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_="string"===l&&"="===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&("autoAlpha"===d&&(1===h&&"hidden"===xr(t,"visibility")&&u&&(h=0),b.push("visibility",0,k.visibility),ae(this,k,"visibility",h?"inherit":"hidden",u?"inherit":"hidden",!u)),"scale"!==d&&"transform"!==d&&~(d=mr[d]).indexOf(",")&&(d=d.split(",")[0])),m=d in hr){if(this.styles.save(d),w=o,"string"===l&&"var(--"===o.substring(0,6)){if("calc("===(o=Td(t,o.substring(4,o.indexOf(")")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,"perspective"),M?t.style.perspective=M:_d(t,"perspective")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),"scale"===d)this._pt=new we(this._pt,v,"scaleY",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push("scaleY",d),d+="X";else{if("transformOrigin"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(" ")[2])||0)!==v.zOrigin&&ae(this,v,"zOrigin",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if("svgOrigin"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if("smoothOrigin"===d){ae(this,v,"smooth",v.smooth,o);continue}if("force3D"===d){v[d]=o;continue}if("transform"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+"").substr((h+"").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||"px"!==p&&"zIndex"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&"%"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if("parseTransform"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):"function"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(",")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,"x"))?r&&Ve===r?"scale"===e?Id:Hd:(Ve=r||{})&&("scale"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf("-")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir="x,y,z,scale,scaleX,scaleY,xPercent,yPercent")+","+(Lr="rotation,rotationX,rotationY,skewX,skewY")+",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]="deg",Cr[t]=1}),mr[Br[13]]=Ir+","+Lr,ja("0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY",function(t){var e=t.split(":");mr[e[1]]=Br[e[0]]}),ja("x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective",function(t){N.units[t]="px"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)==="undefined"||window!==e){Object.defineProperty(e,"__esModule",{value:!0})} else {delete e.default}});
+
diff --git a/videos/projects/diamond-pushup/assets/music.mp3 b/videos/projects/diamond-pushup/assets/music.mp3
new file mode 100644
index 0000000..9d0e4bf
Binary files /dev/null and b/videos/projects/diamond-pushup/assets/music.mp3 differ
diff --git a/videos/projects/diamond-pushup/assets/pushup.mp4 b/videos/projects/diamond-pushup/assets/pushup.mp4
new file mode 100644
index 0000000..2b7c2a8
Binary files /dev/null and b/videos/projects/diamond-pushup/assets/pushup.mp4 differ
diff --git a/videos/projects/diamond-pushup/compositions/tips.html b/videos/projects/diamond-pushup/compositions/tips.html
new file mode 100644
index 0000000..69a4761
--- /dev/null
+++ b/videos/projects/diamond-pushup/compositions/tips.html
@@ -0,0 +1,36 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Inter", sans-serif; color: #eaf2ff; }
+    .tip { position: absolute; left: 192px; bottom: 108px; width: 1100px; }
+    .tip .num { display: inline-block; font-weight: 700; font-size: 28px; letter-spacing: 0.16em; color: var(--accent, #ff7a45); margin-right: 20px; }
+    .tip h2 { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 76px; line-height: 1.02; letter-spacing: 0.01em; }
+    .tip p { margin-top: 10px; font-weight: 500; font-size: 32px; line-height: 1.25; }
+  </style>
+  <div id="root" data-composition-id="tips" data-width="1920" data-height="1080">
+    <div id="tip1" class="clip tip" data-start="0.4" data-duration="2.0" data-track-index="0">
+      <h2>LOWER SLOWLY</h2><p><span class="num">01</span>Elbows close to your body</p>
+    </div>
+    <div id="tip2" class="clip tip" data-start="2.6" data-duration="2.0" data-track-index="0">
+      <h2>PUSH UP</h2><p><span class="num">02</span>Squeeze your chest and triceps</p>
+    </div>
+    <div id="tip3" class="clip tip" data-start="4.8" data-duration="2.4" data-track-index="0">
+      <h2>BODY STRAIGHT</h2><p><span class="num">03</span>Core tight, hips level</p>
+    </div>
+    <div id="tip4" class="clip tip" data-start="7.4" data-duration="2.7" data-track-index="0">
+      <h2>REPEAT WITH CONTROL</h2><p><span class="num">04</span>Breathe out as you push up</p>
+    </div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    // Each tip blurs in, holds, and leaves faster than it arrived. Animate the children, never the .clip.
+    [["tip1", 0.4, 2.0], ["tip2", 2.6, 2.0], ["tip3", 4.8, 2.4], ["tip4", 7.4, 2.7]].forEach(([id, s, d]) => {
+      const kids = "#" + id + " > *";
+      tl.fromTo(kids, { opacity: 0, filter: "blur(8px)" },
+        { opacity: 1, filter: "blur(0px)", duration: 0.22, ease: "power4.out", stagger: 0.06 }, s);
+      if (id !== "tip4") {
+        tl.to(kids, { opacity: 0, filter: "blur(8px)", duration: 0.14, ease: "power3.in" }, s + d - 0.2);
+      }
+    });
+    window.__timelines["tips"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/diamond-pushup/compositions/title.html b/videos/projects/diamond-pushup/compositions/title.html
new file mode 100644
index 0000000..a3f6f1b
--- /dev/null
+++ b/videos/projects/diamond-pushup/compositions/title.html
@@ -0,0 +1,33 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; font-family: "Inter", sans-serif; color: #eaf2ff; }
+    #title-block { position: absolute; left: 192px; top: 108px; }
+    #title-text { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 96px; line-height: 1; letter-spacing: 0.01em; }
+    #title-text .w { display: inline-block; margin-right: 24px; }
+    #title-text .hot { color: var(--accent, #ff7a45); }
+    #title-muscles { margin-top: 18px; font-weight: 600; font-size: 30px; letter-spacing: 0.22em; }
+    #title-rule { width: 96px; height: 4px; margin-top: 22px; background: var(--accent, #ff7a45); transform-origin: left center; }
+  </style>
+  <div
+    id="root"
+    data-composition-id="title"
+    data-width="1920"
+    data-height="1080"
+    data-composition-variables='[{"id":"exercise","type":"string","label":"Exercise (first word)","default":"DIAMOND"},{"id":"exercise2","type":"string","label":"Exercise (second word)","default":"PUSH-UP"},{"id":"muscles","type":"string","label":"Muscles worked","default":"CHEST · TRICEPS · SHOULDERS"},{"id":"accent","type":"color","label":"Accent colour","default":"#ff7a45"}]'
+  >
+    <div id="title-block">
+      <h1 id="title-text"><span class="w" data-var-text="exercise">DIAMOND</span><span class="w hot" data-var-text="exercise2">PUSH-UP</span></h1>
+      <div id="title-muscles" data-var-text="muscles">CHEST · TRICEPS · SHOULDERS</div>
+      <div id="title-rule"></div>
+    </div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    tl.fromTo("#title-text .w", { opacity: 0, filter: "blur(8px)" },
+      { opacity: 1, filter: "blur(0px)", duration: 0.2, ease: "power4.out", stagger: 0.09 }, 0.3);
+    tl.fromTo("#title-muscles", { opacity: 0, filter: "blur(6px)" },
+      { opacity: 1, filter: "blur(0px)", duration: 0.3, ease: "power3.out" }, 0.65);
+    tl.fromTo("#title-rule", { scaleX: 0 }, { scaleX: 1, duration: 0.5, ease: "expo.out" }, 0.7);
+    window.__timelines["title"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/diamond-pushup/compositions/wash.html b/videos/projects/diamond-pushup/compositions/wash.html
new file mode 100644
index 0000000..753a3fb
--- /dev/null
+++ b/videos/projects/diamond-pushup/compositions/wash.html
@@ -0,0 +1,15 @@
+<template>
+  <style>
+    #root { position: absolute; inset: 0; pointer-events: none; }
+    #wash-top { position: absolute; left: 0; top: 0; width: 100%; height: 420px; background: linear-gradient(to bottom, rgba(5,11,26,0.78), rgba(5,11,26,0)); }
+    #wash-bottom { position: absolute; left: 0; bottom: 0; width: 100%; height: 440px; background: linear-gradient(to top, rgba(5,11,26,0.82), rgba(5,11,26,0)); }
+  </style>
+  <div id="root" data-composition-id="wash" data-width="1920" data-height="1080">
+    <div id="wash-top" data-layout-ignore></div>
+    <div id="wash-bottom" data-layout-ignore></div>
+  </div>
+  <script>
+    const tl = gsap.timeline({ paused: true });
+    window.__timelines["wash"] = tl;
+  </script>
+</template>
diff --git a/videos/projects/diamond-pushup/hyperframes.json b/videos/projects/diamond-pushup/hyperframes.json
new file mode 100644
index 0000000..dc9ec2e
--- /dev/null
+++ b/videos/projects/diamond-pushup/hyperframes.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/hyperframes.json",
+  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
+  "paths": {
+    "blocks": "compositions",
+    "components": "compositions/components",
+    "assets": "assets"
+  },
+  "media": {
+    "autoProxy": true
+  }
+}
diff --git a/videos/projects/diamond-pushup/index.html b/videos/projects/diamond-pushup/index.html
new file mode 100644
index 0000000..ed7dc3b
--- /dev/null
+++ b/videos/projects/diamond-pushup/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <script src="assets/gsap.min.js"></script>
+    <style>
+      * { margin: 0; padding: 0; box-sizing: border-box; }
+      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #050b1a; }
+      #root { position: relative; width: 1920px; height: 1080px; background: #050b1a; }
+      #pushup-video { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: contain; z-index: 1; }
+      .scene { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
+    </style>
+  </head>
+  <body>
+    <div id="root" data-composition-id="main" data-start="0" data-duration="10.1" data-width="1920" data-height="1080">
+      <video id="pushup-video" class="clip" src="assets/pushup.mp4" data-start="0" data-duration="10.1" data-track-index="0" data-has-audio="true" data-volume="0.35" playsinline></video>
+      <audio id="music" src="assets/music.mp3" data-start="0" data-duration="10.1" data-track-index="4" data-volume="1" data-fade-in="0.15" data-fade-out="0.5"></audio>
+
+      <div id="wash" class="scene" style="z-index: 2" data-composition-id="wash" data-composition-src="compositions/wash.html" data-start="0" data-duration="10.1" data-track-index="1" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="title" class="scene" style="z-index: 5" data-composition-id="title" data-composition-src="compositions/title.html" data-start="0" data-duration="10.1" data-track-index="2" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+      <div id="tips" class="scene" style="z-index: 5" data-composition-id="tips" data-composition-src="compositions/tips.html" data-start="0" data-duration="10.1" data-track-index="3" data-track-kind="graphics" data-width="1920" data-height="1080"></div>
+    </div>
+    <script>
+      const tl = gsap.timeline({ paused: true });
+      window.__timelines["main"] = tl;
+      tl.seek(0);
+    </script>
+  </body>
+</html>
diff --git a/videos/projects/diamond-pushup/meta.json b/videos/projects/diamond-pushup/meta.json
new file mode 100644
index 0000000..78c6c62
--- /dev/null
+++ b/videos/projects/diamond-pushup/meta.json
@@ -0,0 +1,5 @@
+{
+  "id": "app",
+  "name": "app",
+  "createdAt": "2026-10-21T23:22:10.590Z"
+}
\ No newline at end of file
diff --git a/videos/projects/diamond-pushup/package.json b/videos/projects/diamond-pushup/package.json
new file mode 100644
index 0000000..110f5c5
--- /dev/null
+++ b/videos/projects/diamond-pushup/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "npx --yes hyperframes@0.8.185 preview",
+    "check": "npx --yes hyperframes@0.8.185 check",
+    "render": "npx --yes hyperframes@0.8.185 render",
+    "publish": "npx --yes hyperframes@0.8.185 publish"
+  }
+}